浅谈微信小程序生命周期之应用生命周期
参考:微信小程序官方文档
微信小程序生命周期可分为应用生命周期、页面生命周期和组件生命周期,本文结合微信官方文档浅析微信小程序的应用生命周期。从注册一个小程序生命周期开始讲起,到一些关于开发的小经验。废话少说,直接来。
1、App(Object object)
微信小程序应用生命周期从注册小程序生命周期开始说起,拿Vue.js这比喻,我们要使用Vue就得先new一个Vue对象。而微信小程序通过App(Object object)这个函数来注册小程序,接受一个 Object 参数,其指定小程序的生命周期回调等。
Tip: App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
2、App()参数
App(Object object)也可称为注册程序,这个程序里包含了些关于小程序生命周期相关的函数。或称为App()函数的参数,参数类型是Object object。如下
属性 | 类型 | 说明 | 触发时间 |
---|---|---|---|
onLaunch | function | 生命周期回调——监听小程序初始化。 | 小程序初始化完成时触发,全局只触发一次。 |
onShow | function | 生命周期回调——监听小程序启动或切前台。 | 小程序启动,或从后台进入前台显示时触发。 |
onHide | function | 生命周期回调——监听小程序切后台。 | 小程序从前台进入后台时触发。 |
onError | function | 错误监听函数。 | 小程序发生脚本错误或 API 调用报错时触发。 |
onPageNotFound | function | 页面不存在监听函数。 | 小程序要打开的页面不存在时触发。基础库 1.9.90 开始支持 |
onUnhandledRejection | function | 未处理的 Promise 拒绝事件监听函数。 | 小程序有未处理的 Promise 拒绝时触发。基础库 2.10.0 开始支持。 |
onThemeChange | function | 监听系统主题变化 | 系统切换主题时触发。基础库 2.11.0 开始支持。 |
其他 | any | 开发者可以添加任意的函数或数据变量到 Object 参数中,用 this 可以访问 |
3、示例代码
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
这里需要特别说明的是 globalData 这个函数/对象,这里可以写成函数也可以写成一个单独的变量,这个函数的作用通常是存储全局变量。例如我们在开发过程中可以将后端给的API链接前缀写在这里,这样在项目上线的时候更改API前缀我们就不用一个个去改。如下
app.js中
//当要存储多个全局变量时,应该这样写
globalData: {
userInfo: null,
urlFirst:'http://192.168.1.15:8089/AppleCampus/f'
}
再需要使用的页面js文件下,例如index.js中,这样去使用
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
//……
},
onLoad: function () {
wx.request({
//使用应用实例对象app去点访问app.js下的globalData函数下的urlFirst 变量
url: app.globalData.urlFirst + '/module/index/getScheduleData',
data: {},
success(res) {
}
});
})
这里最后描述的全局表量的使用其实就相当于一点自己的开发经验了。