微信小程序注册page时做了什么

小程序中的每一个页面, 都有一个对应的js文件, 调用js文件内的Page方法注册页面示例, Page方法接受一个 Object 类型参数，绑定页面的初始数据、生命周期回调、事件处理函数等。 官方文档

注册一个Page页面时，我们一般需要做什么？

• 在生命周期函数中发送网络请求，从服务器获取数据
• 初始化数据，wxml引用展示
• 监听wxml中的事件，绑定对应的事件函数
• 其他一些监听（比如页面滚动、上拉刷新、下拉加载等）

Page实例有哪些生命周期函数

监听页面的生命周期函数

// 注册一个页面, 页面也有自己的生命周期函数
Page({
  // 监听页面的生命周期函数
  // 页面加载出来时
  onLoad: function (options) { },
  // 页面显示出来时
  onShow: function () { },
  // 页面初次渲染完成时
  onReady: function () { },
  // 页面隐藏时
  onHide: function () { },
  // 页面被销毁时
})

所有函数:

Page实例生命周期

生命周期函数触发顺序参考下图

初始化数据

用request请求为例 wxml:

<view>
  <view wx:for="{{list}}">{{item.id}}</view>
</view>

js:

Page({
  data: {
    list: []
  },
  onLoad: function(options) {
    wx.request({
      url: 'http://rap2api.taobao.org/app/mock/7058/index/hotLists',
      success: (res)=> {
        // this.list = res.data.lists    Vue写法, 页面不能响应式更新
        this.setData({
          list: res.data.lists
        })
      },
    })
  }
})

事件监听

页面常用函数

• onPullDownRefresh 函数监听页面下拉刷新事件, 不过要同时在json文件里把下拉刷新功能打开 "enablePullDownRefresh": true
• onReachBottom 函数监听用户上拉触底事件, 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance(单位px)。
• onPageScroll 函数监听页面的滚动, 他会返回一个obj, obj里面scrollTop的值是页面在垂直方向上已滚动的距离(单位px)