1. Mina framework
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:
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.
- Add the app method to register the program and the page method to register the page.
- Provide rich API interfaces.
- The scope of the page is relatively independent and has the ability of modularization.
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)
2-2. If the data changes, how is it rendered?
- A new JS object will be generated
- At this time, you can compare the two JS objects to get the changed part
- Then apply this difference to the original DOM tree
- So as to achieve the purpose of updating the UI, which is the principle of “Data-Driven”