编程 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弹出层包含flash 不能关闭隐藏的2种处理方法

Jun 17 Javascript

分析了一下JQuery中的extend方法实现原理

Feb 27 Javascript

jQuery超精致图片轮播幻灯片特效代码分享

Sep 10 Javascript

javascript中JSON.parse()与eval()解析json的区别

May 19 Javascript

jQuery实现的网格线绘制方法

Jun 20 Javascript

原生js仿jquery一些常用方法(必看篇)

Sep 20 Javascript

浅谈js常用内置方法和对象

Sep 24 Javascript

详解javascript中对数据格式化的思考

Jan 23 Javascript

vue单页应用中如何使用jquery的方法示例

Jul 27 jQuery

详解如何webpack使用DllPlugin

Sep 30 Javascript

layui输入框中只允许输入整数的实现方法

Sep 18 Javascript

微信小程序自定义弹出层效果

May 26 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

PHP 编程的 5个良好习惯

2009/02/20 PHP

PHP5中Cookie与 Session使用详解

2013/04/30 PHP

php的ZipArchive类用法实例

2014/10/20 PHP

CI框架学习笔记（二） -入口文件index.php

2014/10/27 PHP

php表单文件iframe异步上传实例讲解

2017/07/26 PHP

Thinkphp5框架实现获取数据库数据到视图的方法

2019/08/14 PHP

Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例

2020/04/04 PHP

Javascript实现DIV滚动自动滚动到底部的代码

2012/03/01 Javascript

javascript 文件的同步加载与异步加载实现原理

2012/12/13 Javascript

JSP跨iframe如何传递参数实现代码

2013/09/21 Javascript

用jquery写的一个万年历(自写)

2014/01/20 Javascript

seajs中模块的解析规则详解和模块使用总结

2014/03/12 Javascript

js实现iframe自动自适应高度的方法

2015/02/17 Javascript

JavaScript中的toDateString()方法使用详解

2015/06/12 Javascript

arguments对象验证函数的参数是否合法

2015/06/26 Javascript

JavaScript九九乘法口诀表的简单实现

2016/10/04 Javascript

Jquery Easyui验证组件ValidateBox使用详解（20）

2016/12/18 Javascript

JavaScript数据结构之二叉查找树的定义与表示方法

2017/04/12 Javascript

mui back 返回刷新页面的实例

2017/12/06 Javascript

layer插件select选中默认值的方法

2018/08/14 Javascript

在Vue环境下利用worker运行interval计时器的步骤

2019/08/01 Javascript

微信小程序实现按字母排列选择城市功能

2019/11/25 Javascript

[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访

2014/06/30 DOTA

详解Python中的Descriptor描述符类

2016/06/14 Python

python中子类继承父类的__init__方法实例

2016/12/15 Python

使用Python写一个量化股票提醒系统

2018/08/22 Python

带你认识Django

2019/01/15 Python

浅析Python 抽象工厂模式的优缺点

2020/07/13 Python

纯CSS实现菜单、导航栏的3D翻转动画效果

2014/04/23 HTML / CSS

idealfit英国：世界领先的女性健身用品和运动衣物品牌

2017/11/25 全球购物

巴西体育用品商店：Lojão dos Esportes

2018/07/21 全球购物

保安拾金不昧表扬信

2014/01/15 职场文书

红领巾心向党演讲稿

2014/09/10 职场文书

社区法制宣传月活动总结

2015/05/07 职场文书

行政处罚告知书

2015/07/01 职场文书

2016天猫双十一广告语

2016/01/28 职场文书