微信小程序生命周期和页面的生命周期 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

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

发表时间:2021-2-20

发布人:葵宇科技

浏览次数:37

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

App() 必须在 app.js 中注册,只能有一个。所以App()方法在一个小程序中有且仅有一个对象。App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。

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

 

属性类型描述触发时机
onLaunchFunction生命周期函数–监听小程序初始化当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。
onShowFunction生命周期函数–监听小程序显示当小程序启动,或从后台进入前台显示,会触发 onShow
onHideFunction生命周期函数–监听小程序隐藏当小程序从前台进入后台,会触发 onHide
onErrorFunction错误监听函数当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
其他Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,上面的getPics就是函数, globalName是数据,这里面的函数和数据都是全局的。调用方式:在Pager中通过getApp()方法得到App对象并获得全局的数据和调用全局的函数
复制代码
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'); 
  
 }, 
  
 globalName: 'tangdekun'
  
});
复制代码

将原有的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 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

生命周期函数

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

相关案例查看更多