1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序详解——小程序的生命周期和页面的生命周期

微信小程序详解——小程序的生命周期和页面的生命周期

时间:2020-10-04 21:48:02

相关推荐

微信小程序详解——小程序的生命周期和页面的生命周期

我是一名安卓程序员,我们安卓中最明显的特征就是类具有生命周期。所以当开发小程序的时候,我自然而然的会先研究小程序的生命周期。在Android中是通过Application来管理安卓程序的生命周期,小程序中是通过App.js来管理小程序的生命周期。在Android页面Activity和Fragment都是拥有生命周期的,同样小程序的页面Pager也拥有自己的生命周期。

1.小程序的生命周期——App.js

App() 必须在 app.js 中注册,且不能注册多个。所以App()方法在一个小程序中有且仅有一个。

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。先上代码:

App({onLaunch: function () {console.log('App onLaunch');},onShow:function (){console.log('App onShow');},onHide:function(){console.log('App onHide');},onError:function(){console.log('App onError');},getPics: function() {return this.globalData.picList;},globalData:{picList: [] // 图片列表},globalName: 'tangdekun'});

最外层的整个{ }就是一个object 参数。

通过表格的形式看App()中的object参数说明:

将原有的app.js中替换为上面的代码,首次打开小程序,可以在Log信息中看到以下Log信息,会看到onShow()方法会执行两次

App onLaunchApp onShow()App onShow()

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。

只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

注意:

1.不要在定义于App()内的函数中调用getApp(),使用this就可以拿到app实例。

2.不要在onLaunch的时候调用getCurrentPage(),此时 page 还没有生成。

3.通过getApp()获取实例之后,不要私自调用生命周期函数

2.页面的生命周期

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

生命周期函数

onLoad: 页面加载一个页面只会调用一次。接收页面参数 可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。onHide: 页面隐藏当navigateTo或底部tab切换时调用。onUnload: 页面卸载当redirectTo或navigateBack的时候调用。

其中APP的生命周期和页面的生命周期是相互交叉的:举例:

我们有页面Test和Test1,我们在test.js,test1.js和App.js的生命周期方法中都打印log,代码如下:

test1.js

Page({data:{names:"tangdekun test1"},onLoad:function(options){// 生命周期函数--监听页面加载console.log("test1 onLoad");},onReady:function(){// 生命周期函数--监听页面初次渲染完成console.log("test1 onReady");},onShow:function(){// 生命周期函数--监听页面显示console.log("test1 onShow");},onHide:function(){// 生命周期函数--监听页面隐藏console.log("test1 onHide");},onUnload:function(){// 生命周期函数--监听页面卸载console.log("test1 onUnload");},onPullDownRefresh: function() {// 页面相关事件处理函数--监听用户下拉动作console.log("test1 onPullDownRefresh");},onReachBottom: function() {// 页面上拉触底事件的处理函数console.log("test1 onReachBottom");}})

test.js

Page({data:{name:"test"},onLoad:function(options){// 生命周期函数--监听页面加载console.log("test onLoad");},onReady:function(){// 生命周期函数--监听页面初次渲染完成console.log("test onReady");},onShow:function(){// 生命周期函数--监听页面显示console.log("test onShow");},onHide:function(){// 生命周期函数--监听页面隐藏console.log("test onHide");},onUnload:function(){// 生命周期函数--监听页面卸载console.log("test onUnload");},onPullDownRefresh: function() {// 页面相关事件处理函数--监听用户下拉动作console.log("test onPullDownRefresh");},onReachBottom: function() {// 页面上拉触底事件的处理函数console.log("test onReachBottom");},onShareAppMessage: function() {// 用户点击右上角分享return {title: '分享页面', // 分享标题desc: '这是一个分享的测试', // 分享描述path: 'pages/waimai/waimai' // 分享路径}},navigateToPageB: function() {wx.navigateTo({url: '../../pages/pageB/pageB?id=3',success: function(res){},fail: function() {// fail},complete: function() {// complete}})},redirectToPageA : function(){wx.redirectTo({url: '../../pages/pageA/pageA?id=4',success: function(res){// success},fail: function() {// fail},complete: function() {// complete}})},switchTabToTest1:function(){wx.switchTab({url: '../../pages/test1/test1',success: function(res){// success},fail: function() {// fail},complete: function() {// complete}})} })

app.js

//app.jsApp({onLaunch: function () {console.log('App onLaunch');},onShow:function (){console.log('App onShow1'+this.globalName);},onHide:function(){console.log('App onHide');},onError:function(){console.log('App onError');},getPics: function() {return this.globalData.picList;},globalData:{picList: [] // 图片列表},globalName: 'tangdekun'});

我们将test页面设置为首页【在app.json中设置】,程序会自动加载test页面,调用test.js中的生命周期方法,打印Log信息如下:

然后点击菜单栏【作业中心】test1,会调用test 的onHide,test1的onLoad,onShow,onReady,打印Log信息如下:

在点击【朋友圈】test,会调用test1的onHide方法,test的onshow方法,而不会调用test的onLoad,onReady方法,log信息如下:

通过实例我们一起理解一下官方的小程序页面的生命周期:

View thread是我们的wxml文件,AppServiceThread就是我们js文件中研究的页面的生命周期。这里我们可以看到每个生命周期方法的调用顺序以及和Wxml之间的信息交流。大家可以简略的看一下就好。

因为页面的生命周期和页面的路由【即页面之间的跳转方式】有关,所以接下来我会向大家展示页面跳转的三种方式和各种跳转方式之下的生命周期方法的调度。

为了方便大家一起交流学习,我和几位资深小程序开发爱好者一起建了一个QQ交流群:481428150

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。