编程 Javascript

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

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）

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

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

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

- Author -

Crab0314

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery学习7 操作JavaScript对象和集合的函数

Feb 07 Javascript

jQuery-onload让第一次页面加载时图片是淡入方式显示

May 23 Javascript

JavaScript原型链示例分享

Jan 26 Javascript

js加入收藏夹代码(兼容ie/ff/op)

May 16 Javascript

jQuery常用且重要方法汇总

Jul 13 Javascript

Jquery中使用show()与hide()方法动画显示和隐藏图片

Oct 08 Javascript

JS实现浏览器状态栏文字闪烁效果的方法

Oct 27 Javascript

JQuery实现table中tr上移下移的示例(超简单)

Jan 08 jQuery

微信小程序实现导航栏选项卡效果

Jun 19 Javascript

原生JS进行前后端同构

Apr 22 Javascript

jQuery常见的遍历DOM操作详解

Sep 05 jQuery

vue动态禁用控件绑定disable的例子

Oct 28 Javascript

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

解析dedecms空间迁移步骤详解

2013/05/15 PHP

php中\r \r\n \t的区别示例介绍

2014/02/08 PHP

PHP中使用smarty生成静态文件的例子

2014/04/24 PHP

destoon网站转移服务器后搜索汉字出现乱码的解决方法

2014/06/21 PHP

php实现插入排序

2015/03/29 PHP

PHP curl使用实例

2015/07/02 PHP

PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】

2017/11/14 PHP

jQuery 使用手册(六)

2009/09/23 Javascript

解决jquery的.animate()函数在IE6下的问题

2010/12/03 Javascript

如何使用Javascript获取距今n天前的日期

2013/07/08 Javascript

Iframe实现跨浏览器自适应高度解决方法

2014/09/02 Javascript

angularJS 中input示例分享

2015/02/09 Javascript

微信小程序新增的拖动组件movable-view使用教程

2017/05/20 Javascript

vue数据双向绑定的注意点

2017/06/23 Javascript

ES6模块化的import和export用法方法总结

2017/08/08 Javascript

vue axios同步请求解决方案

2017/09/29 Javascript

JQuery 又谈ajax局部刷新

2017/11/27 jQuery

微信小程序实现流程进度的图样式功能

2018/01/16 Javascript

实例详解带参数的 npm script

2019/05/28 Javascript

javascript写一个ajax自动拦截并下载数据代码实例

2019/09/07 Javascript

纯JS开发baguetteBox.js响应式画廊插件

2020/06/28 Javascript

[02:41]2015国际邀请赛中国区预选赛观战指南

2015/05/20 DOTA

Python常用列表数据结构小结

2014/08/06 Python

Python2.x利用commands模块执行Linux shell命令

2016/03/11 Python

python批量添加zabbix Screens的两个脚本分享

2017/01/16 Python

美国家喻户晓的保健品品牌：Vitamin World（维他命世界）

2016/08/19 全球购物

美国折扣宠物药房：Total Pet Supply

2018/05/27 全球购物

美国轮胎网站：Priority Tire

2018/11/28 全球购物

linux系统都有哪些运行级别

2012/04/15 面试题

暑期实习鉴定

2013/12/16 职场文书

老总助理工作岗位职责

2014/02/06 职场文书

农村党支部书记司法四风问题对照检查材料

2014/09/26 职场文书

关于观后感的作文

2015/06/18 职场文书

农村老人去世追悼词

2015/06/23 职场文书

《秋天的图画》教学反思

2016/02/19 职场文书

python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单

2021/05/25 Python