微信小程序基本总结

小程序目录结构

project.config.json 配置项目文件，用的最多的就是配置是否开启HTTPS校检
app.js 设置一些全局的基础数据
app.json 设置底部tabbar，标题栏和路由
app.wxss 公共样式，引入iconfont等
pages包含一个个具体页面
index.js 页面的逻辑、请求、和处理数据
index.wxss 页面样式
index.wxml 页面结构

wxml与html的异同

都是用来描述页面结构
都有标签、属性等构成
标签名字不一样，且小程序表标签更少，单一标签更多
多了一些wx:if这样的属性以及{{ }}这样的表达式
组件封装不同，wxml对组件进行了重新封装
小程序在JS Core内，没有DOM树和window对象，小程序中无法实现window对象和document对象

wxss和css的异同

都是描述页面样式
wxss具有css的大部分特性，也做了一些扩充和修改
wxss新增了尺寸单位，wxss在底层支持新的尺寸单位rpx；
wxss仅支持部分css选择器
wxss提供全局样式与局部样式

微信小程序调用接口

官方给出的接口叫做wx.request,官方示例：

wx.request({
 url: 'test.php', //仅为示例，并非真实的接口地址
 data: {
   x: '' ,
   y: ''
 },
 header: {
   'content-type': 'application/json'
 },
 success: function(res) {
  console.log(res.data)
 }
})

各项参数的解释如下：

一、URL为开发者服务器接口地址的请求，一般可以分成两部分：

1、https://域名ID——>请求的域名

2、index.php———>请求的功能接口

请求的域名进入服务器中，请求的功能接口进行数据传输

二、data为传递的参数例如将上示例代码的data传入数据接口中

三、header为请求的头文件，一般有两种写法：

1、'content-type':'application/json' 会对数据进行JSON序列化

2、'content-type':'x-www-form-urlencoded' 会将数据转换成 query string

四、method为HTTP 请求方法,有8种调用方式，分别为OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE:

一般常用的是 POST和GET两种模式，在进行传参的时候，请求功能接口时，method和index.php要一致，例如 method:'GET' 对应的是 $name = $_GET['a'];

五、dataType和responseType分别为返回的数据格式和响应的数据类型，默认值分别为：json和text

六、success为接口调用成功的回调函数，res中传递回来的是index.php传递的参数，调用特定参数的方式为：res.data.name

七、fail和complete分别为接口调用失败的回调函数和接口调用结束的回调函数（调用成功、失败都会执行）

小程序生命周期函数

onLoad()页面加载时触发，只会调用一次，可获取当前页面路径中的参数
onShuw()页面显示/切入后台时触发，一般用来发送数据请求
onReady()页面初次渲染完成时触发，只会调用一次，代表页面已可和视图进行交互
onHide()页面隐藏/切入后台时触发，如底部tab切换到其他页面或小程序切入后台等
onUnload()页面卸载时触发，如redirectTo或navigateBack到其他页面时

bindtap和catchtap的区别

　　bind绑定事件不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

　　<navigator url="../index/index">跳转到新页面</navigator>

　　<navigator url="../index/index" open-type="redirect">在当前页打开</navigator>

　　<navigator url="../index/index" open-type="switchTab">切换到首页Tab</navigator>

posted @ 2020-08-15 16:03 誩。阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

誩。

微信小程序基本总结

公告