WeChat Developer Tools
introduce
Since the operating mechanism of mini program rendering and logic separation is different from that of traditional web pages, traditional web development and debugging tools cannot be used.
Developers can use WeChat developer tools to complete functions such as code development, compilation and running, interface and logic debugging, real-device preview and release version submission of small programs.
The WeChat developer tool is based on nw.js, using node.js, chromium and system API to implement the underlying modules. It uses front-end technology frameworks such as React and Redux to build the user interaction layer, so that the same set of code can be used across Mac and Windows platforms.
code compilation
Neither the WeChat developer tools nor the WeChat client can directly run the source code of the mini program, so the source code of the mini program needs to be compiled. The code compilation process includes local preprocessing, local compilation and server compilation.
For quick preview, the code run by the WeChat developer tool simulator only undergoes local preprocessing and local compilation, and there is no server compilation process, while the code run by the WeChat client is additionally compiled by the server.
Compile WXML
WXML (WeiXin Markup Language) is a set of tag languages designed by the mini program framework, which is used to build the structure of the page. The running environment of the rendering layer of the applet is a WebView, and WebView cannot directly understand WXML tags, so it needs to be compiled.
WeChat developer tools have a built-in binary WXML compiler. This compiler accepts a list of WXML code files and outputs JavaScript code after processing. This code is the structure generation function of each page.
The compilation process turns all WXML code into a JavaScript function, which is pre-injected into the WebView. After the page path is determined at runtime, the path is passed as a parameter to this function to get the structure generation function of the page. The page structure generation function accepts the page data, outputs a JSON describing the page structure, and finally generates the corresponding through the applet component system. HTML.
Compile WXSS
WXSS (WeiXin Style Sheets) is a style language used to determine how WXML components should be displayed.
WXSS has most of the features of CSS. At the same time, in order to be more suitable for developing WeChat applets, WXSS has expanded and modified CSS.
WeChat developer tools have a built-in binary WXSS compiler. This compiler accepts a list of WXSS files, analyzes the reference relationships between files, preprocesses rpx, and outputs an array of style information.
At runtime, based on the current screen width, calculate how many pixel units correspond to 1rpx, and then convert the style information array into the final style and add it to the page.
Compile JavaScript
The WeChat client only needs to load a JS file (app-service.js) when running the logic layer of the mini program, and the mini program framework allows developers to write JavaScript codes in different files, so before the code is uploaded, WeChat The developer tools will do some preprocessing on the developer's JS files, including converting ES6 to ES5 and code compression (developers can choose to turn off preprocessing operations), and wrap the contents of each JS file in the define domain during the server compilation process. , and then merged into app-service.js in a certain order. Among them, page JS and app.js need to be actively required.
emulator
The mini program simulator simulates the logic and interface performance of the mini program on the WeChat client, allowing developers to view the code effects in real time.
Logic layer simulation
On the iOS WeChat client, the JavaScript code of the mini program runs in JavaScriptCore. On the Android WeChat client, the JavaScript code of the mini program is parsed through X5 JSCore. In the WeChat developer tools, we use a hidden Welivew to simulate the logical running environment of the mini program.
Render layer simulation
WeChat developer tools use chrome <webview />tags to load rendering layer pages, and each rendering layer WebView loads
client simulation
WeChat client provides a large number of APIs to enrich the functions of mini programs. On WeChat developer tools, by using the BOM (Browser Object Model) and the ability of node.js to access system resources, it simultaneously simulates the client's UI and interaction process, allowing most APIs to execute normally.
Communication simulation
The WeChat developer tool has a message center bottom module that maintains a WebSocket server. The WebView of the logic layer of the applet and the WebView of the rendering layer page establish a long-lasting connection with the bottom layer of the developer tool through WebSocket. The protocol field of WebSocket is used to distinguish the Socket. source.
debugger
Code debugging is one of the most important functions of developer tools, including interface debugging and logic debugging.