微信小程序生命周期（onLoad，onHide，onShow，onReady，onUnload）

Posted 2023-03-24

参考技术A

周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信 小程序 的生命周期：

应用生命周期

页面生命周期

应用生命周期影响页面生命周期

应用生命周期

1、用户首次打开小程序，触发 onLaunch（全局只触发一次）。

2、小程序初始化完成后，触发onShow方法，监听小程序显示。

3、小程序从前台进入后台，触发 onHide方法。

4、小程序从后台进入前台显示，触发 onShow方法。

5、小程序后台运行一定时间，或系统资源占用过高，会被销毁。

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

页面生命周期

1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。

2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。

3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

4、当小程序后台运行或跳转到其他页面时，触发onHide方法。

5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

1、进入A页面：A执行onLoad()-->onShow()-->onReady()；

2、A页面navigateTo B页面：A执行onHide()，B执行onLoad()-->onShow()-->onReady()；

3、B页面返回A页面：B执行onUnload()，A执行onShow()；

4、退出A页面：A执行onUnload()。

应用生命周期影响页面生命周期

1、小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。

2、当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

3、当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

微信小程序的生命周期和路由

小程序的生命周期

1.整体小程序的生命周期：

1 App({
2 
3   onLaunch() {},   监听小程序初始化，只触发一次
4   onShow(){},小程序启动或切换到前台运行
5   onHide(),小程序切换到后台运行
6   
7 })

2.小程序页面中的生命周期

 1 Page({
 2   //页面创建完，只触发一次，通常获取后台数据或接收另一个页面的传参时使用
 3     onLoad() {
 4         //一般获取数据是在这个生命周期中进行的
 5         },
 6     //进入页面就会触发
 7     onShow() {},
 8     //页面离开时触发
 9     onHide() {},
10     //监听页面初次渲染完成
11     onReady() {}，
12     //监听页面卸载,类似于vue中destroyed
13     onUnload() {}
14     onReachBottom() {
15     console.log(‘到底页面底部‘)
16   },
17   //下拉触发
18   onPullDownRefresh() {
19     console.log(‘onPullDownRefresh‘)
20   },
21   //点击右上角分享时触发
22   onShareAppMessage() {
23     
24   }
25 })    

3.微信小程序的路由

 1 两种路由触发模式：
 2 
 3 1.标签方式触发
 4    
 5   小程序：<navigator url="要中转的路径?key=value">
 6   
 7   接收：通过另一个页面在onload生命周期中接收 
 8    
 9 2.编程式触发
10   小程序跳转：
11   wx.navigateTo()  //带历史回退
12   wx.redirectTo() //不保留历史，跳转到另一个页面，不能返回到上一页面          
13   wx.switchTab() //只跳转到tabBar页面，不带回退
14   wx.reLaunch() //即能跳转到tabBar页面，也能跳转到非tabBar页面，不带历史回退    

4.小程序的数据请求

 1 wx.request({
 2   url:‘‘, //请求的接口地址
 3   method:‘get|post|put|delete‘,//请求方式 
 4   header:{},//设置请求头
 5   data:{}, //传参
 6   success() {}, //成功返回
 7   fail() {},// 失败返回
 8 
 9 })
10 
11 //注意：
12 //1.小程序请求的接口必须是https协议，不能请求本地的数据
13 //2. 请求接口之前要提前配置接口请求：
14   //第一种方法：在微信小程序后台配置request合法域名
15   //第二种方法：在开发者工具--详情--本地配置--勾选‘不校验合法域名’
16 //3.请求成功和失败的回调最好写成箭头函数的形式  
17     //普通函数的话  this指向的是钩子函数  请求回来的数据用this.setData时会出错
18     //加一个let _this=this  就可以了   
19     //箭头函数的形式可以完全避免这种麻烦