Analysis of the underlying structure of the mini program

[mominger]

The upper part is the English version, and the lower part is the Chinese version, with the same content. If there are any wrong, or you have anything hard to understand, especially in the English version(it is modifications based on Google Translate), pls feel free to let me know.many thx.

Overview

Introduction to the mini program; analysis of the underlying structure of the mini program; its life cycle, etc.

1. What is the mini program

• Mini program is an application located in the host Wechat, between Web App and Native App
• Web app: SPA(single page web application)

Mini program running environment: IOS webkit (Apple's open source browser kernel), Android X5 (QQ browser kernel), nw.js in WeChat developer tools
Wechat blocks the BOM object, so most of the traditional JS libraries cannot be used
The mini program is still running in the browser mode, and wechat controls the life cycle. WXML, WXSS rendering page. js parse data、transfer data (setData)
Official Mini Program Document
Official Mini Program Management Backstage

2. The underlying architecture of the mini program

2.1 Architecture diagram provided by Tencent

Refer to the article address of this picture

2.2 Analysis of the official architecture diagram

• Logic layer: A separate thread executes Javascript code. In iOS is JavaScriptCore, In Android is JsCore of Tencent x5, and in the WeChat developer tool is nmjs framework
• View layer: All tasks related to page rendering are executed in the WebView thread, and the logic layer is used to control which pages are rendered. One page on one WebView, but there is only one JsCore, so you can share data through the properties in the App instance
• JSBridge: Mainly to provide JavaScript with an interface to call Native functions, so the mini programs can call native functions
• The view layer is separated from the logic layer. Through data-driven and event interaction, it only operates ShadowDOM, not the real DOM directly. The logic layer provides data (SetData) to the page layer, and the page layer notifies the logic layer through binding/capturing events (Event).
• The principle of JSBridge

2.3 The communication process of each layer of the mini program

App View: view layer, AppService: logic layer
AppService -> transfer data: setData(Object) -> Wechat JSBridge -> transfer data:data(string) -> AppView
AppView -> trigger event -> Wechat JSBridge -> event -> AppService

3. Starting the mini program

Cold starting: the user opens the mini program for the first time, or the mini program is opened by the user again after being destroyed, the mini program needs to be reloaded and started
Hot starting: The user has opened a small program and then opened the small program again within a certain period of time. At this time, the small program has not been destroyed, but entered the foreground state from the background state
After hiding, the official reply page destroyed time refers to almost 5 minutes, the actual situation is uncertain, it may be 5 minutes, or it may be 1 day
The mini program needs to download the update package asynchronously when it is cold-started, and update it in the next cold-start Official update instructions
If you need to apply the latest version immediately, you can use wx.getUpdateManager force the update to restart the mini program, or restart after the user confirms the pop-up window
Mini programs (including cold start) will not actively clear the cached data in the local storage. Third-party software such as WeSecure(腾讯手机管家), 360 Security(360手机卫士), etc. can do so

4. Mini Program Life Cycle

• There are three kinds of objects in mini programs: App, Page and Component

4.1 Application Life Cycle

• Application Life Cycle in the official website
  

  When you start or cold start for the first time: App.onLaunch is executed only once, then App.onShow is executed, and then enters the life cycle of displaying Page
  When exiting: Page.onHide => App.onHide
  At hot starting: App.onShow => Page.onShow

4.2 Page Life Cycle

• Page Life Cycle in the official website-1
• Page Life Cycle in the official website-2

Initialization: Page.onLoad => Page.onShow
Page out of the stack (page is closed, such as calling redirect/reLaunch): Page.onUnload
The page does not pop out of the stack (page cached to the background, such as calling navigate): Page.onHide

4.3 Component Life Cycle

• Component Life Cycle in the official website
  

Component.created => Component.attached => Component.ready (only called at the first render)
When moving on the dom: Component.moved
The component is unloaded (when conditional rendering) or the page is unloaded: Component.detached
Regarding behavior, similar to mixin in Vue, a reuse of component logic. behavior's mixin hook will be called before the component calls its own hook. Such as Component.behavior.created => Component.created. Refer to behavior in the official website
Regarding pageLifetime (the component life cycle corresponding to the page): Component.pageLifetime.show => Page.onShow when displayed; Page.onHide => Component.pageLifetime.hide
Refer to pageLifetime in the official website
Conclusion: 1. When the page is loaded/displayed, the behaviors life cycle takes priority over the component life cycle, and the component/pageLifetime life cycle takes precedence over the page life cycle; 2. When the page exits the stack/hidden, it is Page.onUnload => Component.detached

4.4 Application, Page, Component Life Cycle execution sequence

• Loading sequence: App initialization (App.onLaunch -> App.onShow) => component initialization (Component.created -> Component.attached) => page initialization (Page.onLoad -> Page.onShow) => rendering end (Component.ready -> Page.onReady)
• Unloading sequence: Page uninstall (Page.unLoad) => Component behavior uninstall (Component.behavior.detached) => Component uninstall (Component.detached)
• When displaying: Component.pageLifetime.show => Page.onShow
• When hiding: Page.onHide => Component.pageLifetime.hide

The following is the Chinese version, the same content as above.

概述

对小程序的介绍；小程序的底层架构分析；其生命周期等。

1. 什么是小程序

• 小程序是位于宿主Wechat里，介于Web App、Native App 之间的一种应用
• web app: SPA(single page web application)

小程序运行环境: IOS的webkit（苹果开源的浏览器内核），Android的X5(QQ浏览器内核)，微信开发者工具里的nw.js
wechat屏蔽了BOM对象，因此传统的JS库大部分都不能使用
小程序仍运行在浏览器模式里，wechat控制生命周期。WXML、WXSS渲染界面。js组装数据，传递数据(setData)
官方小程序文档入口
官方小程序管理后台

2. 小程序的底层架构

2.1 腾讯提供的架构图

参考此图片的文章地址

2.2 对官方架构图的分析

• 逻辑层：一个单独的的线程执行Javascript代码。iOS下是JavaScriptCore，安卓下是腾讯 x5下的JsCore,微信开发者工具是nmjs框架
• 渲染层：界面渲染相关的任务全在 WebView 线程里执行，通过逻辑层去控制渲染哪些界面。一个界面一个WebView,但只有一个JsCore,所以可以通过App实例下的属性来共享数据
• JSBridge:主要是 给 JavaScript 提供调用 Native 功能的接口，让小程序可以调用原生功能
• 视图层和逻辑层分离，通过数据驱动，事件交互，只操作ShadowDOM,不直接操作真实DOM。逻辑层提供数据(SetData)给视图层，视图层通过绑定/捕获事件(Event)通知逻辑层。
• 附JSBridge的原理

2.3 小程序的各层通信流程

AppView: 渲染层,AppService:逻辑层
AppService -> 传递数据:setData(Object) -> Wechat JSBridge -> 传递数据:data(string) -> AppView
AppView -> trigger event -> Wechat JSBridge -> event -> AppService

3. 小程序的启动

冷启动：用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动
热启动：用户已打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态
小程序隐藏后，官方回复指差不多5分钟销毁，实际情况不确定，甚至1天都有缓存
小程序需冷启动时异步下载更新包，下一次冷启动进行更新 官方更新说明
如需要马上应用最新版本，可以使用 wx.getUpdateManager强制更新重启小程序，或弹窗待用户确认后重启
小程序(包括冷启动)不会主动清除storage里的缓存数据，第三方软件(腾讯管家、360手机卫士等)会

4. 小程序的生命周期

• 小程序有三种对象:App、Page和Component

4.1 应用生命周期

• 参考官网的应用生命周期
  

  第一次启动或冷启动时: App.onLaunch仅执行一次，然后执行App.onShow,接着进入需显示Page的生命周期
  退出时: Page.onHide => App.onHide
  热启动时: App.onShow => Page.onShow

4.2 页面生命周期

• 参考官网的页面生命周期-1
• 参考官网的页面生命周期-2

初始化: Page.onLoad => Page.onShow
页面出栈(页面关闭,如调用redirect/reLaunch):Page.onUnload
页面不出栈(页面缓存到后台，如调用navigate):Page.onHide

4.3 组件生命周期

• 参考官网的组件生命周期
  

Component.created => Component.attached => Component.ready(仅首次渲染时调用)
在dom上移动时: Component.moved
组件被卸载(条件渲染)或页面被卸载: Component.detached
关于Behavior,类似于Vue中的mixin，一种组件逻辑的复用。Behavior的混入钩子将在组件调用自身钩子之前调用。如Component.behavior.created => Component.created。 参考官网Behavior
关于pageLifetime(和页面对应的组件生命周期):显示时 Component.pageLifetime.show => Page.onShow；隐藏时 Page.onHide => Component.pageLifetime.hide 参考官网pageLifetime
结论: 1.页面加载/显示时,Behaviors生命周期优先于组件的生命周期,组件/pageLifetime生命周期优先于页面生命周期;2.页面退出堆栈/隐藏时，则是Page.onUnload => Component.detached

4.4 应用、页面、组件生命周期执行顺序

• 加载顺序: App初始化(App.onLaunch -> App.onShow) => 组件初始化(Component.created -> Component.attached) => 页面初始化(Page.onLoad -> Page.onShow) => 渲染结束(Component.ready -> Page.onReady)
• 卸载顺序:Page卸载(Page.unLoad) => 组件Behavior卸载(Component.behavior.detached) => 组件卸载(Component.detached)
• 显示时：Component.pageLifetime.show => Page.onShow
• 隐藏时: Page.onHide => Component.pageLifetime.hide