小程序生命周期钩子函数

小程序生命周期钩子函数生命周期生命周期是指一个小程序从创建到销毁的一个过程 小程序有两种生命周期一种通过 App 来注册一个小程序 另一种通过 Page 来注册一个页面 小程序应用的生命周期 App 函数用来注册一个小程序 接受一个 object 参数 指定小程序的生命周期回调等 App 必须在 app js 种调用 必须调用且只能调用一次 App onLaunch function options 监听小程序初始化 小程序初始化完成时 全局只触发一次 onShow fu

生命周期

生命周期是指一个小程序从创建到销毁的一个过程。

小程序有两种生命周期

一种通过App()来注册一个小程序,

另一种通过Page()来注册一个页面。

小程序应用的生命周期

App()函数用来注册一个小程序。接受一个object参数,指定小程序的生命周期回调等。

App()必须在app.js种调用。必须调用且只能调用一次。

App({ 
    onLaunch: function(options) { 
    // 监听小程序初始化。小程序初始化完成时(全局只触发一次) }, onShow: function(options) { 
    // 监听小程序显示。小程序启动,或从后台进入前台显示时 }, onHide: function() { 
    // 监听小程序隐藏。小程序从前台进入后台时。 }, onError: function(msg) { 
    console.log(msg) // 错误监听函数。小程序发生脚本错误,或者 api 调用失败时触发,会带上错误信息 }, onPageNotFound: function(res) { 
    // 页面不存在监听函数。小程序要打开的页面不存在时触发,会带上页面信息回调该函数 }, }) 

前台、后台定义:

当用户点击左上角关闭,或者按了设备Home键离开微信,小程序并没有直接销毁,而是进入后台;当再次进入微信或者再次打开小程序,又从后台进入前台

总结:

1、用户首次打开小程序,触发onLaunch方法(全局只触发一次)。

2、小程序初始化完成后,触发onShow方法,监听小程序显示。

3、小程序从前台进入后台,触发onHide方法。

4、小程序从后台进入前台显示,触发onShow方法。

5、小程序后台运行一定时间,或系统资源占用过高,会被销毁。

全局的getApp()函数可以用来获取小程序App实例。

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

页面的生命周期

Page(object)函数用来注册一个页面,接受一个Object类型参数,其指定页面的初始数据、生命周期回调、事件处理函数。

Page({ 
    data: { 
    // 页面的初始数据 text: "This is page data." }, onLoad: function(options) { 
    // 生命周期回调—监听页面加载 }, onReady: function() { 
    // 生命周期回调—监听页面初次渲染完成 }, onShow: function() { 
    // 生命周期回调—监听页面显示 }, onHide: function() { 
    // 生命周期回调—监听页面隐藏 }, onUnload: function() { 
    // 生命周期回调—监听页面卸载 }, // ---------------以下不是生命周期钩子函数---------------- onPullDownRefresh: function() { 
    // 监听用户下拉动作 }, onReachBottom: function() { 
    // 页面上拉触底事件的处理函数 }, onShareAppMessage: function () { 
    // 用户点击右上角转发 }, onPageScroll: function() { 
    // 页面滚动触发事件的处理函数 }, onResize: function() { 
    // 页面尺寸改变时触发 }, onTabItemTap(item) { 
    // 当前是 tab 页时,点击 tab 时触发 console.log(item.index) console.log(item.pagePath) console.log(item.text) }, // 任意的函数,在页面的函数中用 this 可以访问 viewTap: function() { 
    this.setData({ 
    text: 'Set some data for updating view.' }, function() { 
    // this is setData callback }) }, // 任意数据,在页面的函数中用 this 可以访问 customData: { 
    hi: 'MINA' } }) 

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

  • 小程序注册完成后,加载页面,触发onLoad方法。
  • 页面载入后触发onShow方法,显示页面。
  • 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。
  • 当小程序后台运行或跳转到其他页面时,触发onHide方法。
  • 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。
  • 当使用重定向方法wx.redirectTo(object)或关闭当前页返回上一页wx.navigateBack(),触发onUnload。

总结:

onLoad: 页面加载。一个页面只会调用一次。参数可以获取wx.navigateTo和wx.redirectTo及中的 query。

onShow: 页面显示。每次打开页面都会调用一次。

onReady: 页面初次渲染完成。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。

onHide: 页面隐藏。当navigateTo或底部tab切换时调用。

onUnload: 页面卸载。当redirectTo或navigateBack的时候调用。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/227605.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午8:56
下一篇 2026年3月16日 下午8:56


相关推荐

  • java入门第四步之应用服务器的安装(Tomcat)

    java入门第四步之应用服务器的安装(Tomcat)

    2021年8月18日
    55
  • 卫星通信频段:C频段、Ku频段和Ka频段

    卫星通信频段:C频段、Ku频段和Ka频段转自 http blog sina com cn s blog 6c0d875e0102 html 今天我们将跟大家交流探讨卫星频段 C 频段 Ku 频段和 Ka 频段 的相关知识 对它们的应用特点进行探讨 卫星业务的频段分配是在国际电信联盟 ITU 的管理下进行的 ITU 将全球划分为 3 个区域 我国属 3 区 在这些区域内 频带被分配给各种卫星业务 但同一种给定的业务在不同的区域可

    2025年8月7日
    5
  • 个人博客项目之editormd实现文章详情页面预览

    个人博客项目之editormd实现文章详情页面预览继之前博客写了 editmd js 国内开源的一款前端 Markdown 框架 实现的写文章功能之后 本博客介绍使用 editormd 实现文章预览功能 之前博客链接 https blog csdn net u0 article details 要从上篇博客介绍的将 Markdown 语法的语句存储在数据库之后 读取出来 然后调用 editormd 的一些 js 脚本就可以实现主

    2026年3月16日
    2
  • cf卡,mmc卡,sd卡,sm卡,xd卡,记忆棒的区别是什么?[通俗易懂]

    cf卡,mmc卡,sd卡,sm卡,xd卡,记忆棒的区别是什么?[通俗易懂]乐乐[学长] CF卡(CompactFlash)CF卡是1994年由SanDisk最先推出的。CF卡具有PCMCIA-ATA功能,并与之兼容;CF卡重量只有14g,仅纸板火柴般大小(43mm×36mm×3.3mm),是一种固态产品,也就是工作时没有运动部件。CF卡采用闪存(flash)技术,是一种稳定的存储解决方案,不

    2022年5月27日
    56
  • react 创建新页面_如何新建react项目「建议收藏」

    在开发React项目前最关键的当然是项目的创建,现在的前端工程化使得前端项目的创建也变得越来越复杂,今天我们介绍的是浏览器中直接引入的方式搭建react项目。如何新建react项目前文中,我们介绍过了2种react项目的搭建方式,分别是webpack的方式搭建和create-react-app脚手架的方式搭建感兴趣的同学可以点击下方链接,进行学习。webpack的方式搭建项目:怎样搭建rea…

    2022年4月14日
    141
  • php查询IP地址归属等信息

    淘宝公司提供了一个很好用的IP地理信息查询接口。在这里:http://ip.taobao.com/TaobaoIPQuery2这个类将极大的简化相关的信息查询。类TaobaoIPQuery2文件:

    2021年12月20日
    48

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号