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

所属分类: 网络编程 / JavaScript 阅读数: 205
收藏 0 赞 0 分享

今天记录一下微信小程序的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)


如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多