微信小程序（页面生命周期）

左手的ㄟ右手 2023-06-17 05:57 234阅读 0赞

## 课程大纲 ##

*  （1）页面构造/注册器Page()
 *  （2）页面注册器参数  
    data初始化数据  
    页面生命周期  
    页面用户行为
 *  （3）页面生命周期及顺序
 *  **小结：**  
    ①小程序注册App()  
    ②页面注册Page()

## 前言 ##

*  **注册页面：**
    
     *  对于小程序中的每个页面，在页面对应的 page.js 文件中调用 Page 方法注册页面示例
     *  作用：指定页面的初始数据、生命周期回调、事件处理函数等。
 *  **页面的生命周期：**
    
     *  页面生命周期函数就是每进入/切换到一个新的页面的时候，就会调用的生命周期函数。

## 页面构造/注册器Page() ##

*  宿主环境提供了 Page() 构造器用来注册小程序页面
 *  Page()在页面脚本page.js中调用，Page() 的调用方式如下所示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  **Page构造器接受一个Object参数**
    
     *  data属性是当前页面的初始数据
     *  onLoad、onReady、onShow、onHide、onUnload ，这5个回调是Page页面实例的生命周期函数，即页面生命周期
     *  onPullDownRefresh、onReachBottom、onShareAppMessage、onPageScroll，这4个回调是页面的用户行为，即页面用户行为
 *  **Page构造器参数**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  关于页面用户行为，后期会结合API进行讲解

## 页面生命周期 ##

*  接下来依次验证下页面各个生命周期函数  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  （1）监听页面“加载→显示→渲染”  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]
 *  （2）监听页面切换隐藏  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]
 *  （3）重新显示该页面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]
 *  （4）小程序切换后台（关闭按钮或者home键切换至后台）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]
 *  （5）小程序后台→前台  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]
 *  **（1）onLoad**
 *  **触发时机**：页面加载时触发
 *  页面初次加载的时候，微信客户端就会给Page实例派发onLoad事件，Page构造器参数所定义的onLoad方法会被调用
 *  触发次数：onLoad在页面没被销毁之前只会触发1次
 *  参数：在onLoad的回调中，可以获取当前页面所调用的打开参数query，关于打开当前页面路径中的参数后续介绍
 *  **（2）onShow**
 *  **触发时机**：页面显示/切入前台时触发
 *  页面显示之后，**Page**构造器参数所定义的**onShow**方法会被调用，一般从别的页面返回到当前页面时，当前页的**onShow**方法都会被调用。
 *  页面载入后触发**onShow**方法，显示页面。每次打开页面都会调用一次（比如当小程序有后台进入到前台运行或换页重新进入页面时）
 *  通俗理解：就是这个页面出现一次，他就被调用一次。包括你前进后退到这个页面。
 *  **（3）onReady**
 *  **触发时机**：页面初次渲染完成时触发
 *  首次显示页面，页面初次渲染完成，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
 *  对界面的动态设置一般在onReady之后设置。
 *  **（4）onHide**
 *  **触发时机**：页面隐藏/切入后台时触发
    
     *  如 **wx.navigateTo** 跳转或底部 **tab** 切换到其他页面，小程序切入后台等。
     *  即页面不可见时，**Page**构造器参数所定义的**onHide**方法会被调用，这种情况会在使用**wx.navigateTo**切换到其他页面、底部tab切换时触发。

**（5）onUnload**

*  **触发时机**：页面卸载时触发
 *  如使用重定向方法**wx.redirectTo**或**wx.navigateBack**关闭当前页返回上一页时调用。
 *  即当前页面使用**wx.redirectTo**或**wx.navigateBack**返回到其他页时，当前页面会被微信客户端销毁回收，此时**Page**构造器参数所定义的**onUnload**方法会被调用。
 *  **页面生命周期小结：**  
    页面生命周期函数的调用顺序为：**onLoad>onShow>onReady**  
    **onHide**函数为隐藏页面时触发，**onUnload**为卸载当前页面时触发。
 *  **基本上加载一个小程序进来之后的执行顺序为**  
    小程序onLaunch–小程序onShow-页面onLoad–页面onShow–页面onReady

## 完毕，有问题留言小编… ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127191733127.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191127191849907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2019112719191089.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191127192022157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191127192041590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191127192102219.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191127192117761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/2019112719213740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191127192148729.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc=,size_16,color_FFFFFF,t_70