微信小程序 - 生命周期篇

马丁路德 等级 388 0 0

为什么需要掌握小程序的生命周期

当你的领导张小三给你说:

  • 这个请求应该在应用启动的时候发起呢
  • 页面跳转的时候就要取消异步任务哦
  • 应用隐藏的时候记得关闭一下定时器哈

那时候的你会一脸懵逼不知所措无从下手

综上所述:

我们理所当然的要对微信小程序的生命周期做到滚瓜烂熟,只有这样才能让领导张小三对我们刮骨相看,当一个名正言顺的打工人。

生命周期的概念

所谓的生命周期 我们可以有以下结论:

  • 一个应用的生老病死的过程
  • 一个应用从创建到销毁的过程

太抽象了 ? 来个大白话吧

  • 一堆会在特定时期执行的函数 !!!
  • 一堆会在特定时期执行的函数 !!!
  • 一堆会在特定时期执行的**函数 **!!!

重复以上三遍!!!!

如何学习生命周期

带着两个角度去学习即可:

  1. 这些生命周期函数会在什么时候执行 ?
  2. 有什么用 ?

有几类生命周期 ?

微信小程序中一共有三类生命周期,它们分别是:

  • 应用级别的生命周期

  • 页面级别的生命周期

  • 组件基本的生命周期

以下SHOWTIME


微信小程序 - 生命周期篇

应用生命周期

官网链接

属性 默认值 说明
onLaunch 生命周期回调——监听小程序初始化。
onShow 生命周期回调——监听小程序启动或切前台。
onHide 生命周期回调——监听小程序切后台。
onError 错误监听函数。
onPageNotFound 页面不存在监听函数。
onUnhandledRejection 未处理的 Promise 拒绝事件监听函数。
onThemeChange 监听系统主题变化

onLaunch

当微信小程序一启动的时候就会触发

触发时机

当一打开小程序的时候就会触发 需要注意的是 当小程序被隐藏然后重新打开的时候 是不会重新触发的(被销毁再打开才会)

作用

可以在应用启动的时候来做初始化 如 :

  1. 云开发的初始化 方便其他页面直接调用云开发的SDK
  2. 发送请求获取用户的个人信息 方便其他页面使用
  3. 获取本地存储数据 方便其他页面使用

代码

app.js

App({
  /**
   * 应用一启动就触发
   */
  onLaunch() {
    console.log("onLaunch 应用一启动就触发");
  }
}) 

效果

微信小程序 - 生命周期篇

onHide

当整个小程序隐藏的时候就会触发

触发时机

当微信小程序被隐藏的时候就会触发,如 切换到其他的App,xxxhub支付宝

作用

可以停止一些正在执行的操作 如

  1. 暂停定时器
  2. 暂停视频音频的播放

代码

App({
  /** 
   * 应用一隐藏就触发
   */
  onHide(){
    console.log("onHide 应用一隐藏就触发");
  }
}) 

效果

微信小程序 - 生命周期篇

onShow

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

触发时机

当小程序第一次显示或者当应用重新被用户看见(先触发hide)的时候触发

作用

可以有以下途径

  1. 重新启动定时器 继续定时执行功能
  2. 重新触发异步 获取新的数据
  3. 重新启动播放器等

代码

App({
  /**
   * 应用一隐藏就触发
   */
  onHide(){
    console.log("onHide 应用一隐藏就触发");
  },
  /**
   * 应用第一次显示或者重新显示就触发
   */
  onShow(){
    console.log("onShow 应用第一次显示或者重新显示");
  }
}) 

效果

微信小程序 - 生命周期篇

onError

当小程序运行出错的时候就触发

触发时机

当微信小程序正常运行,出现错误的时候触发

作用

可以用做:

  1. 收集错误信息 发送到后台 进行错误日志的记录
  2. 弹出窗口提示用户 程序出错了不可怕 抱抱

代码

