前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序生命周期

小程序生命周期

作者头像
流眸
发布2021-03-15 21:23:12
6560
发布2021-03-15 21:23:12
举报

1. 生命周期

1.1 什么是生命周期?

生命周期就是指一个对象的生老病死。基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程。

小程序生命周期【点击放大】

1.2 用途

在技术中心,我们可以理解生命周期为从一个应用从创建到销毁的过程。在项目层面,我们每一个完整的项目中都会在不同时间不同位置处理不同问题及不同需求,也就是在特点时间执特定函数

2. 小程序的生命周期

根据官网介绍,小程序生命周期包含7个阶段:

阶段

类型

最低版本

说明

onLaunch

function

/

监听小程序初始化

onShow

function

/

监听小程序启动或切前台

onHide

function

/

监听小程序切后台

onError

function

/

错误监听函数

onPageNotFound

function

1.9.90

页面不存在监听函数

onUnhandleRejection

function

2.10.0

未处理的 Promise 拒绝事件监听函数

onThemeChange

function

2.11.0

监听系统主题变化

注:

接受一个 Object 参数,其指定小程序的生命周期回调等。

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

2.1 onLaunch

触发时机:

小程序一启动时触发,被隐藏重新打开不触发,被销毁再打开才会触发。

作用:

  • 做初始化使用
  • 云开发的初始化
  • 发送请求获取用户个人信息
  • 获取本地存储数据等

代码示例:

代码语言:javascript
复制
App({
    // 小程序一启动时触发,被隐藏重新打开不触发,被销毁再打开才会触发
    onLaunch (options) {
        console.log('触发了 onLaunch');
    },
})

2.2 onShow

触发时机:

与 onHide 是一对,当应用重新被显示的时候或者第一次启动时都会触发

作用:

  • 重新启动定时器等执行类模块
  • 重新出发异步请求获取最新数据
  • 重新启动播放器等

代码示例:

代码语言:javascript
复制
App({
    // 当应用重新被显示的时候或者第一次启动时都会触发
    onShow (options) {
        console.log('触发了 onShow');
    },
})

2.3 onHide

触发时机:

当整个小程序隐藏时会触发,如切换到其他APP

作用:

  • 可以停止一些正在执行操作,如暂停定时器、暂停音视频播放等

代码示例:

代码语言:javascript
复制
App({
    // 当整个小程序隐藏时会触发,如切换到其他APP
    onHide (options) {
        console.log('触发了 onHide');
    },
})

2.4 onError

触发时机:

小程序运行出错时触发

作用:

  • 收集错误信息,发送至后台,进行错误日志的记录
  • 进行程序出错后的操作,例如弹窗提醒等

代码示例:

代码语言:javascript
复制
App({
    // 小程序运行出错时触发
    onError (options) {
        console.log('触发了 onError');
    },
})

2.5 onPageNotFound

触发时机:

页面不存在时触发

举例:

  • 扫二维码进入小程序
  • 二维码指定路径为index
  • 后面程序中删除了index页面,修改其他页面(如home)作主页
  • 此时用户扫码,提示页面不存在,触发该周期

作用:

  • 监听报错,处理后续操作,如提示用户或者跳转新页面

代码示例:

代码语言:javascript
复制
App({
    // 页面不存在时触发
    onPageNotFound (options) {
        wx.redirectTo({
            url: 'pages/...'
        }) // 如果是 tabbar 页面,请使用 wx.switchTab
    },
})

2.5 onPageNotFound

触发时机:

页面不存在时触发

举例:

  • 扫二维码进入小程序
  • 二维码指定路径为index
  • 后面程序中删除了index页面,修改其他页面(如home)作主页
  • 此时用户扫码,提示页面不存在,触发该周期

作用:

  • 监听报错,处理后续操作,如提示用户或者跳转新页面

代码示例:

代码语言:javascript
复制
App({
    // 页面不存在时触发
    onPageNotFound (options) {
        wx.redirectTo({
            url: 'pages/...'
        }) // 如果是 tabbar 页面,请使用 wx.switchTab
    },
})

2.6 onUnhandledRejection

触发时机:

promise中的reject未被捕获处理时触发

作用:

  • 用于统一捕获处理,可以在该生命周期中处理错误情况,一般由于异步代码出错导致
  • 提示:如果自己捕获了reject那么此生命周期不会触发

代码示例:

代码语言:javascript
复制
App({
    // onLaunch
    onLaunch() {
        new Promise((resolve,reject)=>{
            // 触发reject 
            reject({"msg":"错误提示"})
        }).catch(err=>{
            // catch了 reject 那么 onUnhandledRejection 就不会触发了
            console.log("捕获reject");
            console.log(err);
        })
    },

    // promise中的reject未被捕获处理时触发
    onUnhandledRejection(err){
        console.log("onUnhandledRejection 当发现未被捕获的reject时触发");
        console.log(err);
    }
})

2.7 onThemeChange

触发时机:

手机系统的主题模式(如黑夜模式)切换时触发

作用:

  • 小程序可以随系统主题切换主题或者更换UI风格

代码示例:

代码语言:javascript
复制
App({
    // promise中的reject未被捕获处理时触发
    onThemeChange(theme){
        console.log(theme); // 'dark' | 'light'
    }
})
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-02-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 流眸 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 生命周期
    • 1.1 什么是生命周期?
      • 1.2 用途
      • 2. 小程序的生命周期
        • 2.1 onLaunch
          • 2.2 onShow
            • 2.3 onHide
              • 2.4 onError
                • 2.5 onPageNotFound
                  • 2.5 onPageNotFound
                    • 2.6 onUnhandledRejection
                      • 2.7 onThemeChange
                      相关产品与服务
                      云开发 CloudBase
                      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
                      领券
                      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档