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


Posted in Javascript onJanuary 19, 2017

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

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()方法会执行两次

  • 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的时候调用。

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

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

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

Javascript 相关文章推荐
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
深入理解JavaScript系列(18):面向对象编程之ECMAScript实现
Mar 05 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
require.js 加载过程与使用方法介绍
Oct 30 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
javascript中数组的常用算法深入分析
Mar 12 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
javascript异常处理实现原理详解
Feb 17 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 #Javascript
原生js实现电商侧边导航效果
Jan 19 #Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 #Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 #Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 #Javascript
js实现漫天星星效果
Jan 19 #Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 #Javascript
You might like
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php Ajax乱码
2008/04/09 PHP
php用wangeditor3实现图片上传功能
2019/08/22 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
JavaScript/jQuery 表单美化插件小结
2012/02/14 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
详解jQuery中的deferred对象的使用(一)
2016/05/27 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
python爬虫框架talonspider简单介绍
2017/06/09 Python
对python .txt文件读取及数据处理方法总结
2018/04/23 Python
python实现PCA降维的示例详解
2020/02/24 Python
Python中如何引入第三方模块
2020/05/27 Python
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
2019年Java 最常见的 面试题
2016/10/19 面试题
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
遗产继承公证书
2014/04/09 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
公司租车协议书
2015/01/29 职场文书
前台接待岗位职责
2015/02/03 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers