编程 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)

Oct 01 Javascript

利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)

Nov 25 Javascript

AngularJS内置指令

Feb 04 Javascript

AngularJS 中的Promise --- $q服务详解

Sep 14 Javascript

微信小程序开发之麦克风动画帧动画放大淡出

Apr 18 Javascript

使用vue点击li,获取当前点击li父辈元素的属性值方法

Sep 12 Javascript

Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态（懒）加载模块和依赖

Nov 25 Javascript

小程序如何获取多个formId实现详解

Sep 20 Javascript

JS箭头函数和常规函数之间的区别实例分析【 5 个区别】

May 27 Javascript

vue实现学生信息管理系统

May 30 Javascript

js实现数字跳动到指定数字

Aug 25 Javascript

结合axios对项目中的api请求进行封装操作

Sep 21 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生成等比缩略图类和自定义函数分享

2014/06/25 PHP

php PDO判断连接是否可用的实现方法

2017/04/03 PHP

thinkPHP和onethink微信支付插件分享

2019/08/11 PHP

php实现根据身份证获取精准年龄

2020/02/26 PHP

用jQuery模拟页面加载进度条的实现代码

2011/12/19 Javascript

通过jQuery源码学习javascript(二)

2012/12/27 Javascript

js获取键盘按键响应事件(兼容各浏览器)

2013/05/16 Javascript

jquery实现类似淘宝星星评分功能实例

2014/09/12 Javascript

AngularJS中的Directive实现延迟加载

2016/01/25 Javascript

20分钟打造属于你的Bootstrap站点

2016/07/27 Javascript

浅谈JavaScript 数据属性和访问器属性

2016/09/01 Javascript

用 Vue.js 递归组件实现可折叠的树形菜单(demo)

2017/12/25 Javascript

Vue 实现双向绑定的四种方法

2018/03/16 Javascript

Angular学习教程之RouterLink花式跳转

2018/05/03 Javascript

vue中父子组件注意事项,传值及slot应用技巧

2018/05/09 Javascript

JavaScript插入排序算法原理与实现方法示例

2018/08/06 Javascript

Vue 子组件与数据传递问题及注意事项

2019/07/11 Javascript

解决vue.js提交数组时出现数组下标的问题

2019/11/05 Javascript

Django中的“惰性翻译”方法的相关使用

2015/07/27 Python

python3 面向对象__类的内置属性与方法的实例代码

2018/11/09 Python

Python3利用print输出带颜色的彩色字体示例代码

2019/04/08 Python

python实现DEM数据的阴影生成的方法

2019/07/23 Python

softmax及python实现过程解析

2019/09/30 Python

python 用 xlwings 库生成图表的操作方法

2019/12/22 Python

使用遗传算法求二元函数的最小值

2020/02/11 Python

python如何调用字典的key

2020/05/25 Python

Python基于os.environ从windows获取环境变量

2020/06/09 Python

Python WebSocket长连接心跳与短连接的示例

2020/11/24 Python

亚马逊墨西哥站：Amazon.com.mx

2018/08/26 全球购物

建筑专业毕业生推荐信

2013/11/21 职场文书

企业宣传工作方案

2014/06/02 职场文书

以权谋私检举信范文

2015/03/02 职场文书

2015年乡镇党务公开工作总结

2015/05/19 职场文书

学会掌握自己命运的十条黄金法则：

2019/08/08 职场文书

python基于turtle绘制几何图形

2021/06/15 Python

win server2012 r2服务器共享文件夹如何设置

2022/06/21 Servers