First, the structure of wechat small program

1. Introduction

Wechat applet view layer is WebView, logic layer is JS engine. The script execution environments of the three ends and the environments used to render non-native components are different.

Runtime environment

  • Android
  • IOS
  • Small program development tools

Logic layer

  • V8
  • JavaScriptCore
  • NWJS

Rendering layer

  • ChromiumCustomize the kernel
  • WKWebview
  • Chrome Webview

2. Design principles and components

1. Two-thread model

The rendering layer and logic layer of the applet are managed by two threads:

  • Render layer: all tasks related to interface rendering are inWebViewIn the execution. A small program has more than one interface, so there are more than one rendering layerWebViewThreads.
  • Logical layer: adoptedJsCoreThe thread runningJS script.

The view layer and the logical layer communicate through WeixinJsBridge of the system layer: the logical layer notifies the view layer of data changes, triggers page updates of the view layer, and the view layer notifies the triggered events to the logical layer for business processing.

The process of page rendering is as follows: at the rendering layer, the host environment will putWXMLConvert to the correspondingJSObject that we need to provide through the host environment when data changes occur in the logical layersetDataMethod passes the data from the logical layer to the rendering layer, compares the difference before and after, and applies the difference to the originalDOMTree, render correctlyUIInterface.The two-threaded model is an applets framework with most of the front end of the pageWebFramework differences. Based on this model, better control and a more secure environment can be provided. The downside is that asynchrony is ubiquitous (any data transfer is communication between threads, which means there is some latency), but the timing issues of asynchrony are encapsulated at the framework level by applets.

Component system

Applets have their own components, and these basic components are based on the Exparser framework. Exparser is based on WebComponents’ ShadowDOM model, but does not rely on native browser support, and can run in pure JS environment.

Exparser is built into the applets base library and provides basic support for various components of applets. Exparser maintains the node tree of the entire page for all components in the applets, including built-in components and custom components, including node familiarity, event binding, and so on, which is a simplified Shadow DOM implementation.

3. Native components

Among the built-in components, there are some components that are not completely rendered by Exparser, but are rendered natively by the client. Take the Map component for example. It renders at a higher level than normal components rendered in the WebView layer.

4. Operation mechanism

1. Start the
  • Hot start: if the user has opened a small program, and then open the small program again within a certain period of time, there is no need to restart, just switch the background small program to the foreground, this process is hot start;
  • Cold start: the user opens it for the first time or opens it again after the mini program is actively destroyed by wechat. In this case, the mini program needs to be reloaded and started, that is, cold start.
2. Destroy

Only when a small program has been in the background for a certain amount of time (I don’t know how long), or if the system resources are too high, will it actually be destroyed.

5. Update mechanism

After the developer releases a new version in the background, it cannot immediately affect all users of the live network, but in the worst case, it can send the new version information to users within 24 hours after the release.

Each time a small program is cold started, the system checks whether there is an updated version. If a new version is found, the system asynchronously downloads the code package of the latest version and starts the program with the local package of the client. That is, the new small program will be applied only after the next cold start.

So if you want to let the user use the latest version of the small program, you can use wx.getUpateManager to check the updated function:

checkNewVersion() { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(res => { console.log('hasUpdate', Res. HasUpadate) / / request callback if the new version information (res) hasUpdate) {updateManager. OnUpdateReady (() = > {enclosing setData ({hasNewVersion: true }) }) } }) }Copy the code

Why do small programs use dual threads

The rendering layer and logic layer of the applet are managed by two threads: the interface used by the rendering layerWebViewRender; Logical layer adoptsJSCorerunJavaScriptThe code. A small program has more than one interface, so there are more than one rendering layerWebView. Communication between the two threads is via appletsNativeThe logical layer also sends network requests through the side relayNativeSide forward.Small program architecture design, require fast rendering, fast loading, rendering page technology is mainly divided into three kinds:

  1. Pure client native technology rendering (pure client technology needs to be packaged with wechat code and follow the release version of wechat, such a development pace is not good, difficult to control);
  2. purewebTechnical rendering (purewebTechnology, then some complex interactive pages may face some performance problems becauseWebTechnology,UIandJSThe script is in a single thread, which easily leads to preemption of logical tasksUIRender resources.
  3. Between client technology andWebBetween technologies (HybridTechnology).

The final selection is the HyBrid technology similar to wechat JSSDK. Pages are rendered by Web technology, supplemented by a large number of interfaces to provide rich client side native capabilities. Also, each applet page is rendered using a different WebView.

If the developer can directly through the DOM tree of JS operation interface, then some sensitive data will have no security at all, so wechat provides a sandbox environment to run the developer’s JS code, this environment can not have any browser-related interface, only through JS interpretation of the execution environment, A ServiceWorker similar to HTML5 starts another thread to execute JS.

However, due to the small program is a multi-WebView architecture, so each page is a different WebView rendering display, so a separate thread is created to execute JS, that is, the logical layer, and the interface rendering task is performed in the WebView thread (rendering layer). That is, the dual-thread model separates the logical layer from the view layer. Only data communication exists between the view layer and the logical layer, which can prevent developers from arbitrarily operating the interface and better ensure the data security of users.