NoteZ_技术博客 NoteZ_技术博客
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)

NoteZ_技术博客

前端界的小学生
🏠 首页
  • 📚 Web技术
  • 📋 Npm笔记
  • 📑 Markdown
  • 📄 Git笔记
  • 📝 Nginx文档
  • 📓 Linux文档
  • 📖 技术文档
  • 📜 其他文档
  • 🧊 NodeJs
  • 🎡 Express
  • 🔥 Rust
  • 🎉 Koa2
  • 🍃 MongoDB
  • 🐬 MySql
  • 🥦 Oracle
  • 🍁 Python
  • 🍄 JavaScript
  • 🌰 CSS
  • 🧄 HTML
  • 🥑 Canvas
  • 🌽 Nuxt
  • 🍆 React
  • 🥜 Vue
  • 🧅 TypeScript
  • 🌶️ AI
  • 📘 分类
  • 📗 标签
  • 📙 归档
⚜️ 在线编辑 (opens new window)
  • 📁 站点收藏
  • 📦 前端组件库
  • 📊 数据可视化
  • 🌈 开源插件
  • 🎗️ 关于我
  • 🔗 友情链接
GitHub (opens new window)
  • Web技术

  • Git笔记

  • Linux文档

  • Markdown

  • Nginx文档

  • Npm笔记

  • 技术文档

  • 其他文档

    • 解决 bash_wget 未找到命令的解决办法
    • CentOS7 常见问题应对,如何升级make和gcc版本
    • CodeMirror代码编辑器实现自定义提示功能增强版(支持搜索、调用接口查询提示内容)
    • CSS 滚动条样式
    • d3 svg 基本图形绘制
    • d3.js中update,enter,exit的概念
    • dat.gui 基本使用方法
    • echarts 使用案例(demo)
    • jsplumb 中文基础教程
    • Linux服务器(centos7)使用LibreOffice将Word转换PDF文档出现中文乱码或方格解决方法
    • npm install 报错 npm ERR code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR errno UNABLE_TO_VERIFY_LEA 解决
    • Npm 清除缓存
    • Npm设置淘宝镜像
    • NPS内网穿透安装方法
    • ThreeJs 基础入门
    • unable to verify the first certificate 原因及解决方法
    • vue 安装node-sass报错解决方案(缺少python2.7支持)
    • windows下安装 stable-diffusion-webui 步骤
    • yarn的安装与使用
    • 关于微信支付 WeixinJSBridge.invoke 、 wx.chooseWXPay使用方法
    • 内网穿透的几款工具汇总
    • 前端使用 swd-deploy 自动化部署项目到服务器
    • 常用工具集(utils.js)
    • 开源项目大杂烩
    • 微信小程序-APP生命周期与运行机制总结
      • 微信小程序运行机制
      • 关于小程序 App() 函数注册
      • App()函数与参数说明
      • page 页生命周期函数
    • 微信小程序踩坑之布局适配单位(rpx、px、vw、vh)
    • 服务器常用的状态码
    • 解决google浏览器翻译无法使用的问题
    • 解决使用 Gitalk 登录授权报错的问题
    • 解决在使用 stable-diffusion-webui 时,安装 gfpgan 失败的方案(windows下的操作)
    • 通过 js 进行 shapefile 文件解析渲染方法
    • 部署脚本 deploy.sh
    • Tauri打包慢或者报错问题解决方法
    • Ubuntu和Nginx搭配Certbot配置SSL证书https访问网站
    • Centos下yum无法正常使用
    • Linux 系统下通过 Let‘s Encrypt 生成免费 https 证书的步骤
    • Mongo 风格的查询对象映射到 SQL 查询的 Node.js 库 json-sql
    • CentOS7安装与卸载anaconda3基础步骤
  • 前端开发
  • 其他文档
NoteZ
2019-10-09
目录

微信小程序-APP生命周期与运行机制总结

自从接触微信小程序到现在也有一段时间了,在学校的时候本来想着将之前做的一个关于小程序的项目写一个文档出来做下总结,可是事愿人为,无奈,现在终于有时间来整理温故一下了。之前,自己在查阅资料的时候,无意间看到了“微信小程序-代码构成”这篇博文,讲的很好,主要讲的是微信小程序代码的结构构成,有兴趣的小伙伴可以去看一下。而本篇文章主要从自己在开发小程序时遇到的一些问题,以及小程序的生命周期和运行机制来做下总结。

# 微信小程序运行机制

根据官网描述:小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。 假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。

  1. 小程序没有重启的概念,当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后(目前是5分钟)会被微信主动销毁

  2. 在 iOS 上,当微信客户端在一定时间间隔内(目前是 5 秒)连续收到两次及以上系统内存告警时,会主动进行小程序的销毁,并提示用户 「该小程序可能导致微信响应变慢被终止」。

  3. 建议小程序在必要时使用 wx.onMemoryWarning 监听内存告警事件,进行必要的内存清理。

# 关于小程序 App() 函数注册

