首页 > 学院 > 开发设计 > 正文

页面的生命周期

2019-11-09 18:39:10
字体:
来源:转载
供稿:网友

前言

新闻列表基本完成,但是实际开发中,页面上的数据通常不是直接写到wxml文件中,而是通过网络请求获取服务器中的数据,再将要显示的数据绑定到wxml文件中,最后进行渲染。实现这一过程需要学习页面的生命周期、数据是如何绑定以及数据是如何进行传递到wxml文件中。

Page页面的生命周期

微信小程序的文档中对page的定义如下:

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

从定义中可以知道,Page()函数相当于小程序的逻辑层的功能。获取服务器中数据以及对数据进行处理和显示都是写在Page()函数中。在ide中默认的page生成的格式如下:

Page({ data:{ String1 }, onLoad:function(options){ // 生命周期函数--监听页面加载 String2 }, onReady:function(){ // 生命周期函数--监听页面初次渲染完成 String3 }, onShow:function(){ // 生命周期函数--监听页面显示 String4 }, onHide:function(){ // 生命周期函数--监听页面隐藏 String5 }, onUnload:function(){ // 生命周期函数--监听页面卸载 String6 }, onPullDownRefresh: function() { // 页面相关事件处理函数--监听用户下拉动作 String7 }, onReachBottom: function() { // 页面上拉触底事件的处理函数 String8 }, onShareAppMessage: function() { // 用户点击右上角分享 return { title: 'title', // 分享标题 desc: 'desc', // 分享描述 path: 'path' // 分享路径 } }})

为了测试显示一个新闻页面的生命周期,修改每个函数里面的内容并打断点,进行调试,修改函数的内容如下:

Page({ data:{ }, onLoad:function(options){ // 生命周期函数--监听页面加载 console.log("onLoad"); }, onReady:function(){ // 生命周期函数--监听页面初次渲染完成 console.log("onReady"); }, onShow:function(){ // 生命周期函数--监听页面显示 console.log("onShow"); }, onHide:function(){ // 生命周期函数--监听页面隐藏 console.log("onHide"); }, onUnload:function(){ // 生命周期函数--监听页面卸载 console.log("onUnload"); }, onPullDownRefresh: function() { // 页面相关事件处理函数--监听用户下拉动作 console.log("nPullDownRefresh"); }, onReachBottom: function() { // 页面上拉触底事件的处理函数 console.log("onReachBottom"); }, onShareAppMessage: function() { // 用户点击右上角分享 return { title: 'title', // 分享标题 desc: 'desc', // 分享描述 path: 'path' // 分享路径 } }})

调试页面的生命周期分为6个步骤:

打开小程序集成开发环境的调试功能;选择Sources选项;选择pages下面的post.js[sm]文件;对需要调试的地方设置断点;进行断点调试;对断点分步调试。
这里写图片描述
调试的结果如下:
这里写图片描述
从结果中可以看到,显示一个wxml文件,Page()函数的执行顺序是:onLoad、onShow 、onReady。 下面是官方给的Page整个生命周期:
这里写图片描述
通过上图可以看到一个页面的生命周期整个过程,这个图很复杂,所以帮助文档注明:

你不需要立马完全弄明白,不过以后它会有帮助。

意思是用的时候有疑惑可以回过头看看参考。平时经常用到的其实并不是上面的全部。

总结

Page()很好的囊括了一个页面的生命周期,类似与Android中Activity的生命周期,学过Android四大组件之一Activity的生命周期就很容易理解,生命周期不同阶段其实就是对应的一个监听函数,当满足这个监听函数触发条件时候就会执行监听函数的函数体,学习Page的生命周期为后面数据的绑定打好基础。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表