【微信小程序】运行机制和更新机制

news2025/1/31 10:57:46

🍒观众老爷们好呀,牛牛又更文了,上文我们对部分比较常用的组件进行了讲解,作为开发者,我们还需要对小程序的运行机制和更新机制做一定的了解,那问题来了,你对它们了解多少呢?
🍒今天牛牛就带大家测一测,不了解的还不笔记做起来!

文章目录

    • 一,运行机制
      • 1.1 小程序的启动
      • 1.2 小程序前后台
      • 1.3 挂起状态
      • 1.4 小程序销毁事件
    • 二,更新机制
      • 2.1 启动时同步更新
      • 2.2 启动时异步更新
      • 2.3 开发者手动触发
    • 三,生命周期

一,运行机制

第一个说明的是小程序的运行机制,小程序从启动到最终被销毁,其实会有很多不同的步骤,小程序会经历多种状态,大致的运行机制如下图所示。
在这里插入图片描述
接下来我们开始详细的步骤讲解

1.1 小程序的启动

看上图,我们知道,小程序首先会有一个冷启动,简单讲解就是用户首次打开小程序,或者小程序经过一定时间自动销毁后被用户再次打开,这个时候,小程序需要重新加载代码,重新加载启动。

这时候可能有小伙伴会问啦,那如果还没销毁就再次启动小程序呢?这个时候就叫做热启动啦,平时使用小程序的时候,我们会发现,关闭小程序后不久重新打开,加载的速度比前者快上不少,这就是因为小程序未被销毁,是从后台状态进入前台状态,这个过程我们叫做热启动,也可以说切前台。

1.2 小程序前后台

小程序完成加载之后,会有两种状态,分别是前台状态后台状态

  • 小程序启动后,在界面展示出来的时候,该小程序就处于前台状态
  • 而当我们关闭小程序时,在一定时间内,小程序并没有真正关闭也就是销毁,而是进入所说的后台状态,后台状态下小程序依然在运行,只是部分API的使用会受到限制。这里的操作就是前图中的切后台。
  • 正常情况下,后台状态的时间不会持续很长时间,一小段时间后就会开启挂起事件,进入挂起状态(后文解释)。
  • 在销毁前,用户再次点击小程序打开,小程序就会从后台状态挂起状态重新进入前台状态这也就是我们前边说到的热启动

1.3 挂起状态

小程序在后台状态呆很短的时间后,就会切换到挂起状态,在该状态下,微信会停止该小程序JS线程的执行,小程序的内容状态会被暂时保留,事件、回调等等在小程序重新进入前台状态时才会触发。

小tip:

  • 后台并不会停止JS线程的执行,如果小程序开启了后台音乐播放地理位置等功能时,小程序不会从后台切入挂起,也就是小程序可以持续运行

1.4 小程序销毁事件

最后一个就是当挂起状态持续过久(目前是三十分钟),为了减轻资源紧张,这时候,小程序就会被销毁啦。

还有一种情况,当小程序占用系统资源过多,也会被系统销毁或者被微信客户端主动回收。

在开发中,我们可以用wx.onMemoryWarning监听内存告警事件,设置内存清理。

二,更新机制

我们知道,微信客户端会在本地缓存中缓存小程序的代码,而开发者在管理后台中会不定时发布更新的新版本小程序,那么微信客户端是怎么知道是否有新版本的呢?

其实微信客户端会有若干个时机取检查本地缓存,如果有新版本,那就进行小程序代码包的更新,但如果恰巧发布新版本后没有经过这些时机就打开小程序,那打开可能还会是旧版本的小程序。

下面牛牛来列举这些检查更新的时机

2.1 启动时同步更新

同步更新会影响到小程序的启动耗时,启动时并不一定会发生同步更新,以下两种情况,会在启动小程序时同步更新。

  • 定期检查发现新版本
    微信在运行的时候,会定期检查最近使用小程序是否具有新版本,并在下一次启动小程序时设置是否同步更新

  • 用户长时间未使用
    长时间未使用小程序,微信客户端为了小程序版本迭代正常,会对这些小程序设置启动时同步更新。

