【愚公系列】2023年02月 微信小程序-页面生命周期

---

一、页面生命周期

1.JS使用

注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

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

属性	类型	说明
data	Object	页面的初始数据
options	Object	页面的组件选项，同 Component 构造器 中的 options ，需要基础库版本 2.10.1
behaviors	String Array	类似于mixins和traits的组件间代码复用机制，参见 behaviors，需要基础库版本 2.9.2
onLoad	function	生命周期回调—监听页面加载
onShow	function	生命周期回调—监听页面显示
onReady	function	生命周期回调—监听页面初次渲染完成
onHide	function	生命周期回调—监听页面隐藏
onUnload	function	生命周期回调—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角转发
onShareTimeline	function	用户点击右上角转发到朋友圈
onAddToFavorites	function	用户点击右上角收藏
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见 响应显示区域变化
onTabItemTap	function	当前是 tab 页时，点击 tab 时触发
onSaveExitState	function	页面销毁前保留状态回调
其他	any	开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问。这部分属性会在页面实例创建时进行一次深拷贝。

2.页面特殊事件处理

2.1 onPullDownRefresh()

监听用户下拉刷新事件。

• 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
• 可以通过wx.startPullDownRefresh触发下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
• 当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

2.2 onReachBottom()

监听用户上拉触底事件。

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次。

2.3 onPageScroll(Object object)

监听用户滑动页面事件。

2.4 onAddToFavorites(Object object)

监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。

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

2.5 onShareAppMessage(Object object)

监听用户点击页面内转发按钮（button 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。

Page({
  onShareAppMessage() {
    const promise = new Promise(resolve => {
      setTimeout(() => {
        resolve({
          title: '自定义转发标题'
        })
      }, 2000)
    })
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      promise 
    }
  }
})

2.6 onShareTimeline()

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

2.7 onResize(Object object)

小程序屏幕旋转时触发。

2.8 onTabItemTap(Object object)

点击 tab 时触发

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

2.9 onSaveExitState()

每当小程序可能被销毁之前，页面回调函数 onSaveExitState 会被调用，可以进行退出状态的保存。

3.组件特殊事件处理

3.1 页面点击事件

<view bindtap="viewTap"> click me </view>

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

3.2 页面路由

Page({
  onShow: function() {
    console.log(this.route)
  }
})

3.3 数据改变

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

// index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data' // 不要直接修改 this.data
    // 应该使用 setData
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function() {
    // 或者，可以修改 this.data 之后马上用 setData 设置一下修改了的字段
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function() {
    // 对于对象或数组字段，可以直接修改一个其下的子字段，这样做通常比修改整个对象或数组更好
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

二、具体使用

Page({
  // 页面第一次渲染使用的初始数据
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // 生命周期回调—监听页面加载
  },
  onShow: function() {
    // 生命周期回调—监听页面显示
    console.log(this.route)//页面路由
  },
  onReady: function() {
    // 生命周期回调—监听页面初次渲染完成
  },
  onHide: function() {
    // 生命周期回调—监听页面隐藏
  },
  onUnload: function() {
    // 生命周期回调—监听页面卸载
  },
  onPullDownRefresh: function() {
    // 监听用户下拉动作
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function (options) {
    // 用户点击右上角转发
    if (options.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123'
    }
  },
  onShareTimeline: function () {
    // 用户点击右上角转发到朋友圈
  },
  onAddToFavorites: function (options) {
    // 用户点击右上角收藏
    // webview 页面返回 webviewUrl
    console.log('WebviewUrl: ', options.webviewUrl)
    return {
      title: '自定义标题',
      imageUrl: 'http://demo.png',
      query: 'name=xxx&age=xxx',
    }
  },
  onPageScroll: function(options) {
    // 页面滚动触发事件的处理函数
  },
  onResize: function() {
    // 页面尺寸改变时触发
  },
  onTabItemTap(item) {
  	// 当前是 tab 页时，点击 tab 时触发
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  //开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问
  //页面<view bindtap="viewTap"> click me </view>处理函数
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
})