微信小程序的全局生命周期和页面生命周期

这篇具有很好参考价值的文章主要介绍了微信小程序的全局生命周期和页面生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        生命周期是指一个程序或者软件从创建、到开始、暂停、唤起、停止、卸载的过程,由于微信小程序分为全局和页面两部分,所有从这两部分来讲解微信小程序的生命周期

1、全局生命周期

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

App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果

(1)onLaunch(Object object):生命周期回调——监听小程序初始化,全局只触发一次;

         参数:与 wx.getLaunchOptionsSync 一致;

(2)onShow(Object object):生命周期回调——小程序启动,或从后台进入前台显示时触发;

         参数:与 wx.onAppShow 一致;

(3)onHide():小程序从前台进入后台时触发;

(4)onError(String error):生命周期回调——小程序发生脚本错误或 API 调用报错时触发;

        参数:与 wx.onError 一致

以下回调函数从高版本开始支持,低版本需做兼容处理,了解基本功能即可。

(5)onPageNotFound(Object object):小程序要打开的页面不存在时触发;

(6)onUnhandledRejection(Object object):小程序有未处理的 Promise 拒绝时触发;

(7)onThemeChange(Object object):系统切换主题时触发。

小程序页面生命周期,前端,前端,javascript,开发语言,微信小程序

// app.js  App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果
App({
  onLaunch (options) {
    console.log(options);
  },
  onShow (options) {
    console.log(options);
  },
  onHide () {
    console.log();
  },
  onError (msg) {
    console.log(msg)
  },
})

2、页面生命周期

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

(1)onLoad(Object query):页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数;

        参数:

名称 类型 说明
query Object 打开当前页面路径中的参数

(2)onShow():页面显示/切入前台时触发;

(3)onReady():页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互;

(4)onHide():页面隐藏/切入后台时触发。 如底部 tab 切换到其他页面,小程序切入后台等;

(5)onUnload():页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

(6)onPullDownRefresh():监听用户下拉刷新事件。

  • 需要在app.json的window选项中或页面配置中开启enablePullDownRefresh
  • 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
  • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

(7)onReachBottom():监听用户上拉触底事件。

(8)onPageScroll(Object object):监听用户滑动页面事件。

(9)onAddToFavorites(Object object):监听用户点击右上角菜单“收藏”按钮的行为,并自定义收藏内容。

(10)onShareAppMessage(Object object):监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容

(11)onShareTimeline():监听右上角菜单“分享到朋友圈”按钮的行为,并自定义分享内容。

小程序页面生命周期,前端,前端,javascript,开发语言,微信小程序

 文章来源地址https://www.toymoban.com/news/detail-601702.html

// 页面生命周期
  onLoad(){
    console.log("onLoad-------生命周期回调—监听页面加载【请求页面初始化数据】");
  },
  onShow(){
    console.log("onShow-------生命周期回调—监听页面显示");
  },
  onReady(){
    console.log("onReady-------生命周期回调—监听页面初次渲染完成");
  },
  onHide(){
    console.log("onHide--------生命周期回调—监听页面隐藏");
  },
  onUnload(){
    console.log("onUnload-----------生命周期回调—监听页面卸载");
  },
  onPullDownRefresh(){
    console.log("onPullDownRefresh-----监听用户下拉动作");
  },
  onReachBottom(){
    console.log("onReachBottom-------页面上拉触底事件的处理函数");
  },
  onShareAppMessage(){
    console.log("onShareAppMessage---------用户点击右上角转发");
  },
  onShareTimeline(){
    console.log("onShareTimeline-----------用户点击右上角转发到朋友圈");
  },
  onAddToFavorites(){
    console.log("onAddToFavorites----------用户点击右上角收藏");
  },
  onPageScroll(){
    console.log("onPageScroll-----------页面滚动触发事件的处理函数");
  },
  onTabItemTap(){
    console.log("onTabItemTap-----------当前是 tab 页时,点击 tab 时触发");
  }

3、全局生命周期以及页面生命周期的触发顺序

小程序页面生命周期,前端,前端,javascript,开发语言,微信小程序

