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


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 读书笔记索引贴
Jan 11 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
详解vue文件中使用echarts.js的两种方式
Oct 18 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 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实现的功能是显示8条基色色带
2006/10/09 PHP
下载文件的点击数回填
2006/10/09 PHP
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery基础知识小结
2014/12/22 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
jQuery按需加载轮播图(web前端性能优化)
2017/02/17 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
[05:46]2018完美盛典-《同梦共竞》
2018/12/17 DOTA
浅谈python中的正则表达式(re模块)
2017/10/17 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
2014年医学生毕业自我鉴定
2014/03/26 职场文书
初中生评语大全
2014/04/24 职场文书
团日活动总结模板
2014/06/25 职场文书
会议接待欢迎标语
2014/10/08 职场文书
人事主管岗位职责
2015/02/04 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
政协工作总结2015
2015/05/20 职场文书
办公室年度工作总结2015
2015/05/21 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
一起来学习Python的元组和列表
2022/03/13 Python