Wechat applet (II) Mina framework


1. Mina framework

Render layer and logical layer

The running environment of the applet is divided into rendering layer and logic layer, which are managed by two threads respectively: the interface of the rendering layer uses WebView thread for rendering; The logic layer uses jscore threads to run JS scripts. There are multiple interfaces in an applet, so there are multiple WebView threads in the rendering layer. The communication between the two threads will be transferred through the wechat client (Native will also be used to refer to the wechat client below). The communication model of applet is shown in the figure below:

Wechat applet (II) Mina framework

Render layer and logic layer png

The Mina framework of the applet has a running speed close to that of the native app. In fact, what he actually applies is the MVVM mode most respected in the IT industry. The view layer corresponds to the rendering layer, the model layer corresponds to the logic layer, and the ViewModel layer corresponds to the native layer.

The native layer mainly does two things: data binding and event monitoring. The network request sent by the logical layer is also forwarded via native.

1-1. Render layer (view layer)

The wxml template and wxss style work on the render layer Wxml is used to describe the page structure, while Wxss is used to describe page styles.

The view layer presents data in a given style and feeds back events to the logic layer, while the data is presented in components. Component is the basic unit of view.

1-2. Logical layer (APP service)

JS works in the logic layer. The data is processed in the logical layer and sent to the view layer, and the event request sent back by the view layer is accepted at the same time.

The wechat team has made some optimizations for JavaScript to develop applets more efficiently. These optimizations include:

  1. Add the app method to register the program and the page method to register the page.
  2. Provide rich API interfaces.
  3. The scope of the page is relatively independent and has the ability of modularization.

However, it should be noted that the logic layer of the applet is written by JS, but it does not run in the browser, so some capabilities of JavaScript in the web cannot be used, such as DOM, window, etc.

1-3. SetData function

In page (), we use the SetData function to send data from the logical layer to the view layer, and change the corresponding this The value of data. There is a size limit for the data set at a time, which cannot exceed 1024KB, so as to avoid setting too much data at one time.

2. Interface rendering

2-1. How is the interface rendered?

First, we need to know that wxml is equivalent to a DOM tree and can also be simulated with a JS object (virtual DOM)

Wechat applet (II) Mina framework

Build a DOM tree png

2-2. If the data changes, how is it rendered?

  1. A new JS object will be generated
  2. At this time, you can compare the two JS objects to get the changed part
  3. Then apply this difference to the original DOM tree
  4. So as to achieve the purpose of updating the UI, which is the principle of “Data-Driven”
Wechat applet (II) Mina framework

JS data diff update png