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


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 相关文章推荐
简单几行JS Code实现IE邮件转发新浪微博
Jul 03 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
js滚动条平滑移动示例代码
Mar 29 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 Javascript
浅谈js闭包理解
Apr 01 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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
Zend 输出产生XML解析错误
2009/03/03 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
JS文件上传神器bootstrap fileinput详解
2021/01/28 Javascript
node+express制作爬虫教程
2016/11/11 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
js常用正则表达式集锦
2019/05/17 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
Python MD5加密实例详解
2017/08/02 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python反射的用法实例分析
2018/02/11 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
Python模块常用四种安装方式
2020/10/20 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
优秀毕业生自荐信范文
2014/01/01 职场文书
元旦促销方案
2014/03/15 职场文书
2014年度安全工作总结
2014/12/04 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Python装饰器的练习题
2021/11/23 Python
十大好看的穿越动漫排名:《瑞克和莫蒂》第一,国漫《有药》在榜
2022/03/18 日漫