微信小程序APP的生命周期及页面的生命周期


Posted in Javascript onApril 19, 2022

官方文档

https://developers.weixin.qq.com/doc/search.html?query=生命周期&doc_type=miniprogram&jumpbackUrl=%2Fdoc%2F

小程序的启动流程

我们画一个图来表示一下,整个小程序的启动流程,我们就知道了:

微信小程序APP的生命周期及页面的生命周期

app生命周期

微信小程序APP的生命周期及页面的生命周期

执行App()函数也就是注册一个App

1 在注册app的时候,可以判断小程序的进入场景

2 我们可以在执行通过生命周期函数,做一些数据请求

3 可以在app中设置一个全局对象,让所有页面都能使用

页面的生命周期

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("onload")
  },

  /**
 * 生命周期函数--监听页面显示
 */
  onShow: function () {
    console.log("onshow")
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    console.log("onReady")
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    console.log("onHide")
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    console.log("onUnload")
  },
  //监听用户下拉动作,
  onPullDownRefresh :function(){
    //如果要用到这个,必须把"enablePullDownRefresh": true
    console.log("下拉刷下")
  }, 
  //页面上拉触底事件的处理函数
  onReachBottom:function(){
    console.log("上拉到底部")
},
//页面滚动触发事件的处理函数
onPageScroll:   function(e){
  console.log("滚轮在懂",e)
} 
})

1 在生命周期函数中发送网络请求,从服务端获取数据

2 初始化一些数据,在data里面,以方便wxml引用

3 监听wxml的事件,绑定对应的事件函数

4 还有页面滚动,上拉,下拉等

页面的生命周期(图)

微信小程序APP的生命周期及页面的生命周期

以上就是微信APP生命周期及页面生命周期示例详解的详细内容!

Javascript 相关文章推荐
关于 文本框默认值 的操作js代码
Jan 12 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jQuery使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
jQuery实现图片左右滚动特效
Apr 20 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 #Vue.js
vue3语法糖内的defineProps及defineEmits
Apr 14 #Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 #Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 #Vue.js
You might like
一篇不错的PHP基础学习笔记
2007/03/18 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
php批量修改表结构实例
2017/05/24 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JavaScript中的数学运算介绍
2014/12/29 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
Javascript中Array用法实例分析
2015/06/13 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
清除输入框内的空格
2016/12/21 Javascript
bootstrap table 多选框分页保留示例代码
2017/03/08 Javascript
JavaScript随机数的组合问题案例分析
2020/05/16 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中使用wxPython开发的一个简易笔记本程序实例
2015/02/08 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python爬虫URL重试机制的实现方法(python2.7以及python3.5)
2018/12/18 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
python处理excel绘制雷达图
2019/10/18 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
抽象类和接口的区别
2012/09/19 面试题
技校生自我鉴定
2013/12/08 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
八一建军节部队活动方案
2014/02/04 职场文书
网络技术专业求职信
2014/05/02 职场文书
企业安全生产承诺书
2014/05/22 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server