Unlocking the Secrets of WeChat Mini Program Architecture: A Deep Dive

Introduction

WeChat Mini Programs have sparked a wave of development due to their cross‑platform nature, instant launch, native‑like experience, comprehensive documentation and efficient framework.

1. Mini Program Overview

1.1 Features

1.2 Demo

Video: https://v.qq.com/x/page/w0353d7co6y.html

1.3 Why are they fast

Page Frame

Native pre‑loads an extra WebView

When a page opens, default data renders immediately; data requests update locally

History view is returned

Exiting does not destroy view state

1.4 Entry points

Scan QR code

Search

Send to desktop (Android)

Share with friends

2. Mini Program Architecture

The framework consists of a View layer and an App Service (logic) layer. The View renders page structure, the App Service handles logic, data requests and API calls; they run in separate threads.

The View layer uses WebView for rendering, while the logic layer runs on JSCore.

Communication between layers is performed via a system‑level JSBridge, which notifies the View of data changes and forwards user events to the logic layer.

At startup the complete package is downloaded from CDN.

3. View (Page)

The view layer is written with WXML and WXSS and displayed through components.

Data from the logic layer is bound to the view, and view events are sent back to the logic layer.

3.1 WXML

WXML (WeiXin Markup Language) supports data binding, arithmetic, templates, and event binding (e.g., bindtap).

WXML compiler: wcc converts .wxml files to JavaScript (e.g., wcc index.wxml).

3.2 WXSS

WXSS (WeiXin Style Sheets) supports most CSS features, introduces the responsive rpx unit, allows @import, but disallows deep selectors.

WXSS compiler: wcsc converts .wxss files to JavaScript (e.g., wcsc index.wxss).

3.3 WXSS Selectors

Supported selectors are illustrated below.

3.4 Components

Mini Programs provide a set of components comparable to HTML5 tags, based on the Web Component standard and implemented with Polymer.

3.5 Native Components

Native components such as <canvas/>, <video/>, <map/>, <textarea/> are rendered above the WebView layer.

<canvas/> <video/> <map/> <textarea/>

4. App Service (Logic Layer)

The logic layer processes data, sends it to the view, and receives events from the view.

App() is the mini‑program entry; Page() is the page entry.

Rich APIs provide access to WeChat‑specific capabilities such as user data, scanning, and payment.

Each page has an isolated scope and modular capabilities.

Features include data binding, event dispatch, lifecycle management, and routing.

Runtime Environments

iOS – JSCore

Android – X5 JS parser

DevTool – nwjs Chrome engine

4.1 Data Binding

Mustache‑style double braces bind variables; setData updates the view.

Event binding uses attributes prefixed with bind or catch (e.g., bindtap, catchtouchstart) linked to functions defined in the page.

4.2 Lifecycle

4.3 API Communication

APIs communicate with native code via JSBridge.

4.4 Router

navigateTo(object) – keep current page and navigate forward; navigateBack returns.

redirectTo(object) – replace current page.

navigateBack(object) – go back one or multiple pages.

5. Development Experience

5.1 Limitations

Still rendered by WebView, not truly native.

Requires separate development; cannot run outside WeChat.

Cannot extend with new components.

Server‑side Set‑Cookie headers are ignored.

JSCore lacks window / document, limiting some libraries.

WXSS cannot reference local assets.

WXSS is compiled to JavaScript, not CSS, to support rpx.

No cascade selectors in WXSS.

Cannot open external pages or launch apps.

Name conflicts with official accounts.

5.2 Advantages to Borrow

Pre‑load WebView for faster page rendering.

Separation of view and logic with data‑driven updates.

Virtual DOM enables partial updates.

All traffic uses HTTPS.

Offline capabilities.

Component‑based front‑end development.

Responsive rpx unit abstracts device size.

5.3 Beyond WeChat: PWA

Progressive Web Apps (PWA) combine the best of web and native experiences, allowing instant access via browsers, offline operation, push notifications, installability, full‑screen UI, and continuous updates.

PWA characteristics:

Progressive enhancement.

Offline access via service workers.

App‑shell model for native‑like experience.

Installable on home screen.

Easy sharing via URL.

Automatic updates.

Secure HTTPS delivery.

Searchable via manifests.

Re‑engagement through push messages.

Web App Manifest

Defines app name, icons, start URL, display mode, etc., in JSON.

Service Workers

Enable offline caching and resource updates.

App Shell

Caches the core UI (HTML, CSS, JS) on first load, loading only data on subsequent visits.