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


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入门教程 Cookies
Jan 31 Javascript
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
Feb 03 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
AngularJS 表达式详细讲解及实例代码
Jul 26 Javascript
jQuery使用方法
Feb 04 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
Mar 15 Javascript
laravel5.4+vue+element简单搭建的示例代码
Aug 29 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
Vue实现附件上传功能
May 28 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
香妃
2021/03/03 冲泡冲煮
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
php文件系统处理方法小结
2016/05/23 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js简单实现删除记录时的提示效果
2013/12/05 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
微信小程序结合Storage实现搜索历史效果
2019/05/18 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
django模板语法学习之include示例详解
2017/12/17 Python
Django视图和URL配置详解
2018/01/31 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python3.4学习笔记之常用操作符,条件分支和循环用法示例
2019/03/01 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python如何获取文件路径/目录
2020/09/22 Python
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
毕业生求职信
2014/06/10 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
努力工作保证书
2015/02/28 职场文书
第二次离婚起诉书
2015/05/18 职场文书
初一军训感言
2015/08/01 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技