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


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对象的property和prototype是什么一种关系
Aug 06 Javascript
通过修改referer下载文件的方法
May 11 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 Javascript
详解Vue中的MVVM原理和实现方法
Jul 15 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
PHP生成图片验证码、点击切换实例
2014/06/25 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
2016/10/27 Javascript
JS验证字符串功能
2017/02/22 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
AngularJS 异步解决实现方法
2017/06/12 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
python2与python3中关于对NaN类型数据的判断和转换方法
2018/10/30 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python调用c++传递数组的实例
2019/02/13 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
建筑实习自我鉴定
2013/10/18 职场文书
英语故事演讲稿
2014/04/29 职场文书
个人欠款担保书
2014/05/20 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
班子四风对照检查材料
2014/08/21 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
导游词之阆中古城
2019/12/23 职场文书
浅谈Python项目的服务器部署
2021/04/25 Python