Shulou(Shulou.com)06/01 Report--

This article is to share with you the content of an example analysis of WeChat Mini Programs's underlying implementation principle. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

According to the Mini Program development document-Framework (https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html) section, you can see from the development interface provided by WeChat Mini Programs:

1. The JavsScript running environment is provided, and the business code written by JavaScript completes the processing of the logic layer.

two。 Transfer the data of the logical layer to the view layer through the data transfer interface (the data property when registering Page and subsequent setData method calls)

3. The view layer template written by WXML language presents the results and displays the results through "data binding" and the data transferred from the logical layer merge.

4. The style of the view controls the configuration of style rules written by the WXSS language

Let's take a look at the details of these four points:

1. The JavsScript running environment is provided, and the business code written by JavaScript completes the processing of the logic layer.

What is the JavaScript operating environment?

The development document Quan A (this sentence is given in https://mp.weixin.qq.com/debug/wxadoc/dev/qa/qa.html), the JS runtime environment is in JsCore:

Why can't objects such as window be used in scripts

The script logic of the page is run in JsCore

two。 Transfer the data of the logical layer to the view layer through the data transfer interface (the data property when registering Page and subsequent setData method calls)

How is the data transferred between the logical layer and the view layer?

The view is pure native rendering, so it is on the native side.

The logic layer, as mentioned above, is the JavaScript code running in JsCore.

With JsCore, the Native side and js side of WeChat Mini Programs framework can communicate with each other through JsCore. Therefore, the Native side of the WeChat Mini Programs framework and the js side can agree on the communication protocol / specification, and then encapsulate the part of the communication between the js side and the native through this communication protocol / specification and expose the interface as API (the top layer API, that is, the data property when registering the Page and the subsequent setData method mentioned above), so that the business code of the logic layer can transfer data to the view layer.

(calls to other API of native can be done in a similar way.)

3. The view layer template written by WXML language presents the results and displays the results through "data binding" and the data transferred from the logical layer merge.

How to merge the view layer and data to show the results and display?

First look at the interface provided by the WXML language and find it:

Similar to html/xml, views are described in terms of tags

Similar to angular/vue, the template is enhanced by instructions (special attributes of the tag) and double curly braces, so that the template and data merge are the result tags

But if you take a closer look, you can see that the instruction is actually very simple, providing only wx:for instructions for circular lists and wx:if,wx:else,wx:elif instructions for control logic.

Simple expressions are supported in double curly braces, and the variables in the expression are the data entered by the logic layer.

Each time the logical layer updates the data, the view layer updates the merge and the rendering accordingly.

In the simplest case, these three functions can be accomplished by doing the following:

The native side reads the WXML template file, and then processes and parses the instructions and double curly braces according to the data from the logic layer (the value can be taken from the data and calculated according to the brace expression, and then the expression value can be looped and judged to release the wx:for,wx:if instruction accordingly). After merge with the data, the tag string that can represent the final presentation content is generated.

Then parse the xml to parse the label as a node tree with attributes, and correspond to each node in the node tree to create view elements in the native (which may be system components or view components in the Wechat framework), set the corresponding attributes, and maintain a correct parent-child relationship.

When the logical layer data is updated, the corresponding attributes can also be updated.

Of course, in the actual treatment, there are many more factors to be considered, and many optimizations will be done, but the basic idea should be roughly like this.

4. The style of the view controls the configuration of style rules written by the WXSS language

How do styles match with settings?

After each view element is constructed, the WXSS file is still read by native, which can be parsed into a pair of "selector-rule" pairs with simple string matching, and the attribute key value is in the rule. Then match each view element with the selector in the selector-rule pair, and set the corresponding attribute values successfully (taking into account the priority of the global style and the page style and the style attribute style)

How do I layout native elements using the css style?

The most basic flex layout can be done by facebook's css-layout (GitHub-facebook/css-layout: A subset of CSS (specifically flex-box) re-implemented as a stand alone project for use primarily on mobile. Used by react-native)

In addition, in terms of events, after native receives a user event, if necessary, it communicates with the js running inside it through JsCore, passing the event data to the framework on the js side, and then the js framework can call back the corresponding callback.

Thank you for reading! This is the end of the article on "sample Analysis of WeChat Mini Programs's underlying implementation principle". I hope the above content can be of some help to you, so that you can learn more knowledge. If you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.