小程序页面的生命周期函数

先看下页面都有哪些生命周期函数

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

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

• onLoad() 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

• onShow() 页面显示/切入前台时触发。

• onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。注意：对界面内容进行设置的 API 如wx.setNavigationBarTitle，请在onReady之后进行

• onHide() 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

• onUnload()页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时

• onPullDownRefresh() 这个生命周期函数，是下拉刷新时触发，要开启下拉刷新还需要我们在页面的json文件中配置一下

• 页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

{
  "usingComponents": {},
  "enablePullDownRefresh": true  // 当值为false时，不会触发
}

• onReachBottom() 监听用户上拉触底事件.* 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。
• onPageScroll() 监听用户滑动页面事件。
• onAddToFavorites() 监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。

Page({
  onAddToFavorites(res) {
    // webview 页面返回 webviewUrl
    console.log('WebviewUrl: ', res.webviewUrl)
    return {
      title: '自定义标题',
      imageUrl: 'http://demo.png',
      query: 'name=xxx&age=xxx',
    }
  }
})

• onShareAppMessage()监听用户点击页面内转发按钮（button组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  }
})

• onShareTimeline()监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。注意：只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮。自定义转发内容
• onResize()小程序屏幕旋转时触发
• onTabItemTap()点击 tab 时触发

Page({
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }
})