微信小程序-APP生命周期与运行机制总结
自从接触微信小程序到现在也有一段时间了,在学校的时候本来想着将之前做的一个关于小程序的项目写一个文档出来做下总结,可是事愿人为,无奈,现在终于有时间来整理温故一下了。之前,自己在查阅资料的时候,无意间看到了“微信小程序-代码构成”这篇博文,讲的很好,主要讲的是微信小程序代码的结构构成,有兴趣的小伙伴可以去看一下。而本篇文章主要从自己在开发小程序时遇到的一些问题,以及小程序的生命周期和运行机制来做下总结。
# 微信小程序运行机制
根据官网描述:小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。 假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。
小程序没有重启的概念,当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁
在 iOS 上,当微信客户端在一定时间间隔内(目前是 5 秒)连续收到两次及以上系统内存告警时,会主动进行小程序的销毁,并提示用户 「该小程序可能导致微信响应变慢被终止」。
建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件,进行必要的内存清理。
# 关于小程序 App() 函数注册
我们在使用 App( )函数进行小程序的注册时必须在 app.js 中进行注册,但值得注意的是不能注册多个,当小程序首次打开时会通过 app.json 配置初始化 App,初始化完成后应用线程开始执行 app.js 中 onLauch() 函数和 onShow() 函数,然后才会执行页面中的 onLoad() 函数和 onShow() 函数,每次进入后台(当用户点击左上角关闭,或者按了设备 Home 键离开微信)都会先执行页面中的 onHide() 函数再执行 app.js 中的 onHide() 函数,每次进入前台都会先执行 app.js 中 onShow() 函数再执行页面中的 onShow() 函数。
# App()函数与参数说明
App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。
App({
//onLaunch 函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
onLaunch: function (options) {
console.log("--------------------------------");
console.log(options.path); //打开小程序的路径
console.log(options.query); //打开小程序的query
console.log(options.scene); //打开小程序的场景值
console.log(options.shareTicket); //shareTicket,详见 获取更多转发信息
console.log(options.referrerInfo); //当场景为由从另一个小程序或公众号或App打开时,返回此字段
console.log(options.referrerInfo.appId); //来源小程序或公众号或App的 appId,详见下方说明
console.log(options.referrerInfo.extraData); //来源小程序传过来的数据,scene=1037或1038时支持
console.log("--------------------------------");
console.log("app onLaunch");
},
//onShow 函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onShow: function (options) {
console.log("--------------------------------");
console.log(options.path); //打开小程序的路径
console.log(options.query); //打开小程序的query
console.log(options.scene); //打开小程序的场景值
console.log(options.shareTicket); //shareTicket,详见 获取更多转发信息
console.log(options.referrerInfo); //当场景为由从另一个小程序或公众号或App打开时,返回此字段
console.log(options.referrerInfo.appId); //来源小程序或公众号或App的 appId,详见下方说明
console.log(options.referrerInfo.extraData); //来源小程序传过来的数据,scene=1037或1038时支持
console.log("--------------------------------");
console.log("app onShow");
},
//onHide 函数--监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
onHide: function () {
console.log("app onHide");
},
//onError 函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
onError: function (msg) {
console.log(msg);
},
//onPageNotFound 页面不存在监听函数 当小程序出现要打开的页面不存在的情况,会带上页面信息回调该函数
onPageNotFound: function (msg) {
console.log("app onPageNotFound");
},
//全局变量
globalData: 'I am global data'
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# page 页生命周期函数
page 页生命周期函数主要有 onLoad()、onReady()、onShow()、onHide()、onUnload() 五个页面生命周期函数,其分别是页面加载、就绪、渲染、隐藏、卸载时被调用。 注意 app 中的生命周期和页面的生命周期是相互交叉执行的,后面我会详细介绍。
Page({
data: {
names: "name1"
},
onLoad: function (options) {
// 生命周期函数--监听页面加载 一个页面只会调用一次。
// 接收页面参数 可以获取 wx.navigateTo 和 wx.redirectTo 及 <navigator/> 中的 query。
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("onPullDownRefresh");
},
onReachBottom: function () {
// 页面上拉触底事件的处理函数
console.log("onReachBottom");
}
})
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
注意
不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。
不要在 onLaunch 的时候调用 getCurrentPage(),因为此时 page 还没有生成。
通过 getApp() 获取实例之后,不要私自调用生命周期函数。
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13