微信小程序 生命周期

小程序的生命周期分为 app.js 管理的生命周期、每个page的生命周期。

app.js 管理的生命周期

App() 函数用来注册一个小程序。接收一个object参数，指定生命周期函数。App() 只能在app.js里面注册且只能注册一个。

object 参数说明：

属性	描述	触发机制
onLaunch	监听小程序初始化	当小程序初始化完成时，触发一次。（全局只触发一次）
onShow	监听小程序显示	初始化完成 或 后台进入前台显示，触发onShow
onHide	监听小程序隐藏	前台进入后台会触发onHide（点击后退按钮 或 Home键返回桌面）
其他	可以添加任意的函数或者数据到object中	用 this 可以访问

小程序quickStart，在app.js自动生成的App函数:

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

注意事项：

• 必须在app.js中注册，只能注册一个
• 不要在定义于app()内函数中调用 getApp()，使用 this 就可以拿到app实例
• 不要在onLaunch的时候调用 getCurrentPage，此时page还没生效
• 通过 getApp() 获取实例后，不要自己调用生命周期函数

页面的生命周期

Page() 函数用来注册一个页面。接受一个 object 参数，实现页面的初始数据、生命周期函数、事件处理函数等。

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

生命周期函数：

• 对页面的设置（如wx.setNavigationBarTitle）在 onReady 之后设置。
• onLoad函数中，参数可以获取 wx.navigationTo 和 wx.redirectTo 及 <navigator/> 中的 query 。

函数	说明
onLoad	页面加载，一个页面加载一次
onShow	页面显示，每次打开页面时调用
onReady	页面初次渲染完成，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onHide	页面隐藏，当navigationTo或底部tab切换时调用。
onUnload	页面卸载，当redirectTo和navigateBack时调用。

页面相关事件处理函数

• onPullDownRefresh： 需要在window选项中添加 enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh 可以停止当前页面的下拉刷新。

• onReachBottom： 上拉刷新事件。页面上拉触及底部的事件处理。

• onShareAppMessage： 用户点击右上角转发事件。只有定义了这个事件左上角才会有转发Button，事件需要return一个 object ，用于自定义转发内容。自定义转发 title 和 path ，path 必须是以 / 开头的完整路径。

• onPageScroll： 页面滚动触发事件的处理函数，参数是scrollTo(Number类型)，表示页面在垂直方向已滚动距离（单位：px）。

使用代码如下：

Page(
  {
    onPullDownRefresh: function () {
      console.log("onPullDownRefresh" + new Date())
    },
    stopPullDownRefresh: function () {
      wx.stopPullDownReferesh({
        complete: function (res) {
          console.log(res + new Date() )
        }
      })
    },
    onShareAppMessage: function () {
      return
        {
          title: '自定义转发标题',
          path: '/page/user?id=123'
        }
    },
  }
)

事件处理函数

在渲染层可以在组件中加入事件绑定，当达到触发事件时，就会执行 Page 中定义的事件处理函数。

• Page.prototype.route： 获取当前页面路径。
• Page.prototype.setData： 改变 this.data 的值，单次设置的数据不超过1024k，尽量避免一次设置过多的数据。
• 文件作用域和模块化：
  • js页面文件中声明的变量和函数值在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会相互影响。
  • 全局数据可以在App()中设置。
  • 提供函数给其他页面使用，小程序 js 模块只有通过 moudle.exports 暴露接口，其他 js 页面才可以引入引用。
    在 util.js 里面有exports的应用