微信小程序 - 生命周期篇

马丁路德 等级 736 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中包含有指明是白天模式或者是黑夜模式的参数
  }
}) 

效果

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

微信小程序 - 生命周期篇

未完待续

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

收藏
评论区

相关推荐

微信小程序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
微信小程序部分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.
uni-app - 实现热更新及时提醒用户更新
1.原因分析在小程序更新开发版本之后,用户本地并没有对之前版本的小程序进行删除,那么再进入小程序的时候的版本是不会发生变化的,这是由于发版是异步执行,因此新版本将会覆盖的比较慢,本质是小程序的启动方式分为两种,冷启动与热启动。冷启动:指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。 热启动:指用户已经打开过某
推荐几个微信小程序开发小技巧
前段时间在下开发了个微信小程序,开发过程中总结了一些我觉得对我有用的小技巧,提炼出来,相当于一个总结复盘,也希望可以帮助到大家。如果对大家确实有帮助,别忘了点赞哦 🌟 ~1\. 开发中可能遇到的坑以及 Tips本来想写个小技巧的,结果我总结了一堆坑,没上手之前完全想象不到微信小程序的开发体验是如此之差、如此之烂,从微信
微信小程序 - 生命周期篇
为什么需要掌握小程序的生命周期当你的领导张小三给你说: 这个请求应该在应用启动的时候发起呢 页面跳转的时候就要取消异步任务哦 应用隐藏的时候记得关闭一下定时器哈那时候的你会一脸懵逼和不知所措还无从下手吗综上所述:我们理所当然的要对微信小程序的生命周期做到滚瓜烂熟,只有这样才能让领
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
PHP 实现微信小程序敏感图片、内容检测接口
####主要是为了调用微信小程序msgSecCheck、imgSecCheck接口。 先附上小程序接口说明文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/sec-check/msgSecCheck.html 1、首先要获取a
PHP微信小程序支付——签名错误
![](https://static.oschina.net/uploads/space/2018/0509/141657_Tqix_3477605.png) 先分清几个概念:微信公众平台、微信开放平台、微信商户平台 1.微信公众平台、微信开放平台、微信商户平台是三个不同的平台 2.微信公众平台:用于公众号、小程序等等的设置平台,包括APPID、APP
1小时搭建微信小程序后端
CoNami小程序Demo端到端开发指南 ==================== 1\. 注册登录微信公众平台 -------------- 登录[https://mp.weixin.qq.com,里面有详细的指引,这里就不赘述了。这里注册最后得到的比较重要的东西包括两个](https://www.oschina.net/action/GoToLink
Spring Boot从零入门5_五脏俱全的RESTful Web Service构建
本文属于原创,转载注明出处,欢迎关注微信小程序`小白AI博客` 和微信公众号`别打名名`或者网站 https://xiaobaiai.net 或者我的CSDN http://blog.csdn.net/freeape ![](https://oscimg.oschina.net/oscnet/378afc2c-41cd-4b4b-a99a-cadb9d83
three.js
第1章 课程介绍 介绍了微信小游戏的概念以及相关的由来,从宏观上对于微信小游戏的定位和价值有一个明确的认识 第2章 微信小游戏平台与特性 讲了微信小游戏平台的相关特性,包括微信小游戏工程的建立,微信小游戏开发工具的详细使用,以及微信小游戏相关API的实战等 第3章 THREEJS与WebGL核心概念 通过理论和实战,讲解了什么是webgl、什