专栏首页front-end technology小程序 — 小程序生命周期及页面生命周期

小程序 — 小程序生命周期及页面生命周期

前言:很多同学容易将小程序生命周期和页面的生命周期混淆为一起,这两个其实应该是不同却又相互关联的生命周期,所以,用实际代码操作并结合官方理论讲讲这个,好好捋捋。

1、小程序生命周期

(1)首先小程序的生命周期函数是在app.js里面调用的,App(Object)函数用来注册一个小程序。接受一个 Object 参数,指定其小程序的生命周期回调;一般有onLaunch监听小程序初始化、onShow监听小程序显示、onHide监听小程序隐藏等生命周期回调函数。

(2)看文字对概念有点模糊对不对?理解概念的最好方法就是上手实际操作一遍。那么,我们来看看当打开一个小程序的时候,到底是onLaunch、onShow、onHide哪个先调用以及什么时候开始调用的。

onLaunch() { console.log('onLaunch监听小程序初始化'); }

onShow() { console.log('onShow监听小程序显示'); }

onHide() { console.log('onLaunch监听小程序隐藏'); }

打开小程序

点击右上角按钮隐藏小程序有再次进入

(3)从中我们可以知道小程序的生命周期函数的调用顺序为:onLaunch>onShow>onHide

2、页面的生命周期

(1)页面生命周期函数就是当你每进入/切换到一个新的页面的时候,就会调用的生命周期函数。Page(Object) 函数用来注册一个页面。接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数等。

页面生命周期-截图来自小程序官网

(2)老规矩,我们用代码来演示下各个页面生命周期函数的先后顺序。

  onLoad(options) {    console.log('onLoad监听页面加载');
  }

  onReady() {    console.log('onReady监听页面初次渲染完成');
  }

  onShow() {    console.log('onShow监听页面显示');
  }

  onHide() {    console.log('onHide监听页面隐藏');
  }

  onUnload() {    console.log('onUnload监听页面卸载');
  }

复制代码

页面生命周期函数

从中我们可以知道小程序的生命周期函数的调用顺序为:onLoad>onReady>onShow;至于onHide函数就是当隐藏页面的时候触发。

3、小结

由此我们知道了“小程序程序生命周期函数”和“页面生命周期函数”的调用顺序;这两者之间的事件顺序一般如上图所示小程序周期函数在前,页面周期函数触发在后; 但是,这 并不是绝对的,比如,有时候就会存在页面onLoad函数比小程序app的onLaunch生命周期函数先调用的情况,那么这时候就可以提出一个问题,那就是如何保证小程序的onLaunch事件的触发一定优先页面的onLoad事件? 这是我们下一章《小程序的因难技巧》要解决的问题。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 用es6快乐的写js代码

    ES6 提供的许多新特性。用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~

    前端老鸟
  • 带你玩转ECMAScript 6,助力你写出高效漂亮的代码

    ES6 提供的许多新特性。用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~

    前端老鸟
  • 全球四大互联网公司最大的敌人是谁?

    据统计,在2004年到2008年的几年时间里,欧盟累计对微软开出了16.8亿欧元的罚单,单笔8.99亿欧元创下最高额记录,一年后被英特尔的单笔10.6亿欧元罚单...

    前端老鸟
  • Solidity 0.7.0 更新点

    2020 年 7 月 28 日,Solidity 编译器的次要版本升至 0.7.0. 变更日志[3]上包含 32 个修改要点。在 Solidity 文档上也用了...

    Tiny熊
  • 不好意思,我还是习惯“谷歌”

    身为半个科研工作者,上网查查文献或者论文是一件很平常的事。虽然各大学校的图书馆都会买一些国内外数据库供学生使用,不过,这还是不够。由于一些众所周知的原因,国内各...

    课代表
  • 微信小程序控制树莓派(一)

    工作需要,尝试通过微信小程序实现对树莓派的控制,经过一番搜索整理与编码,目前可以在本地实现通过微信小程序界面向树莓派服务器端通信。

    TTTEED
  • 从入门到跑路之Kubernetes(三)

    Overlay是一种联合文件系统,设计简单,速度更快。Overlayfs在Linux主机上只有两层,一个目录在下层,用来保存镜像,另外一个目录在上层,用来存储容...

    周萝卜
  • 2020年,知识图谱都有哪些研究风向?

    随着认知智能走进了人们的视野,知识图谱的重要性便日渐凸显。在今年的自然语言处理顶会 ACL 2020 上,自然语言知识图谱领域发生了巨大的革新。ACL 作为 N...

    AI科技评论
  • 如何下载国外docker镜像?

    今天在学习TektonPipeline的时候,需要安装到openshfit中。部署的时候发生了错误,镜像无法下载。于是借助docker hub自带的构建镜像功能...

    泽阳
  • 干货分享:Postman使用小技巧

    从该点的下拉框可以查看到已经设置的变量!如果之前未设置过变量的,可以点击上图中红色框后边的齿轮按钮进入到环境变量添加页面中,添加页面如下图:

    lyb-geek

扫码关注云+社区

领取腾讯云代金券