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

This article introduces the relevant knowledge of "case Analysis of WeChat Mini Programs Architecture". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Debugging skills of Mini Program

The Wechat developer tool disables the function of right-clicking to open the debugging panel by default. We can modify some of the code of the developer tool to remove this restriction.

Find the root directory of the app.nw project and / Applications/wechatwebdevtools.app/Contents/Resources/app.nw under Mac

Use js-beautify to batch format the code:

Cd / Applications/wechatwebdevtools.app/Contents/Resources/app.nw find. -type f-name'* .js'- not-path ". / node_modules/*"-not-path ". / modified_modules/*"-exec js-beautify-r-s 2-p-f'{}'\

Comment out the file app/dist/app.js line 44 and the app/dist/components/simulator/webviewbody.js line 149preventDefault call. Version 101100 also needs to modify the package.json file to remove-- disable-devtools.

After performing the above operations, you can right-click to open the debug panel of the page. It is important to note that using the panel of the view page will cause the wxml panel to be unavailable, touch events can not respond and other problems, please use with caution.

Through the code, we can find that adding the config.json file to the configuration directory and then adding {isDev:true} can enable the so-called debug mode of the developer tool, but I can't start the program properly after configuration, so I have to give up this method for the time being.

The main modules of Mini Program

Mini Program itself is divided into two main parts: the view module and the service module. In developer tools, they run independently in different webivew tag.

The view module is responsible for UI display, which consists of the converted code of wxml and wxss written by developers and related auxiliary modules provided by Wechat. A view module corresponds to a webview component (that is, a page we normally understand), and Mini Program supports the existence of multiple view at the same time. The view module communicates with the background through the WeixinJSBridge object.

The service module is responsible for the background logic of the application. It consists of the js code of Mini Program and the related auxiliary modules provided by Wechat. An application has only one service process, and it is also a page (at least within the developer's tools, which may run in WeixinJSCore after being launched). Unlike the view module, it runs in the background during the program life cycle, and the service module communicates with the background through WeixinJSBridge objects that are different from the view module but with the same interface format.

Communication between Mini Program modules

(communication diagram of each module in the developer's tool)

Developers who have done Wechat development will know something about the object WeixinJSBridge, which is a middle layer responsible for the interaction between UI and the background. Compared with the previous Wechat webview, the WeixinJSBridge of the application has two more public methods, publish and subscribe, to publish and subscribe to events, thus carrying out two-way communication.

The WeixinJSBridge object of the service module is defined in the file app/dist/weapp/appservice/asdebug.js, and the WeixinJSBridge of the view layer is defined in the file app/dist/inject/jweixindebug.js. Although both use the same interface and use the postMessage method to communicate with the background, what is done internally is completely different. For example, the service module can call up the underlying components directly through the prompt method through the prompt, while the WeixinJSBridge in the view layer can only send messages (see H5's JSBridge technology for interacting with Native).

Let's look at a typical interaction process:

1. User clicks on the interface to trigger events

two。 After receiving the event, the corresponding view module encapsulates the event into the desired format and calls the publish method to send:

WeixinJSBridge.publish ('PAGE_EVENT', data)

Examples of data parameters:

{"data": {"eventName": "onhidetap", "data": {"target": {...}, "currentTarget": {...}, "type": "tap", "timeStamp": 11457, "touches": [...], "detail": {...} "options": {"timestamp": 1475445858336}

3. The backend (the developer tool is the nwjs running environment) sends the data to the service module after processing, such as:

{"to": "appservice", "msg": {"eventName": "PAGE_EVENT", "data": {"data": {"eventName": "onhidetap", "data": {"target": {.}, "currentTarget": {.} "type": "tap", "timeStamp": 75329, "touches": [...], "detail": {...}, "options": {"timestamp": 1475445858336}}, "webviewID": 0}, "command": "MSG_FROM_WEBVIEW"}

The callback function in the WeixinJSBridge of the 4.service module finds the corresponding page module of the view based on the incoming data, and then executes the corresponding function pointed to by the name eventName.

5. The callback function calls this.setData ({hidden: true}) to change the data,serivce layer to calculate the data of the page, and sends send_app_data and appdataChange events to the backend. The specific data format is as follows:

{"appData": {"page/index": {...}}, "sdkName": "send_app_data", "to": "backgroundjs", "comefrom": "webframe", "command": "COMMAND_FROM_ASJS", "appid": "touristappid", "appname": "chat", "apphash": 70475629, "webviewID": 100000} {"eventName": "appDataChange" "data": {"data": {"hidden": true}}, "options": {"timestamp": 1475528706311}}, "sdkName": "publish", "webviewIds": [0], "to": "backgroundjs", "comefrom": "webframe", "command": "COMMAND_FROM_ASJS", "appid": "touristappid" "appname": "chat", "apphash": 70475629, "webviewID": 100000}

6. After receiving the appDataChange event data, the backend (file dist/components/simulator/webviewbody.js) simply encapsulates the data and forwards it to the view layer. The specific data format is:

{"to": "webframe", "msg": {"eventName": "appDataChange", "data": {"hidden": true}}, "options": {"timestamp": 1475528706311}}, "sdkName": "publish", "webviewIds": [0] "to": "backgroundjs", "comefrom": "webframe", "command": "COMMAND_FROM_ASJS", "appid": "touristappid", "appname": "chat", "apphash": 70475629, "webviewID": 100000, "act": "sendMsgFromAppService"}, "command": "MSG_FROM_APPSERVICE", "webviewID": 0, "id": 0.105770353216675}

The WeixinJSBridge of the 7.view layer receives the background data, merges the data with the existing page data if the webviewID matches, and then the virtual dom module changes the dom with diff and apply operations.

In addition to interface events and application data, message transmission between Mini Program modules also includes trigger native methods, handshake, life cycle and other types, although the processing objects and methods are different, the process is generally the same as above.

The WeixinJSBridge of the view module and the service module both use the postMessage interface (see MDN documentation) to communicate with the background, but because this interface cannot communicate directly with the nwjs background process, the developer tool will inject the app/dist/contentscript/contentScript.js file as contentScript into the page of the view module and the service module. The contentScript.js code provides the conversion of message message to chrome.runtime communication interface.

Wechat developer tools extend devtools to provide an AppData panel where developers can modify the data and directly see the changes in the view interface. After the data is modified here, the nwjs sends the message to the service layer, and then what happens is the same as in step 456 above: service passes the message to the nwjs,*** to the view layer.

This is the end of the content of "WeChat Mini Programs Architecture case Analysis". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.