编程 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 相关文章推荐

基于逻辑运算的简单权限系统(实现) JS 版

Mar 24 Javascript

JavaScript 拖拉缩放效果

Dec 10 Javascript

jquery组件使用中遇到的问题整理及解决

Feb 21 Javascript

javascript使用switch case实现动态改变超级链接文字及地址

Dec 16 Javascript

jQuery实现友好的轮播图片特效

Jan 12 Javascript

express文件上传中间件Multer详解

Oct 24 Javascript

通过BootStrap-select插件 js jQuery控制select属性变化

Jan 03 Javascript

利用imgareaselect辅助后台实现图片上传裁剪

Mar 02 Javascript

JS正则表达式验证中文字符

May 08 Javascript

详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)

Jun 20 Javascript

详解如何使用webpack+es6开发angular1.x

Aug 16 Javascript

js判断复选框是否选中的方法示例【基于jQuery】

Oct 10 jQuery

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

PHP5常用函数列表(分享)

2013/06/07 PHP

详解使用php调用微信接口上传永久素材

2017/04/11 PHP

TP5(thinkPHP框架)实现后台清除缓存功能示例

2019/05/29 PHP

滚动经典最新话题[prototype框架]下编写

2006/10/03 Javascript

JS去除字符串的空格增强版(可以去除中间的空格)

2009/08/26 Javascript

向大师们学习Javascript（视频与PPT）

2009/12/27 Javascript

写得不错的jquery table鼠标经过变色代码

2013/09/27 Javascript

JavaScript+canvas实现七色板效果实例

2016/02/18 Javascript

BootStrap中Datetimepicker和uploadify插件应用实例小结

2016/05/26 Javascript

对象不支持indexOf属性或方法的解决方法(必看)

2017/05/28 Javascript

Vue-Router进阶之滚动行为详解

2017/09/13 Javascript

浅谈Emergence.js 检测元素可见性的 js 插件

2017/11/18 Javascript

javascript跳转与返回和刷新页面的实例代码

2019/11/20 Javascript

微信小程序封装多张图片上传api代码实例

2019/12/30 Javascript

24个ES6方法解决JS实际开发问题(小结)

2020/05/31 Javascript

JavaScript中的几种继承方法示例

2020/12/06 Javascript

[02:53]DOTA2英雄基础教程山岭巨人小小

2013/12/09 DOTA

[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场

2018/04/10 DOTA

Python简单实现查找一个字符串中最长不重复子串的方法

2018/03/26 Python

Python闭包函数定义与用法分析

2018/07/20 Python

Python第三方Window模块文件的几种安装方法

2018/11/22 Python

利用rest framework搭建Django API过程解析

2019/08/31 Python

Python实现数值积分方式

2019/11/20 Python

使用Python进行防病毒免杀解析

2019/12/13 Python

python实现最速下降法

2020/03/24 Python

如何实现在jupyter notebook中播放视频(不停地展示图片)

2020/04/23 Python

利用python清除移动硬盘中的临时文件

2020/10/28 Python

详解HTML5中div和section以及article的区别

2015/07/14 HTML / CSS

戴尔美国官网：Dell

2016/08/31 全球购物

Original Penguin美国官网：布拉德皮特、强尼德普喜爱的服装品牌

2016/10/25 全球购物

大学生求职推荐信

2013/11/27 职场文书

医院护士党的群众路线教育实践活动对照检查材料思想汇报

2014/10/04 职场文书

会计实训报告范文

2014/11/04 职场文书

幼儿教师辞职信范文

2015/03/02 职场文书

入党宣誓仪式主持词

2015/06/29 职场文书

七年级作文之关于奶奶

2019/10/29 职场文书