Unveiling the Architecture of WeChat Mini Programs: From Dual Threads to Virtual DOM

1. Mini Program Development History

1.1 Native App

In the early era of smartphones, networks were slow and apps were mainly native iOS or Android applications, offering high performance but high development cost.

1.2 H5

HTML5 became a standard in 2014, enabling multimedia on mobile browsers. Development and deployment are cheap, but performance and push notifications are limited compared to native apps.

1.3 Hybrid App

Hybrid apps combine native shells with WebView rendering, allowing cross‑platform development with performance between H5 and native.

1.4 Mini Programs

Mini programs are applications that can be used without installation, embodying the "use‑and‑go" concept – users scan or search to open them instantly.

Since the official release of WeChat Mini Programs in January 2017, various platforms (WeChat, Baidu, Alipay, QQ) have launched their own mini‑program ecosystems.

Numerous mini‑programs such as Douyin, Kuaishou, JD, Meituan have emerged, providing convenient services for users.

In 2018, the "Jump Jump" game popularized WeChat mini‑programs, spurring a wave of development across the industry.

2. Principle Analysis

2.1 Dual‑Thread Model

All major mini‑program platforms (WeChat, Alipay, Baidu) adopt a dual‑thread architecture: one thread runs business‑logic JavaScript, another renders templates and CSS.

In WeChat mini‑programs, the two threads communicate via JSBridge, using a publish‑subscribe mechanism similar to MVVM for two‑way data binding.

Calling setData in the logic layer updates the view asynchronously.

2.2 Overall Architecture

Note: All following content focuses on the WeChat Developer Tools.

The developer tools run on NW.js; the package.nw directory contains the core source code, which is heavily obfuscated and minified.

Inside the vendor folder, the 2.17.0.wxvpkg package provides the base library for mini‑programs, including WebService and WebView handling.

2.2.1 WAWebview

The view‑layer library provides basic rendering capabilities:

var __wxLibrary = {
  fileName: 'WAWebview.js',
  envType: 'WebView',
  contextType: 'others',
  execStart: Date.now()
};
var __WAWebviewStartTime__ = Date.now();
var __libVersionInfo__ = {
  "updateTime": "2020.4.4 10:25:02",
  "version": "2.10.4"
};
// ... many more definitions ...

Key components of WAWebview include: Foundation: core module WeixinJSBridge: message communication module exparser: component system __virtualDOM__: virtual DOM module __webViewSDK__: WebView SDK Reporter: logging and reporting module

2.2.2 WAService

The logic‑layer library provides core capabilities for the mini‑program's business logic:

var __wxLibrary = {
  fileName: 'WAService.js',
  envType: 'Service',
  contextType: 'App:Uncertain',
  execStart: Date.now()
};
var __WAServiceStartTime__ = Date.now();
var __libVersionInfo__ = {
  "updateTime": "2020.4.4 10:25:02",
  "version": "2.10.4"
};
// ... many more definitions ...

Core modules of WAService include: Foundation: core module WeixinJSBridge: message communication WeixinNativeBuffer: native buffer WeixinWorker: worker thread JSContext: JavaScript engine context Protect: JS protection objects __subContextEngine__: provides App, Page, Component, Behavior APIs

2.2.3 Virtual DOM

WeChat mini‑programs implement a virtual DOM ( __virtualDOM__) that maps JavaScript objects to custom DOM elements managed by the exparser module.

Common virtual‑DOM APIs include getAll, getNodeById, addNode, removeNode, and getExparser.

2.2.4 WeixinJSBridge

WeixinJSBridge enables communication between the view layer, native layer, and logic layer, providing on (event registration) and invoke (event triggering) methods.

2.3 WeChat Developer Tools

The tools run on Chromium and Node.js via NW.js, allowing compiled virtual DOM to be rendered as real DOM.

2.3.1 Reverse‑Engineering Tips

In DevTools, typing help reveals commands such as openVendor, which opens the source folder containing wcc and wcsc compilers.

After extracting the source, open it in VSCode and install the mini‑program‑wxvpkg plugin to decompress .wxvpkg files.

2.3.2 Compilation Principles

2.3.2.1 wcc – compiling wxml

The wcc tool converts wxml to JavaScript that produces a virtual DOM. Example command:

./wcc ./quickstart/miniProgramJs.unpack/pages/index/index.wxml > index.js

The generated file defines a $gwx function; invoking it yields the virtual DOM structure.

{
  "tag": "wx-page",
  "children": [
    {
      "tag": "wx-view",
      "attr": {"class": "container"},
      "children": [
        {
          "tag": "wx-view",
          "attr": {"class": "userinfo"},
          "children": [
            {
              "tag": "wx-view",
              "attr": {},
              "children": [" 请使用1.4.4及以上版本基础库 "],
              "raw": {},
              "generics": {}
            }
          ],
          "raw": {},
          "generics": {}
        },
        {
          "tag": "wx-view",
          "attr": {"class": "usermotto"},
          "children": [
            {
              "tag": "wx-text",
              "attr": {"class": "user-motto"},
              "children": [""],
              "raw": {},
              "generics": {}
            }
          ],
          "raw": {},
          "generics": {}
        }
      ],
      "raw": {},
      "generics": {}
    }
  ]
}

2.3.2.2 wcsc – compiling wxss

The wcsc tool converts wxss to JavaScript that injects CSS via a setCssToHead function, handling unit conversion (e.g., rpx to px).

./wcsc ./quickstart/miniProgramJs.unpack/pages/index/index.wxss -js -o ./css.js

2.4 Communication Mechanism

Both the view and logic layers communicate with the native client via JSBridge. On iOS, WKWebView messageHandlers are used; on Android, a native method is injected into the WebView window.

2.5 Startup Mechanism

Mini‑programs support cold and hot starts. Cold start loads the program from scratch; hot start resumes a background instance. After a period of inactivity (≈5 minutes) or memory warnings, the program is destroyed.

3. Summary

Mini‑programs deliver near‑native experience.

They achieve "no‑perceived download" through tiny package size.

Mobile‑centric layout enables rapid development and iteration.

Dual‑thread model separates logic and rendering, communicating via JSBridge.

Dedicated JSBridge handles bidirectional calls between JS and native.

wcc compiles wxml → JS → Virtual DOM; wcsc compiles wxss → JS → style.

Mini‑programs are essentially hybrid apps with a stronger ecosystem.

4. References

WeChat Mini Program Technical Analysis

History and Current State of Mini Programs

2020 Mini Program Internet Development Whitepaper

Understanding JSBridge