微信小程序的启动过程

2,912 阅读4分钟

运行机制

小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。

假如用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台态的小程序切换到前台,这个过程就是热启动;

冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况,此时小程序需要重新加载启动。

更新机制

小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。

如果需要马上应用最新版本,可以使用wx.getUpdateManager API 进行处理。

  • 小程序没有重启的概念

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

  • 当短时间内(5s)连续收到两次以上收到系统内存告警,会进行小程序的销毁

微信小程序的框架包含两部分View视图层(可能存在多个)、App Service逻辑层(一个),View层用来渲染页面结构,AppService层用来逻辑处理、数据请求、接口调用,它们在两个线程里运行。

视图层使用WebView渲染,逻辑层使用JSCore运行。

一个小程序存在多个界面,所以渲染层存在多个WebView线程,这两个线程的通信会经由微信客户端(下文中也会采用Native来代指微信客户端)做中转,逻辑层发送网络请求也经由Native转发

视图层和逻辑层通过系统层的WeixinJsBridage进行通信,逻辑层把数据变化通知到视图层,触发视图层页面更新,视图层把触发的事件通知到逻辑层进行业务处理。

project
|── pages
|   ├── index
|   |   ├── index.json  index 页面配置
|   |   ├── index.js    index 页面逻辑
|   |   ├── index.wxml  index 页面结构
|   |   └── index.wxss  index 页面样式表
|   └── log
|       ├── log.json    log 页面配置
|       ├── log.wxml    log 页面逻辑
|       ├── log.js      log 页面结构
|       └── log.wxss    log 页面样式表
├── app.js              小程序逻辑
├── app.json            小程序公共设置
└── app.wxss            小程序公共样式表

初次进入小程序的时候,微信客户端初始化好宿主环境,同时从网络下载或者从本地缓存中拿到小程序的代码包,把它注入到宿主环境。

小程序启动前,会加载代码到本地。

通过读取全局app.json里的pages,就能知道你所有注册的页面。

"pages":[
  "pages/index/index",
  "pages/logs/logs"
],

如:

pages/index/index:表示第一页面所有内容在index下

pages/index/logs:表示第二页面所有内容在logs下。

注:pages数组的第一注册页面为首页,也就是pages/index/index时打开小程序的首页。

小程序启动时需要从代码包内读取小程序的配置和代码,并注入到 JS 引擎中。

在主包代码注入过程中,会触发小程序的 App.onLaunch 和首次 App.onShow 生命周期。

在开发者代码注入完成后,框架侧会根据用户访问的页面进行一些页面数据初始化工作,触发首页的 Page.onLoad, Page.onShow 事件。

小程序启动后,在app.js里定义的App 实例的onLaunch函数就会执行。

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

tips:整个小程序只有一个 App 实例,为所有的页面共享,App实例有多个函数(onShow,onHide,onError等)。

程序和页面

首先pages/index/index页面有4个文件格式,包括

(1)index.json(配置),

(2)index.wxml(内容),

(3)index.wxss(样式)。

(4)index.js(交互)

顺序:

(1)首先,根据 index.json 配置生成一个界面,index.json配置好顶部的颜色和文字。

(2)其次,装载这个页面的 WXML 结构和 WXSS 样式。

(3)最后,装载index.js,渲染当前页面。

Page({
  data: {  // 参与页面渲染的数据
    motto: 'Hello World',
  },
  onLoad: function () {
    // 页面渲染后 执行
  },
  onShow: function() {
    // 页面出现在前台时执行
  },
  onReady: function() {
    // 页面首次渲染完毕时执行
  },
  onHide: function() {
    // 页面从前台变为后台时执行
  },
  onUnload: function() {
    // 页面销毁时执行
  }
})

Page是页面构造器(生成页面),把data数据和wxml一起渲染得到最终结果。

onLoad函数会在渲染结束后执行,用来处理逻辑,onLoad在页面没被销毁之前只会触发1次。

页面显示之后,Page构造器参数所定义的onShow方法会被调用,一般从别的页面返回到当前页面时,当前页的onShow方法都会被调用。

在页面初次渲染完成时,Page构造器参数所定义的onReady方法会被调用,onReady在页面没被销毁前只会触发1次,onReady触发时,表示页面已经准备妥当,在逻辑层就可以和视图层进行交互了。

以上三个事件触发的时机是onLoad早于 onShow,onShow早于onReady。

参考:developers.weixin.qq.com/community/d…