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


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 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
浅谈JavaScript超时调用和间歇调用
Aug 30 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
Javascript基础回顾之(一) 类型
Jan 31 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
Vue.js 中的 $watch使用方法
May 25 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 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 计划任务 检测用户连接状态
2012/03/29 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php判断是否为json格式的方法
2014/03/04 PHP
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
2013/01/08 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
2015/05/03 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
python连接MySQL数据库实例分析
2015/05/12 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
通过自学python能找到工作吗
2020/06/21 Python
Python中生成ndarray实例讲解
2021/02/22 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
工作作风懒散检讨书
2014/10/29 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
《1942》观后感
2015/06/08 职场文书
小学班长竞选稿
2015/11/20 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