微信小程序的生命周期的详解


Posted in Javascript onOctober 19, 2017

今天记录一下微信小程序的app生命周期及各页面的生命周期。

(一)小程序的生命周期

在app.json中进行监听,三个方法

①onLauch方法只在小程序启动时触发一次。

②onShow方法,在小程序启动时,及由后台切换至前台显示时触发。

③onHide方法,在小程序由前台显示切换至后台时触发。

可以通过 ↓ 这张图片,感受一下各生命周期。

微信小程序的生命周期的详解

比较有趣的地方是,小程序启动时会触发两次onShow,我不知道是为什么。希望了解的同学解释一下。

(二)页面的生命周期

1.在index中我添加了两种方式跳转到新增的crab页面 ↓ 在这里简单介绍一下

①在index.wxml文件中通过在<navigator>标签中添加url实现跳转

②将button绑定到index.js中的方法实现跳转,此处我将方法命名为turnCrabFunction,并在index.js中实现该方法。

微信小程序的生命周期的详解

微信小程序的生命周期的详解

2.下面介绍crab.js中的各生命周期

↓图为该文件部分代码,使用console.log进行打印,方便我们进行观察各生命周期。(各函数后面注释对应功能说明。)

微信小程序的生命周期的详解

其中,onSomeFunction是我随意命名的,其他方法均有固定名字及含义。

3.在index界面,我们选择任意一种方式进入crab界面。↓图进行详细说明

微信小程序的生命周期的详解

(如果无法实现下拉刷新,请检查app.json中window参数,或检查当前页面的crab.json文件是否覆盖该参数为false)

微信小程序的生命周期的详解

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
使用javascript做的一个随机点名程序
Feb 13 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
May 18 Vue.js
python爬取安居客二手房网站数据(实例讲解)
Oct 19 #Javascript
js 两个日期比较相差多少天的实例
Oct 19 #Javascript
Angular弹出模态框的两种方式
Oct 19 #Javascript
vue使用axios跨域请求数据问题详解
Oct 18 #Javascript
JS实现按钮颜色切换效果
Sep 05 #Javascript
JS实现元素上下左右移动效果
Oct 18 #Javascript
JS去掉字符串中所有的逗号
Oct 18 #Javascript
You might like
如何写php程序?
2006/12/08 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
php图片上传类 附调用方法
2016/05/15 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
使用canvas进行图像编辑的实例
2017/08/29 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python批量赋值操作实例
2018/10/22 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
django迁移数据库错误问题解决
2019/07/29 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
python删除某个目录文件夹的方法
2020/05/26 Python
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
英语系本科生个人求职信
2013/09/21 职场文书
专升本自我鉴定
2013/10/10 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
学生自我评价范文
2014/02/02 职场文书
《颐和园》教学反思
2014/02/26 职场文书
银行授权委托书样本
2014/10/13 职场文书
2014年维修工作总结
2014/11/22 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书