【微信小程序】小程序应用和页面生命周期

简介: 【微信小程序】小程序应用和页面生命周期

什么是生命周期


生命周期(Life Cycle)是指一个对象从创建→>运行>销毁的整个阶段,强调的是一个时间段。如:


  • 张三出生,表示这个人生命周期的开始


  • 张三离世,表示这个人生命周期的结束


  • 中间张三的一生,就是张三的生命周期


我们可以把每个小程序运行的过程,也概括为生命周期:


  • 小程序的启动,表示生命周期的开始


  • 小程序的关闭,表示生命周期的结束


  • 中间小程序运行的过程,就是小程序的生命周期


生命周期的分类


在小程序中,生命周期分为两类,分别是:


  • 应用生命周期


特指小程序从启动->运行->销毁的过程


  • 页面生命周期


特指小程序中,每个页面的加载->渲染->销毁的过程


其中,页面的生命周期范围较小,应用程序的生命周期范围较大:



生命周期函数


生命周期函数:是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。


生命周期函数的作用:允许程序员在特定的时间点,执行某些特定的操作。例如,页面刚加载的时候,可以在onLoad生命周期函数中初始化页面的数据。


注意:生命周期强调的是时间段,生命周期函数强调的是时间点。


小程序中的生命周期函数分为两类,分别是:


  • 应用的生命周期函数


特指小程序从启动->运行-→>销毁期间依次调用的那些函数


  • 页面的生命周期函数


特指小程序中,每个页面从加载->渲染-→>销毁期间依次调用的那些函数


小程序的应用生命周期函数


小程序的应用生命周期函数需要在app.js 中进行声明。如:


App({
  /**
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
   */
  onLaunch: function () {
      console.log("小程序启动!");
  },
  /**
   * 当小程序启动,或从后台进入前台显示,会触发 onShow
   */
  onShow: function (options) {
      console.log('小程序正在前台运行!');
  },
  /**
   * 当小程序从前台进入后台,会触发 onHide
   */
  onHide: function () { 
      console.log("小程序进入后台运行!");
  },
  /**
   * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
   */
  onError: function (msg) {
  }
})


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


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


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


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


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


属性 类型 描述 触发时机
onLaunch Function 监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。
onShow Function 监听小程序显示 当小程序启动,或从后台进入前台显示,会触发 onShow
onHide Function 监听小程序隐藏 当小程序从前台进入后台,会触发 onHide
onError Function 错误监听函数 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,上面的getPics就是函数, globalName是数据,这里面的函数和数据都是全局的。调用方式:在Pager中通过getApp()方法得到App对象并获得全局的数据和调用全局的函数


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


小程序的页面生命周期函数


小程序的页面生命周期函数需要在页面.js 中进行声明。如:


Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log('本地生活页面加载完毕');
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        console.log("初次渲染完毕!");
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        console.log("页面显示完成");
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
        console.log("页面已被隐藏!");
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        console.log("GG");
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        console.log('正在刷新!');
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        console.log('正在加载更多!');
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        console.log('用户正在分享!');
    }
})


  1. 小程序注册完成后,加载页面,触发onLoad方法。


  1. 页面载入后触发onShow方法,显示页面。


  1. 首次显示页面,会触发onReady方法,渲染页面元素和样式,一个页面只会调用一次。


  1. 当小程序后台运行或跳转到其他页面时,触发onHide方法。


  1. 当小程序有后台进入到前台运行或重新进入页面时,触发onShow方法。


  1. 当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页
  2. wx.navigateBack(),触发onUnload


函数 说明 作用
onLoad 生命周期回调—监听页面加载 发送请求获取数据
onShow 生命周期回调—监听页面显示 请求数据
onReady 生命周期回调—监听页面初次渲染完成 获取页面元素(少用)
onHide 生命周期回调—监听页面隐藏 终止任务,如定时器或者播放音乐
onUnload 生命周期回调—监听页面卸载 终止任务


应用生命周期与页面生命周期之间的交互



  1. 小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。


  1. 当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。


  1. 当小程序从后台进入到前台,先执行应用onShow方法再执行页面onShow方法。


实例演示:



监听事件:


目录
相关文章
|
14天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
249 7
|
4月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
96 1
|
21天前
|
存储 小程序 前端开发
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
185 12
|
1月前
|
JSON 小程序 UED
微信小程序 app.json 配置文件解析与应用
本文介绍了微信小程序中 `app.json` 配置文件的详细
176 12
|
3月前
|
存储 缓存 开发框架
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手,综合运用各种优化手段。通过不断地优化和改进,能够显著提升小程序的性能,为用户带来更流畅、更高效的使用体验。
101 3
|
3月前
|
人工智能 小程序 算法
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
181 0
|
4月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
101 5
|
4月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1784 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
4天前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
16天前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2666 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程