1、首次进入小程序,全局生命周期加载

 小程序页面生命周期,前端,前端,javascript,开发语言,微信小程序

 2、页面生命周期加载

小程序页面生命周期,前端,前端,javascript,开发语言,微信小程序

 小程序页面生命周期,前端,前端,javascript,开发语言,微信小程序

 

到了这里,关于微信小程序的全局生命周期和页面生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】6天精准入门(第2天:小程序的视图层、逻辑层、事件系统及页面生命周期)

    框架的视图层由 WXML 与 WXSS 编写, 由组件来进行展示 。 将 逻辑层的数据反映成视图 ,同时将 视图层的事件发送给逻辑层 。 WXML (WeiXin Markup language) 用于描述页面的结构。 WXS (WeiXin Script) 是小程序的一套脚本语言,结合 WXML ,可以构建出 页面的结构 。 WXSS (WeiXin Style Sheet)

    2024年02月08日
    浏览(35)
  • 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序

    文档 页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle 组件生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle 经测试,得出结论: H5和微信小程序的生命周期函数调用顺序不一致 一般情况下,主要使用的周期函数如下,他们的执行顺序是固定的 页面 组件

    2024年02月08日
    浏览(43)
  • 微信小程序生命周期

    必须在 app.js 中调用,必须调用且只能调用一次。 onLaunch : 小程序初始化完成时触发,全局只触发一次。 云开发的初始化 方便其他页面直接调用云开发的SDK 发送请求获取用户的个人信息 方便其他页面使用 获取本地存储数据 方便其他页面使用 onShow :小程序启动或切前台显

    2023年04月16日
    浏览(35)
  • 微信小程序——生命周期

    微信小程序有以下几个生命周期函数: onLaunch :小程序初始化时触发,只会执行一次。可以在此函数中进行全局的初始化操作。 onShow :小程序启动或从后台进入前台显示时触发。可以在此函数中执行需要在小程序显示时进行的逻辑操作。 onHide :小程序从前台进入后台时触

    2024年02月09日
    浏览(37)
  • 微信小程序 生命周期

    在小程序中,生命周期分为两类 应用生命周期 指小程序从启动-运行-销毁的过程 页面生命周期 特指小程序页面的加载-渲染-销毁的过程 生命周期函数是由小程序框架提供的内置函数,会自动按次序执行,生命周期函数允许程序员在特定的时间点执行某些特定的操作,比如,

    2024年02月13日
    浏览(30)
  • 微信小程序 —— 生命周期

    小程序的生命周期,写在对象中。 全局 == 放在 app.js 中的 App({})中;单个页面 == 放在对应 js 文件中的 Page({})。 ⚠️注意:App({})必须在全局的app.js中调用,必须调用且只能调用一次。 onLaunch  —— 小程序初始化时触发,只触发一次(重新加载即触发) onShow —— 页面显示时

    2024年01月17日
    浏览(33)
  • 微信小程序的生命周期

    生命周期(Life Cycle)是指一个对象从创建 - 运行 - 销毁的整个阶段,强调的是一个时间段。 我们可以把每个小程序运行的过程,也概括为生命周期: 小程序的启动,表示 生命周期的开始 小程序的关闭,表示 生命周期的结束 在小程序中,生命周期分为两类,分别是: ①应

    2024年02月03日
    浏览(35)
  • 微信小程序——生命周期详解(代码解读)

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——使

    2024年02月07日
    浏览(34)
  • 微信小程序的组件的生命周期

    小程序组件可用的全部生命周期如下表所示。 在小程序组件中,最重要的生命周期函数有 3 个,分别是 created、attached、detached。它们各自的特点如下: 1 组件实例刚被创建好的时候,created 生命周期函数会被触发 此时还不能调用 setData 通常在这个生命周期函数中,只应该用于

    2024年02月09日
    浏览(33)
  • 微信小程序运行机制和生命周期

    一. 运行机制 首先了解下小程序的运行机制,小程序从启动到最终被销毁,会经历很多不同的状态,小程序在不同状态下会有不同的表现。大致运行机制如下图。 小程序生命周期图 接下来我们是图中概念讲解,项目中也会经常遇到。 1)小程序的启动 通常来说,小程序启动

    2024年02月13日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包