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:

<code>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 ...
</code>

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:

<code>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 ...
</code>

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:

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

The generated file defines a

$gwx

function; invoking it yields the virtual DOM structure.

<code>{
  "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": {}
    }
  ]
}
</code>

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).

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

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