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


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 CSS画图之基础篇
Jul 29 Javascript
基于jquery实现的表格分页实现代码
Jun 21 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
javascript中apply、call和bind的使用区别
Apr 05 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
May 03 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 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+mysql保存和输出文件
2006/10/09 PHP
中英文字符串翻转函数
2008/12/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
使用php-timeit估计php函数的执行时间
2015/09/06 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
jQuery参数列表集合
2011/04/06 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
2013/11/25 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
2017/11/29 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
基于react项目打包css引用路径错误解决方案
2020/10/28 Javascript
[01:08:29]DOTA2-DPC中国联赛定级赛 RNG vs Aster BO3第一场 1月9日
2021/03/11 DOTA
使用Python实现简单的服务器功能
2017/08/25 Python
Django组件cookie与session的具体使用
2019/06/05 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
Python自动化操作实现图例绘制
2020/07/09 Python
法学毕业生自荐信
2013/11/13 职场文书
高三政治教学反思
2014/02/06 职场文书
意向协议书范本
2014/04/23 职场文书
大学学生个人总结
2015/02/15 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python