App({
  /**
   * 应用一启动就触发
   */
  onLaunch() {
    // 这个方法不存在的哦  那么程序就会报错
    this.helloworld();
  },
  /**
   * 当程序报错的时候触发
   * @param {Object} err 错误信息
   */
  onError(err) {
    console.log("onError 程序一报错就触发");
    console.log(err);
  }
}) 

效果

微信小程序 - 生命周期篇

onPageNotFound

当页面不存在的时候就会触发

触发时机

这个触发的时机有点点繁琐,如果只是简单的做点击页面 跳转到一个不存在的页面 那么该生命周期是不好触发的 如下列代码 是不会触发的。

<navigator url="/aaa/bbb/ccc/ddd" >我跳了啊</navigator> 

要满足一些条件才会触发 举个例子

  1. 如手机扫描二维码进入小程序
  2. 二维码指定的页面路径是 index
  3. 但是后面程序中删除了index页面 改为 了 home 做为首页
  4. 那么用户扫码的时候就会提示说页面不存在

作用

  1. 监听报错,弹出窗口提示用户
  2. 监听报错,重新跳转页面

代码

App({
  /**
   * 当用户扫码二维码进入小程序 发现页面不存在的时候就触发
   */
  onPageNotFound(){
    console.log("onPageNotFound 当用户扫码二维码进入小程序 发现页面不存在的时候就触发");
  }
}) 

效果

这个效果我们可以通过 指定一个不存在的页面做为入口 来模拟

  1. 新增一个编译模式(所谓编译模式只是指定小程序的入口路径而已)
  2. 随便指定一个存在的路径
  3. 查看页面效果

微信小程序 - 生命周期篇

onUnhandledRejection

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

触发时机

当发现未被捕获处理的 reject 时 触发

作用

用在统一捕获处理 可以在该生命周期中处理错误情况 ,一般是由于异步代码出错导致的

代码

App({
  /**
   * 应用一启动就触发
   */
  onLaunch() {
    new Promise((resolve,reject)=>{
      // 故意触发reject 
      reject({"message":"请求参数不正确"})
    })
  },
  /**
   * 当发现未被捕获的reject时触发
   */
  onUnhandledRejection(err){
    console.log("onUnhandledRejection 当发现未被捕获的reject时触发");
    console.log(err);
  }
}) 

效果

微信小程序 - 生命周期篇

注意

如果 自己 捕获了 reject 那么 该生命周期是不会触发的

