微信小程序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代码
Dec 04 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
javascript中Array()数组函数详解
Aug 23 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
Js实现京东无延迟菜单效果实例(demo)
Jun 02 Javascript
Javascript 严格模式use strict详解
Sep 16 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 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常用函数 推荐收藏保存
2010/02/21 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JavaScript中的其他对象
2008/01/16 Javascript
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
javascript操作referer详细解析
2014/03/10 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python os.fork() 循环输出方法
2019/08/08 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
先进工作者获奖感言
2014/02/08 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
元旦寄语大全
2014/04/10 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
会计专业自荐信
2014/06/03 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
施工安全责任协议书
2016/03/23 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS