当前位置: 首页 > 微信相关

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

发布日期:2020-08-12 09:09:08 分类:微信相关 阅读()来源:网络收集

好东西要多分享:

做网站就上魔艺客
摘要:小程序的生命周期借鉴了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.

}

})

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

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

Page({

viewTapped: function() {

console.log('hello world.')

}

})

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

Page({

viewTapped: function() {

this.setData({

message: '你好, 世界'

});

}


})



			

推荐阅读:微信小程序计算器实战开发教程 微信小程序开发教程



声明: 文章内容及图片部分全部摘自网络,在此分享供读者参考和借鉴,不代表酷雷的观点。文章、图片等内容如涉嫌侵权,请联系我们删除,谢谢!带有原创标签的属于酷雷原创文章,未经允许不得转载!

标签:

我要说一说

加载中~

相关推荐

您好,很高兴为您服务!
广告合作
投诉建议
联系站长

客服热线:15821432298

扫码加好友,优惠等你来!