App({
  /**
   * 应用一启动就触发
   */
  onLaunch() {
    new Promise((resolve,reject)=>{
      // 故意触发reject 
      reject({"message":"请求参数不正确"})
    }).catch(err=>{
      // catch了 reject 那么 onUnhandledRejection 就不会触发了
      console.log("自己捕获了reject");
      console.log(err);
    })
  },

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

微信小程序 - 生命周期篇

onThemeChange

当手机系统中的模式切换时触发 如 开启黑夜模式

触发时机

需要手机拥有 黑夜模式 或者 暗黑模式 当其切换时,该生命周期便会触发

作用

当然是让小程序可以跟着主题的切换 也改变小程序的UI风格,使之体验更好!

代码

需要注意的是 要在 app.json 文件中开启 "darkmode": true时才会触发此事件

详细的如何跟随主题切换来修改小程序的风格请看 链接,这里只演示触发时机。

app.json

{
  ...
  "darkmode": true
} 

app.js

App({
  /**
   * 当手机系统的切换模式时触发
   */
  onThemeChange(theme){
    console.log("onThemeChange 当手机系统的切换模式时触发");
    console.log(theme);// theme中包含有指明是白天模式或者是黑夜模式的参数
  }
}) 

效果

这个效果我们可以在模拟器中演示

微信小程序 - 生命周期篇

未完待续

对我自己说 今天晚上就先到这吧 不早了 你辛苦了 先歇歇

收藏
评论区

相关推荐

微信小程序支付功能全流程实践
前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能。在小程序内可调用微信的API完成支付功能,方便、快捷。小程序开发者在开发小程序时,支付流程是必然要接触到,今天胡哥就小程序支付的全流程为大家一一细说,让小伙伴能快速得掌握小程序支付能力,避免踩坑! 知己知彼,方能百战不殆 小程序支付流程图 小程序支付交互流程图(https:/
微信小程序modal
首先创建一个组件component,组件命名可以为modal modal.wxml的内容为 <view class'modalmask' wx:if'{{show}}' bindtap'clickMask' <view class'modalcontent' <scrollview scrolly class'mainc
微信小程序wxml使用substring
首先创建subutils.wxs文件 var sub function (val, start0, end17) { if (val.length 0 || val undefined) { return } if (val.length end) { return val.substring(start
微信小程序轮播图
实现效果 wxml代码 <view style"height:20rpx;"</view <view class"swiper"
微信小程序苹果机wx.showModal()
最近做项目中,发现使用wx.showModal()苹果机出现取消文字不显示问题,纠正后显示正确 wx.showModal({ title: '提示', content:'登录后体验更多功能' }) wx.showModal({ cancelText: '取消', confi
微信小程序验证url地址
笔记类 var that this that.optional()是验证是否为空方法 url(value) { return that.optional(value) || /^(?:(?:(?:https?|ftp):)?//)(?:S(?::S)?@)?(?:
微信小程序部分api 会触发 onShow onHide
解决部分api触发小程序 onShow onHide 首先要明白 微信小程序的 onShow() onHide()分为页面级的和应用级的,应用级的就是app.js里面的那几个,页面级的就是pages里的 当使用了下列api时,均会触发页面级和应用级的onShow onHide 1. 点击右上角小圆点关闭小程序。 2. 图片预览:wx.preview
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
微信小程序 - 引入字体图标
网站图标要想做到清晰无锯齿,使用普通图片或者雪碧图都很难达到这个目的,一般我们都会引入字体图标(svg转font,使用图标像使用字体一样,详见《web页面使用字体图标》,那么如何在微信小程序中使用自定义图标呢?请看详细步骤:1、从上选择喜欢的图标加入购物车,在购物车弹窗中点击“下载代码”后,解压阿里图库 加入购物车购物车 下载代码图标文件内容2.、进入导入第
uni-app - 实现热更新及时提醒用户更新
1.原因分析在小程序更新开发版本之后,用户本地并没有对之前版本的小程序进行删除,那么再进入小程序的时候的版本是不会发生变化的,这是由于发版是异步执行,因此新版本将会覆盖的比较慢,本质是小程序的启动方式分为两种,冷启动与热启动。冷启动:指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。 热启动:指用户已经打开过某
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
推荐几个微信小程序开发小技巧
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 🌟 ~1\. 开发中可能遇到的坑以及 Tips本来想写个小技巧的,结果我总结了一堆坑,没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂,从微信
微信小程序 - 生命周期篇
为什么需要掌握小程序的生命周期当你的领导张小三给你说: 这个请求应该在应用启动的时候发起呢 页面跳转的时候就要取消异步任务哦 应用隐藏的时候记得关闭一下定时器哈那时候的你会一脸懵逼和不知所措还无从下手吗综上所述:我们理所当然的要对微信小程序的生命周期做到滚瓜烂熟,只有这样才能让领
计划助手V1.0-微信小程序(QQ小程序)-源代码分享
疫情期间在家感觉好无聊啊,于是利用空闲时间做了一个用来记录和管理小目标时间的小程序,命名为《小沙漏》。 QQ版本小程序同步上线,QQ小程序叫《时间小沙漏》,欢迎大家前来体验,后期也会添加其他的新功能哦 【区别】:微信小程序的代码与QQ小程序的源码是不一样的。 微信小程序的源码基于微信小程序云开发,需要在有网络的情况下使用,具有同步功能,所有记录在删除小
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option