我们在使用 App( )函数进行小程序的注册时必须在 app.js 中进行注册,但值得注意的是不能注册多个,当小程序首次打开时会通过 app.json 配置初始化 App,初始化完成后应用线程开始执行 app.js 中 onLauch() 函数和 onShow() 函数,然后才会执行页面中的 onLoad() 函数和 onShow() 函数,每次进入后台(当用户点击左上角关闭,或者按了设备 Home 键离开微信)都会先执行页面中的 onHide() 函数再执行 app.js 中的 onHide() 函数,每次进入前台都会先执行 app.js 中 onShow() 函数再执行页面中的 onShow() 函数。

# App()函数与参数说明

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

App({
    //onLaunch 函数--监听小程序初始化 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
    onLaunch: function (options) {
        console.log("--------------------------------");
        console.log(options.path);                   //打开小程序的路径
        console.log(options.query);                  //打开小程序的query
        console.log(options.scene);                  //打开小程序的场景值
        console.log(options.shareTicket);            //shareTicket,详见 获取更多转发信息
        console.log(options.referrerInfo);           //当场景为由从另一个小程序或公众号或App打开时,返回此字段
        console.log(options.referrerInfo.appId);     //来源小程序或公众号或App的 appId,详见下方说明
        console.log(options.referrerInfo.extraData); //来源小程序传过来的数据,scene=1037或1038时支持
        console.log("--------------------------------");
        console.log("app onLaunch");
    },
    //onShow 函数--监听小程序显示    当小程序启动,或从后台进入前台显示,会触发 onShow
    onShow: function (options) {
        console.log("--------------------------------");
        console.log(options.path);                   //打开小程序的路径
        console.log(options.query);                  //打开小程序的query
        console.log(options.scene);                  //打开小程序的场景值
        console.log(options.shareTicket);            //shareTicket,详见 获取更多转发信息
        console.log(options.referrerInfo);           //当场景为由从另一个小程序或公众号或App打开时,返回此字段
        console.log(options.referrerInfo.appId);     //来源小程序或公众号或App的 appId,详见下方说明
        console.log(options.referrerInfo.extraData); //来源小程序传过来的数据,scene=1037或1038时支持
        console.log("--------------------------------");
        console.log("app onShow");
    },
    //onHide 函数--监听小程序隐藏    当小程序从前台进入后台,会触发 onHide
    onHide: function () {
        console.log("app onHide");
    },
    //onError 函数    当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
    onError: function (msg) {
        console.log(msg);
    },
    //onPageNotFound 页面不存在监听函数  当小程序出现要打开的页面不存在的情况,会带上页面信息回调该函数
    onPageNotFound: function (msg) {
        console.log("app onPageNotFound");
    },
    //全局变量
    globalData: 'I am global data'
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

# page 页生命周期函数

page 页生命周期函数主要有 onLoad()、onReady()、onShow()、onHide()、onUnload() 五个页面生命周期函数,其分别是页面加载、就绪、渲染、隐藏、卸载时被调用。 注意 app 中的生命周期和页面的生命周期是相互交叉执行的,后面我会详细介绍。

Page({
    data: {
        names: "name1"
    },
    onLoad: function (options) {
        // 生命周期函数--监听页面加载 一个页面只会调用一次。
        // 接收页面参数 可以获取 wx.navigateTo 和 wx.redirectTo 及 <navigator/> 中的 query。
        console.log("onLoad");
    },
    onReady: function () {
        // 生命周期函数--监听页面初次渲染完成 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。
        console.log("onReady");
    },
    onShow: function () {
        // 生命周期函数--监听页面显示 每次打开页面都会调用一次。
        console.log("onShow");
    },
    onHide: function () {
        // 生命周期函数--监听页面隐藏
        console.log("onHide");
    },
    onUnload: function () {
        // 生命周期函数--监听页面卸载
        console.log("onUnload");
    },
    onPullDownRefresh: function () {
        // 页面相关事件处理函数--监听用户下拉动作
        console.log("onPullDownRefresh");
    },
    onReachBottom: function () {
        // 页面上拉触底事件的处理函数
        console.log("onReachBottom");
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

注意

  1. 不要在定义于 App() 内的函数中调用 getApp() ,使用 this 就可以拿到 app 实例。

  2. 不要在 onLaunch 的时候调用 getCurrentPage(),因为此时 page 还没有生成。

  3. 通过 getApp() 获取实例之后,不要私自调用生命周期函数。

#WX
上次更新: 2024/01/30, 00:35:17
开源项目大杂烩
微信小程序踩坑之布局适配单位(rpx、px、vw、vh)

← 开源项目大杂烩 微信小程序踩坑之布局适配单位(rpx、px、vw、vh)→

最近更新
01
Gitea数据备份与还原
03-10
02
Linux 中使用 rsync 同步文件目录教程
03-10
03
Linux 使用 rsync 互相传输同步文件的简单步骤
03-08
更多文章>
Theme by Vdoing | Copyright © 2019-2025 NoteZ,All rights reserved | 冀ICP备2021027292号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式