Understanding WeChat Mini Program Architecture: From View Layer to App Service

Mini Program Overview

WeChat Mini Programs are cross‑platform instant‑launch applications that run inside the WeChat client. They deliver native‑like performance, a comprehensive API set (user profile, QR code scanning, payment, etc.) and a dedicated development framework.

Key characteristics

Instant launch without installation

Native‑level UI rendering and performance

Rich built‑in API ecosystem

Why Mini Programs are fast

Page‑Frame Native architecture separates view and logic

An extra WebView is pre‑loaded before the page is shown

Pages render with default data first, then update locally when network data arrives

Historical views are cached and reused

View state persists after the Mini Program is exited

Entry methods

Scanning a QR code

Searching within WeChat

Pinning to the Android desktop

Sharing with friends

Demo video URL: https://v.qq.com/x/page/w0353d7co6y.html

Mini Program Architecture

The framework consists of two independent threads:

View layer – rendered by a WebView, responsible for page structure and styling.

App Service layer – runs JavaScript logic on JSCore (iOS) or X5 JS engine (Android).

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

When a Mini Program starts, the complete package is downloaded from a CDN.

View Layer (Page View)

WXML (WeiXin Markup Language)

Supports data binding and logical expressions.

Allows template inclusion and component references.

Event binding via attributes such as bindtap.

Compilation command:

wcc index.wxml

WXSS (WeiXin Style Sheets)

Implements most CSS features.

Introduces the responsive rpx unit, which scales according to screen width.

Supports @import for external style sheets.

Disallows deep nesting selectors to avoid component breakage.

Compilation command:

wcsc index.wxss

Component Model

Components follow the Web Component standard and are implemented with the Polymer framework. Native components that sit above the WebView layer include <canvas/>, <video/>, <map/> and <textarea/>.

App Service (Logic Layer)

Entry points

App()

– Mini Program entry point. Page() – Page entry point.

Data binding

Uses Mustache syntax {{variable}} to bind data from a page’s data object. Updates are performed with setData. Event handlers are declared with attributes prefixed by bind or catch (e.g., bindtap).

Lifecycle callbacks

Standard callbacks such as onLoad, onShow, onHide and onUnload manage page initialization and cleanup.

API communication

APIs are invoked via the JSBridge, which forwards calls to native modules for capabilities such as user information, QR scanning, and payment.

Routing

navigateTo(object)

– push a new page onto the stack. redirectTo(object) – replace the current page. navigateBack(object) – pop one or more pages from the stack.

The current page stack can be inspected with getCurrentPages().

Development Experience

Common limitations

Rendering is performed by a WebView, not true native UI.

Mini Programs can only run inside WeChat; they cannot be executed as standalone web apps.

Custom components cannot be extended beyond the provided set.

Server‑set cookies are ignored.

JSCore lacks window and document, limiting use of many third‑party libraries.

WXSS cannot reference local assets directly; it is compiled to JavaScript to support rpx.

No support for cascading selectors.

External pages or native apps cannot be launched from a Mini Program.

Name conflicts with official accounts restrict naming options.

Advantages worth borrowing

Pre‑creation of a WebView enables faster page rendering.

Separation of view and logic layers allows data‑driven updates without direct DOM manipulation.

Virtual DOM provides partial updates, reducing rendering cost.

All network traffic uses HTTPS, ensuring security.

Offline capability is available through service workers.

Component‑based front‑end development improves code reuse.

The responsive rpx unit abstracts device size differences.

Beyond WeChat: Progressive Web Apps (PWA)

Progressive Web Apps combine the best of web and native experiences. Key PWA features include:

Progressive enhancement – newer browsers receive richer experiences while older ones retain basic functionality.

Offline support via Service Workers.

App‑shell architecture for fast initial rendering.

Installability – users can add the app to the home screen without an app store.

Easy sharing through URLs.

Continuous updates managed by Service Workers.

HTTPS‑only delivery for security.

Searchable manifests and metadata.

Push notifications to encourage re‑engagement.

For detailed PWA guidance, see the official Google documentation: https://developers.google.com/web/progressive-web-apps/