2.2 启动时异步更新

每次小程序冷启动时,都会有异步检查是否有新版本的操作,如果发现新版本,会将新版本代码进行异步下载,而不影响小程序的运行,不过这也会导致,如果启动后仍然是旧版本,只有下次启动,才会打开新版本的小程序。

2.3 开发者手动触发

微信提供了一个APIwx.getUpdateManager,可以在有新版本时提示用户重启小程序更新新版本

三,生命周期

最后就让我们以生命周期作为今天的结尾吧。

  • 生命周期可以分为程序和页面两部分,对于程序,我们首次启动小程序时,会触发onLaunch方法,当我们的小程序初始化完成后,便会触发onShow方法,页面加载并显示,此时触发显示页面的onLoadonShow方法,成功显示页面。

  • 首次显示页面,还会触发页面的onReady方法,对页面元素进行渲染,注意,该方法,一个页面只会调用一次。

  • 当小程序切入后台时,注意,小程序会先触发页面的onHide方法,将页面隐藏,再触发程序的onHide方法

  • 而当小程序从后台切入前台时,小程序会先触发程序的onShow方法,再触发页面的onShow方法,将页面显示。

这里放上一张网上的图片便于大家理解
在这里插入图片描述
本文到这里就结束啦,如果觉得对您有帮助的话,可以关注一下牛牛后续的更新,感谢您的支持!
债见~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407596.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序自定义导航栏机型适配--底部Tabbar--view高度--底部按钮适配

