微信小程序开发生命周期讲解

发布时间：2020-12-14 19:57:24 所属栏目：资源来源：网络整理

导读：微信小程序整体的技术架构。尽量做到用最短的篇幅说明问题，帮助大家快速了解这个平台。这次就先说说小程序的生命周期。关于生命周期，这在很多开发生态周都会有，比如原生的 iOS 和 Android 开发中都有类似的概念。这次咱们就详细了解一下小程序的生命

微信小程序整体的技术架构。尽量做到用最短的篇幅说明问题，帮助大家快速了解这个平台。这次就先说说小程序的生命周期。

关于生命周期，这在很多开发生态周都会有，比如原生的 iOS 和 Android 开发中都有类似的概念。

这次咱们就详细了解一下小程序的生命周期。以及两个核心概念 —— App 和 Page。

小程序的生命周期借鉴了Android的生命周期，小程序由两大线程组成：负责界面的线程（view thread）和服务线程（appservice thread），各司其职由互相配合。

界面线程有四大状态： 1. 初始化状态：初始化界面线程所需要的工作，包括工作机制，基本和我们开发者没有关系，等初始化完毕就向 “服务线程”发送初始化完毕信号，然后进入等待传回初始化数据状态。

2.首次渲染状态：收到“服务线程”发来的初始化数据后（就是 json和js中的data数据），就开始渲染小程序界面，渲染完毕后，发送“首次渲染完毕信号”给服务线程，并将页面展示给用户。

3.持续渲染状态：此时界面线程继续一直等待“服务线程”通过this.setdata（）函数发送来的界面数据，只要收到就重新局部渲染，也因此只要更新数据并发送信号，界面就自动更新。

4.结束状态

服务线程五大状态： 1 初始化状态：无需和其他模块交流，跟小程序开发也没多大关联，此阶段就是启动服务线程所需的基本功能，比如信号发送模块。系统的初始化工作完毕，就调用自定义的onload和onshow，然后等待界面线程的“界面线程初始化完成”信号。 onload是只会首次渲染的时候执行一次，onshow是每次界面切换都会执行，简单理解，这就是唯一差别。

2 等待激活状态：接收到“界面线程初始化完成”信号后，将初始化数据发送给“界面线程”，等待界面线程完成初次渲染。

3.激活状态：收到界面线程发送来的“首次渲染完成”信号后，就进入激活状态既程序的正常运行状态，并调用自定义的onReady()函数。此状态下就可以通过 this.setData 函数发送界面数据给界面线程进行局部渲染，更新页面。

4.后台运行状态：如果界面进入后台，服务线程就进入后台运行状态，从目前的官方解读来说，这个状态挺奇怪的，和激活状态是相同的，也可以通过setdata函数更新界面的。毕竟小程序的框架刚推出，应该后续会有很大不同吧。

App()

App 函数是整个小程序的入口，这在我们上篇文章中已经介绍了，咱们再把代码贴出来回顾一遍：

App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs',logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == function && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == function && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})

大体上就是这样了，微信开发工具的默认项目中定义了 onLaunch 方法，它就是一个生命周期方法。除了这个方法之外，还有另外两个生命周期方法，这里给大家列出：

onLaunch: 小程序初始化完成。

onShow: 小程序显示，初始化完成后会调用，从后台切换进来也会调用。

onHide: 小程序隐藏，用户在微信中点后退按钮算隐藏，用户按 Home 键切回桌面也算隐藏，这时

onHide 方法都会被调用。

这就是 App 目前开放的所有的生命周期方法了。根据你的小程序业务逻辑，使用这些生命周期方法即可。

getApp()

微信还给我们提供了 getApp 函数，这是一个全局函数，在任何地方调用这个函数都可以得到 App 的实例，供我们使用。这样我们在需要使用 App 对象相关属性的时候，就可以引用到它了。

Page

Page 是小程序中另外一个重要的对象，它表示小程序的每一个单独的页面。它也包含生命周期。它的方法如下：

data: 表示页面的数据，用于前端 UI 显示数据。 onLoad: 页面加载完成。 onReady: 页面渲染完成。 onShow: 页面显示。 onHide: 页面隐藏。 onUnload: 页面卸载。

Page 的基本结构如下：

Page({
data: {
message: Hello world.
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
}
})

当前端页面需要显示数据的时候，可以这样：

这里面的 message 就是引用的 Page 对象中，我们定义在 data 属性中的 key 所对应的内容了。这样 Page 以及它的数据如何与前端显示绑定起来的流程咱们就明白了。

接下来，我们怎么处理前端 UI 上面的用户操作事件呢? 比如用户点击，我们可以使用 bindtap 属性：

bindtap 属性指定了一个方法名，我们只需要在 Page 对象里面实现这个方法就可以处理用户的点击操作了：

Page({
viewTapped: function() {
console.log('hello world.')
}
})

当然， Page 还提供了修改它内部数据的方法 —— setData，我们可以在刚才这个点击事件中使用 setData 修改显示在前端中的文字：

Page({
viewTapped: function() {
this.setData({
message: '你好，世界'
});
}
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!