小程序系列- 2.小程序环境

程序的生命周期

• 进入小程序----------微信客户端加载时候，就会给Page 实例 触发 onLoad 事件，它就会被调用， onLoad 在页面销毁之前只会触发1次，在onLoad 回调中，可以获取当前页面的打开参数option
• 页面显示-------------Page构造器参数所定义的onShow方法会被调用，一般从别的页面返回到当前页面时，当前页的onShow方法都会被调用。
• 页面初次渲染完成时-------------Page构造器参数所定义的onReady方法会被调用，onReady在页面没被销毁前只会触发1次，onReady触发时，表示页面已经准备妥当，在逻辑层就可以和视图层进行交互了。
• 页面不可见时----------------Page构造器参数所定义的onHide方法会被调用，这种情况会在使用wx.navigateTo切换到其他页面、底部tab切换时触发。
• 使用wx.redirectTo或wx.navigateBack返回到其他页时---------------当前页面会被微信客户端销毁回收，此时Page构造器参数所定义的onUnload方法会被调用

购物商城列表每个商品获取详情页逻辑

• 可以先建立一个空的详情页
• 在商品列表页每个注册一个跳转页面（url中带参数） // pages/list/list.js // 列表页使用navigateTo跳转到详情页 wx.navigateTo({ url: 'pages/detail/detail?id=1&other=abc' )
• 详情页通过onLoad回调的参数option就可以拿到商品id，从而绘制出对应的商品 // pages/detail/detail.js 详情页 Page({ onLoad: function(option) { console.log(option.id) console.log(option.other) } })

页面的数据

• 界面渲染的基本原理---------------------WXML是通过数据绑定的语法绑定从逻辑层传递过来的数据字段，这里所说的数据其实就是来自于页面Page构造器的data字段，data参数是页面第一次渲染时从逻辑层传递到渲染层的数据。
• setData其一般调用格式是 setData(data, callback)，
• 实际开发时，当需要更新data中数据时，我们只需要把改变的值进行setData(data, callback)设置，微信会自动更细数据 #此外需要注意以下3点： ​ 1.直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。 ​ 2.由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。 ​ 3.不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。

页面用户行为

• 下拉刷新 onPullDownRefresh 监听用户下拉刷新事件，需要在app.json的window选项中或页面配置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
• 上拉触底 onReachBottom 监听用户上拉触底事件。可以在app.json的window选项中或页面配置page.json中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。
• 页面滚动 onPageScroll 监听用户滑动页面事件，参数为 Object，包含 scrollTop 字段，表示页面在垂直方向已滚动的距离（单位px）。
• 用户转发 onShareAppMessage 只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容 ​ ​ 使用onShareAppMessage自定义转发字段 ​ // page.js Page({ onShareAppMessage: function () { return { title: '自定义转发标题', path: '/page/user?id=123' } } })

页面跳转和路由

• wx.navigateTo和wx.redirectTo只能打开非TabBar页面，wx.switchTab只能打开Tabbar页面。

wx.navigateTo(Object object)

wx.navigateTo({
  url: '页面地址',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

组件

链接： https://mp.weixin.qq.com/debug/wxadoc/dev/component/

API

一般调用的约定

• wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个 Callback 函数作为参数。当该事件触发时，会调用 Callback 函数。
• 如未特殊约定，多数 API 接口为异步接口 ，都接受一个Object作为参数。
• API的Object参数一般由success、fail、complete三个回调来接收接口调用结果
• wx.get* 开头的API是获取宿主环境数据的接口。
• wx.set* 开头的API是写入数据到宿主环境的接口。

例如通过wx.request发起网络请求

wx.request({
url: 'test.php',
data: {},
header: { 'content-type': 'application/json' },
success: function(res) {
 // 收到https服务成功后返回
 console.log(res.data)
},
fail: function() {
 // 发生网络错误等情况触发
},
complete: function() {
 // 成功或者失败后触发
}

官方API文档 https://mp.weixin.qq.com/debug/wxadoc/dev/api/

事件写法

事件绑定的写法和组件属性一致，以key="value"的形式，

#1.key以bind或者catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。
自基础库版本1.5.0起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。同时bind和catch前还可以加上capture-来表示捕获阶段。
​
​
#2.value是一个字符串，需要在对应的页面Page构造器中定义同名的函数，否则触发事件时在控制台会有报错信息。
bind和capture-bind的含义分别代表事件的冒泡阶段和捕获阶段，其触发的顺序如图3-8所示。