自定义微信小程序头部导航栏 自定义微信小程序头部导航栏,有几种方式 方式一 {"navigationStyle": "custom" // 将navigationStyle从默认default改为custom }定义此方法后,头部的导航栏会去掉,导航栏下的元素会直接向上…

‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序?npm i (npm install)安装不上的原因

启动项目时,本地有node包,但是终端提示:vue-cli-service 不是内部或外部命令,也不是可运行的程序,导致项目无法启动,如下: 原因之一是项目的npm版本较低,但是你本地的npm版本过高&am…

uniapp一键发行代码并混淆代码

第一步.在项目根目录下安装插件 npm install javascript-obfuscator -g安装完成后,javascript-obfuscator就是一个独立的可执行命令了。 javascript-obfuscator -v第二步:HbuilderX点击发行按钮,打包代码到dist文件中 小程序发行后代码会自…

微信小程序--》小程序—全局数据共享和分包

🏍️作者简介:大家好,我是亦世凡华、渴望知识储备自己的一名在校大学生 🛵个人主页:亦世凡华、 🛺系列专栏:微信小程序 🚲座右铭:人生亦可燃烧,亦可腐败&…

Code For Better 谷歌开发者之声—— 在 Windows 10 上对 Google Chrome 进行故障排除

💂 个人网站:【 海拥】【小霸王游戏机】🤟 风趣幽默的前端学习课程:👉28个案例趣学前端💅 想寻找共同学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】💬 免费且实用的计算机相关知识题库&…

小白也可以,10分钟搭建大气的Halo博客(保姆级教程)

一、博客的好处 很多程序员、职业投资人、KOL喜欢建立自己的博客系统,为的是让自己有一个知识归纳的工具,也为自己收纳的各种资料有一个线上存储的记事本。到了币圈后,虽然有很多人用Mirro、Medium等文字工具,但这些工具对于中国…

完美解决:flex布局中设置宽度被压缩的问题

问题描述: 在父级中设置了display:flex;父元素宽度不够的时候,子元素就算设置的宽度,也会被压缩; 产生原因: 当子元素设置固定宽度,如果整体宽度不足时,会把固定宽度给压缩 解决方法: 给固定宽…

uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

前言 在开发一款公司的小程序过程中,有一个需求:web端后端可以上传word文档,后端转为html字符串;小程序接收显示,并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用,所以这次…

【JavaScript】五个常用功能/案例:计时器 | 流程控制 | 闭包应用 | arguments剩余参数 | 二次封装函数

CSDN话题挑战赛第2期 参赛话题:学习笔记 🖥️ NodeJS专栏:Node.js从入门到精通 🖥️ 博主的前端之路:前端之行,任重道远(来自大三学长的万字自述) 🧧 个人社区&#xff1…

Vue2-生命周期

之前说完了Vue的基础知识,说了语法、数据代理、数据监听、计算属性、指令、过滤器等等,但是没有涉及到Vue的声明周期,其实之所以把生命周期放在后面讲,是因为,如果最开始讲生命周期,里面涉及到的概念性东西…

vue路径component使用import的方式来写 component: () => import(‘@/views/order/orderDetail‘)

以前老师教的一直是这种写法: 工作后突然看到这种写法,我蒙了 首先我们先来理解一下,路由文件里面. path里面其实就是url也就是我们写路径的,我们在网址栏所看到的. 而component则是我们所对应的页面组件.每个页面相当于一个组件.所以我们的页面的名字就是组件的名字. 方法一:普…

掌握Mock摆脱后端同学的束缚

文章目录前言Mock概述mock.js安装Mock规范Mock的使用总结前言 当下采用前后端分离模式开发Web应用已经成为气候,在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们,难道在搭建完页面后只能等待后端的接口么?…

自定义修改el-talbe show-overflow-tooltip的样式

el-table表格行有一个可使用的show-overflow-tooltip属性&#xff0c;它接受一个Boolean&#xff0c;为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。 <el-table-columnprop"address"label"地址"show-overflow-tooltip></el-table-…

Vue3、Vue2都有哪些区别

vue3和vue2版本对比&#xff1a; vue2中绝大多数的API与特性&#xff0c;在vue3中同样支持。同时&#xff0c;vue3中还新增了所特有的功能&#xff0c;并废弃了vue2中的某些旧功能。 新增的功能如&#xff1a;组合式API、多根节点组件、更好的TypeScript支持等。 废弃的功能…

jq获取和设置标签的css样式、jq给标签增加或移除class属性

1、jQuery获取和设置标签的css样式 jQuery既可以直接获取标签的css样式&#xff0c;也可以设置样式&#xff0c;包括行内、内部、外部样式&#xff1b;思路&#xff1a;先要选取这个标签&#xff0c;然后再获取或者设置样式&#xff1b;获取css属性&#xff1a;console.log($…

eclipse新建一个简单的网站(web)项目

目录前言一、新建一个简单web项目二、报错解决前言 本篇介绍怎么在eclipse中新建一个简单的web项目&#xff0c;博主是用的eclipse版本是2021-06R&#xff0c;服务器tomcat10。本篇是博主尝试自己动手搭建网站系列文章中的一篇&#xff0c;如想了解更多相关内容&#xff0c;见…

在web页面中直接播放rtsp视频流

rtsp是一种实时传输协议&#xff0c;通过各种百度了解&#xff0c;得出结论&#xff1a;浏览器是不支持播放rtsp流的&#xff0c;必须经过后端转码推流。 实现思路&#xff1a;借助node搭建转码推流服务&#xff0c;再使用JSMpeg播放。 rtsp2web是一个依赖 ffmpeg&#xff0c…

Vue页面生成PDF的方法

最近项目有个需求&#xff0c;将系统统计的数据生成分析报告&#xff0c;然后可以导出成PDF。 这种方法可以有两种&#xff0c;一种是直接调用打印&#xff0c;用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差&#xff0c;且体验不好&#xff0c;显然不是…

net::ERR_CONNECTION_REFUSED 解决大全

sockjs-node/info报错 GET http://localhost/sockjs-node/info?t1641268443660 net::ERR_CONNECTION_REFUSED sockjs-node作用 SockJS is a JavaScript library (for browsers) that provides a WebSocket-like object. SockJS gives you a coherent, cross-browser, Javascr…

前端页面出现 Failed to load response data

工作上前端 搭建了一套新的环境 同一个接口 新的前端环境 调用接口时 偶尔会出现一个情况 这时候 我们 在服务器 、 Postman 、本地环境调用都没问题 唯独在新的前端页面上会出现这样的问题 鉴于这样的问题 在网上查询了很多方法 进行修正都无济于事 最终在我们将问题指向了…