加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

微信小程序 生命周期和页面的生命周期详细介绍

发布时间:2020-12-14 20:21:22 所属栏目:资源 来源:网络整理
导读:微信小程序 生命周期和页面的生命周期详解: 1.小程序的生命周期——App.js App() 必须在 app.js 中注册,且不能注册多个。所以App()方法在一个小程序中有且仅有一个。 App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等

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

  • App onLaunch
  • App onShow()
  • App onShow()

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

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

注意:

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

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

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

2.页面的生命周期

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

生命周期函数

中的 query。

onShow: 页面显示
每次打开页面都会调用一次。

onReady: 页面初次渲染完成
一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

onHide: 页面隐藏
当navigateTo或底部tab切换时调用。

onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。

其中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之间的信息交流。大家可以简略的看一下就好。

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(编辑:李大同)

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

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

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

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

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

},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参数说明:

属性

类型 描述 触发时机
    推荐文章
      热点阅读