Principles of WeChat Mini Program Implementation

WeChat mini programs are developed using wxml, wxss, and javascript. Essentially, it is a single-page application where all page rendering and event handling take place within a single page. However, it can also call various native interfaces through the WeChat client. WeChat's architecture follows the data-driven MVVM pattern, where the view UI and data are separated, and all page updates are achieved through data changes.

The mini program is divided into two parts: Webview and AppService. Webview is mainly used for rendering interfaces, while AppService is used for handling business logic, data, and interface calls. Communication is achieved through the system-level JSBridge, enabling the rendering of UI and event handling.

Directory Structure

Before Packaging

Project ├── pages │ ├── index │ │ ├── index.js // index logic │ │ ├── index.json // index configuration │ │ ├── index.wxml // index structure │ │ └── index.wxss // index style sheet │ └── logs │ ├── logs.js // logs logic │ ├── logs.json // logs configuration │ ├── logs.wxml // logs structure │ └── logs.wxss // logs style sheet ├── app.js // logic ├── app.json // public configuration ├── app.wxss // public style sheet ├── project.config.json // project configuration └── sitemap.json // page inclusion configuration

After Packaging

Project ├── app-config.json // all JSON configuration information for the mini program project ├── app-service.js // JS business logic packaged here ├── page-frame.html // template file for the view └── pages ├── index.html // index page └── logs.html // logs page

Architectural Design

The WeChat mini program framework consists of two parts: the View layer and the AppService logic layer. The View layer is responsible for rendering page structures, while the AppService layer handles logic processing, data requests, and interface calls. They run in two separate processes within two Webview instances.

The view layer and logic layer communicate through the system-level JSBridge. The logic layer notifies the view layer of data changes, triggering page updates, while the view layer notifies the logic layer of triggered events for business processing.

----------------------- ----------------------- | View | | AppService | | | | | | Page1 Page2 Page3 | | Manager Api | ----------------------- ----------------------- | ↑ | ↑ | Event | Data | Data | Event ↓ | ↓ | ------------------------------------------------------------------------- | JSBridge | | | | Native Storage Network ... | -------------------------------------------------------------------------

WeChat loads all views into a Webview, referred to as the View layer. All the JS code for logic processing is loaded into another WebView, referred to as the AppService layer. Each mini-program has only one and remains in memory throughout its entire lifecycle. The JSBridge encapsulates message communication and access to system capabilities through the App, enabling message communication by calling the corresponding methods on different platforms. The development environment uses window.postMessage on iOS, WKWebview uses window.webkit.messageHandlers.invokeHandler.postMessage, and WeixinJSCore.invokeHandler is used on Android. In terms of the Js engine, the X5 kernel is used on Android, while JavaScriptCore is used on iOS, and the nwjs Chrome kernel is used in the development tool.

By using the View presentation layer and the AppService logic layer, a dual-threaded solution for running mini-programs is achieved. With two threads, code can be placed in a sandbox for secure and controlled execution. Of course, dual-threading is only one solution for a mini-program. If multiple mini-programs are to be run on one App, a multi-threaded approach should be adopted, not only for performance considerations, but also to prevent mutual interference between mini-programs.

Underlying Support

The WeChat mini-program development tool has some compilation support templates and underlying support files for mini-programs.

  • transWxmlToJs: wxml to js
  • transWxssToCss: wxss to css
  • transConfigToPf: Template page configuration
  • transWxmlToHtml: wxml to html
  • transManager: Manager
  • WAConsole.js: Framework JS library, console capabilities
  • WAWebview.js: Framework JS library, providing basic API capabilities for the view layer, primarily encapsulating message communication as JSBridge messages, packaging the log component Reporter, rendering view aspects under the wx object Api, mini-program component implementation and registration, VirtualDOM and diff and Render UI implementation, page event triggering processing
  • WAService.js: Framework JS library, providing basic API capabilities for the logic layer, primarily encapsulating message communication as JSBridge messages, packaging the log component Reporter, most Api methods under the wx object, App() mini-program entry, Page() page entry, getApp and other global methods, data binding, event dispatch, lifecycle management, routing management, modularization capabilities, etc.

Daily Question

https://github.com/WindrunnerMax/EveryDay

References

https://www.zhihu.com/question/50920642 https://kangzubin.com/wxapp-decompile-1/ https://github.com/berwin/Blog/issues/49 https://segmentfault.com/a/1190000018631528 http://eux.baidu.com/blog/fe/微信小程序架构原理 https://juejin.im/post/5da444ab6fb9a04e054d93d8 https://cloud.tencent.com/developer/article/1029663