微信小程序 生命周期和页面的生命周期详细介绍
微信小程序 生命周期和页面的生命周期详解:1.小程序的生命周期——App.jsApp() 必须在 app.js 中注册,且不能注册多个。所以App()方法在一个小程序中有且仅有一个。 App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。先上代码: },onShow:function (){
console.log('App onShow'); },onHide:function(){ },onError:function(){ },getPics: function() { }); 最外层的整个{ }就是一个object 参数。 通过表格的形式看App()中的object参数说明:
将原有的app.js中替换为上面的代码,首次打开小程序,可以在Log信息中看到以下Log信息,会看到onShow()方法会执行两次
注意:1.不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。 2.不要在 onLaunch 的时候调用 getCurrentPage(),此时 page 还没有生成。 3.通过 getApp() 获取实例之后,不要私自调用生命周期函数。 2.页面的生命周期
生命周期函数 中的 query。onShow: 页面显示 onReady: 页面初次渲染完成 onHide: 页面隐藏 onUnload: 页面卸载 其中APP的生命周期和页面的生命周期是相互交叉的:举例: 我们有页面Test和Test1,我们在test.js,test1.js和App.js的生命周期方法中都打印log,代码如下: test1.js })
test.js },fail: function() {
// fail },complete: function() { // complete } }) },redirectToPageA : function(){ wx.redirectTo({ url: '../../pages/pageA/pageA?id=4',success: function(res){ // success },switchTabToTest1:function(){ wx.switchTab({ url: '../../pages/test1/test1',complete: function() { // complete } }) } }) app.js },onShow:function (){
console.log('App onShow1'+this.globalName); },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之间的信息交流。大家可以简略的看一下就好。 因为页面的生命周期和页面的路由【即页面之间的跳转方式】有关,所以接下来我会向大家展示页面跳转的三种方式和各种跳转方式之下的生命周期方法的调度。 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |