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

2022-11-22
福建
本文字数：3177 字
阅读完需：约 10 分钟

一、页面生命周期

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.jsPage({  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    })  },})

复制代码

发布于: 刚刚阅读数: 5

原文链接:【http://xie.infoq.cn/article/133cfce7cf73264f6e450a03a】。文章转载请联系作者。

愚公搬代码

关注

还未添加个人签名 2022-03-01 加入

该博客包括：.NET、Java、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、python、大数据等相关使用及进阶知识。查看博客过程中，如有任何问题，皆可随时沟通。

发布

暂无评论

创作场景

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

一、页面生命周期

1.JS 使用

2.页面特殊事件处理

2.1 onPullDownRefresh()

2.2 onReachBottom()

2.3 onPageScroll(Object object)

2.4 onAddToFavorites(Object object)

2.5 onShareAppMessage(Object object)

2.6 onShareTimeline()

2.7 onResize(Object object)

2.8 onTabItemTap(Object object)

2.9 onSaveExitState()

3.组件特殊事件处理

3.1 页面点击事件

3.2 页面路由

3.3 数据改变

二、具体使用

愚公搬代码

评论

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