登录  /  注册

小程序中生命周期的解析(附代码)

不言
发布: 2018-08-10 15:32:02
原创
2210人浏览过

本篇文章给大家带来的内容是关于小程序中生命周期的解析(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

首先,我们来思考:当我们点击屏幕或者做滑动屏幕的类似的触发事件时,界面为什么会做出相应的变化呢?

原因是 :  整个小程序应用有2个线程.

  • 一个线程做视图渲染.

  • 一个线程做逻辑处理.
    这样你差不多应该清楚了 : wxml和wxss文件主要做视图展示,而js文件主要是做响应事件的逻辑处理,分工明确!

其次,我们再来分析:我们使用小程序会发现有很多的页面,那么谁来管理这些页面呢?页面和整个程序之间又是个什么样儿的关系呢?

  • [x] 一个app,有app和pages构成,有着不同的生命周期

  • app
    一个程序启动后,执行onLaunch—>onShow

App({
  onLaunch: function () {
  },
  onShow: function (options) {
  },
  onHide: function () {
  },
  onError: function (msg) {
  }
})
登录后复制
  • pages
    一个程序启动后,执行onLaunch—>onShow后,接着加载首页;加载首页onLoad—>onShow—>onReady

Page({
  data: {
  },
  onLoad: function (options) {
  },
  onReady: function () {
  },
  onShow: function () {
  },
  onHide: function () {
  },
  onUnload: function () {
  },
  onPullDownRefresh: function () {
  },
  onReachBottom: function () { 
  },
  onShareAppMessage: function () {
  }
})
登录后复制

此时,你已经看到了渲染好的首页了!

如果此时,你想看下你的帅帅的或者美美的自拍照,按下了Home键或者点击了右上角的退出小圆圈,此时小程序发生了什么呢?
 - 首页加载 onLaunch—>onShow—>onLoad—>onShow—>onReady  加载完成
 - 执行退出,小程序其实是执行了onHide(page的onHide)—>onHide(app的onHide)
 如果你欣赏完自拍照后,你又想起了刚才的小程序,又感兴趣想瞅瞅,咋办呢?打开呗!打开之后,想想小程序会做什么呢?难道重新加载么?
 - NO NO NO!如果你的自拍欣赏时间不是很长,或者内存十分足够小程序呆一会的话,小程序只需要被唤醒一下就好喽!^.^
 - onLaunch—>onShow—>onLoad—>onShow—>onReady—>onHide(page)—>onHide(app)这是刚才加载好首页,又退出后的生命线,此时如果你又进来了,那么程序将会这样走:onShow(app)—>onShow(page)

这个时候,对于一个页面的基本加载,应该没啥问题了吧

没啥问题,咱就直接上进阶干货了

  1. 打开新的页面[新页面入栈]

  • 原来页面:onHide

  • 新的页面:onLoad—>onShow—>onReady

  • 页面重定向[原页面出栈,新页面入栈]

    • 原来页面:onUnload

    • 新的页面:onLoad—>onShow—>onReady

  • 页面返回[新页面出栈,显示原页面]

    • 新的页面:onUnload

    • 原来页面:onShow

  • Tab切换

    • 新的页面:onHide

    • 原来页面: 情景1(已加载):onShow   情景2(未加载):onLoad—>onShow—>onReady

    相关推荐:

    小程序实现自动加载的完整代码

    微信小程序实例:如何实现跑马灯的动画效果(附代码)

    以上就是小程序中生命周期的解析(附代码)的详细内容,更多请关注php中文网其它相关文章!

    智能AI问答
    PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
    相关标签:
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    关于CSS思维导图的课件在哪? 课件
    凡人来自于2024-04-16 10:10:18
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号