微信小程序 生命周期和页面的生命周期详解:
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参数说明:
属性 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onLaunch | Function | 生命周期函数–监听小程序初始化 | 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。 |
onShow | Function | 生命周期函数–监听小程序显示 | 当小程序启动,或从后台进入前台显示,会触发 onShow |
onHide | Function | 生命周期函数–监听小程序隐藏 | 当小程序从前台进入后台,会触发 onHide |
onError | Function | 错误监听函数 | 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息 |
其他 | Any | 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,上面的getPics就是函数, globalName是数据,这里面的函数和数据都是全局的。调用方式:在Pager中通过getApp()方法得到App对象并获得全局的数据和调用全局的函数 |
将原有的app.js中替换为上面的代码,首次打开小程序,可以在Log信息中看到以下Log信息,会看到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.js App({ 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之间的信息交流。大家可以简略的看一下就好。
因为页面的生命周期和页面的路由【即页面之间的跳转方式】有关,所以接下来我会向大家展示页面跳转的三种方式和各种跳转方式之下的生命周期方法的调度。
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
本文向大家介绍微信小程序(五)页面生命周期详细介绍,包括了微信小程序(五)页面生命周期详细介绍的使用技巧和注意事项,需要的朋友参考一下 这里只要熟悉页面的基本生命周期即可,业务在指定生命周期函数内书写。 以下是官网给出的生命周期函数方法和状态图 上面的生周期函数图对于做Android 或者IOS的来书理解起来应该不是难事,具体怎么掌握只有慢慢尝试和摸索 代码处理: 这里的代码主需要对使用创建项目时
本文向大家介绍微信小程序(四)应用生命周期详解,包括了微信小程序(四)应用生命周期详解的使用技巧和注意事项,需要的朋友参考一下 App() 函数用来注册一个小程序,注意必须在 app.js 中注册,且不能注册多个。 使用方式也跟Android中的Application中初始化一些全局信息以供使用。 方法: 应用生命周期代码: 相关文章: hello WeApp
老司机一眼就可以看出,这个是在微信官方文档|页面生命周期基础上修改的。 对!我们就是在小程序框架之上执行 Vue 的 runtime,管理项目的 dom,在合适的生命周期中执行 vue 的 hooks。
WeX5页面运行时,分成两个阶段:编译阶段和运行阶段。 编译阶段 图2-19 页面编译阶段 如上图所示,WeX5页面编译时,根据页面的三个核心文件(.w文件、.js文件和.css文件),编译生成三个目标文件: ● main_{lang}_{skin}.html:完整的HTML页面,可以作用独立的HTML页面运行; ● xx.w.view_{lang}_{skin}.html:HTML页面片段,不能
1、创建 DokuWiki中,最简单的创建页面方法是,通过已存在的页面创建一个新页面。在地址栏输入新名称然后点击创建。 首先,在页面输入 图片已损坏 然后点击创建 图片已损坏 这种最简单的方法可以保证新建页面与其他页面互相关联。 如果采用其他方法,请保证新页面可以链接到其他页面。不然新建页面就会成为单独页面,在以后查询的时候非常麻烦。 2、编辑 点击编辑页面就开始编辑,可以点击预览查看目前
本文向大家介绍Spring Bean的生命周期详细介绍,包括了Spring Bean的生命周期详细介绍的使用技巧和注意事项,需要的朋友参考一下 Spring作为当前Java最流行、最强大的轻量级框架,受到了程序员的热烈欢迎。准确的了解Spring Bean的生命周期是非常必要的。我们通常使用ApplicationContext作为Spring容器。这里,我们讲的也是 ApplicationCont
本文向大家介绍详解ASP.NET页面生命周期,包括了详解ASP.NET页面生命周期的使用技巧和注意事项,需要的朋友参考一下 ASP.NET页面运行时候,页面将经历一个生命周期,在生命周期中将执行一系列的处理步骤。包括初始化、实例化控件、还原和维护状态、运行时间处理程序代码以及进行呈现。熟悉页面生命周期非常重要,这样我们才能在生命周期的合适阶段编写代码。如果我们能在写代码的时候想着我们现在是在做生命
注:本文档提供的生命周期指的是 Universal App 的生命周期,它依赖 rax-app 提供的 runApp方法。 App 级生命周期 launch 在 App 启动时触发 使用生命周期 你可以使用 rax-app 提供的 useAppLaunch 来注册 App 级别的生命周期。 示例: import { useAppLaunch } from 'rax-app'; useAppLa