WeChat Mini Programs Demystified: Architecture, Views, and Tips

1. Mini Program Overview

WeChat Mini Programs are lightweight applications that run inside the WeChat ecosystem, offering fast loading and seamless user experience.

2. Architecture

The architecture is divided into a view layer and a logic layer. The view layer renders UI using WXML and WXSS, while the logic layer processes data and handles events using JavaScript.

3. View Layer

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

WXSS (WeiXin Style Sheets) is similar to CSS, supporting most CSS features, a responsive rpx unit, and @import. It does not support deep nesting selectors to avoid component conflicts.

4. Logic Layer

The logic layer handles data processing, communicates with the view layer, and provides APIs such as user information, scanning, and payment. Each page has an independent scope and lifecycle.

Entry points: App() for the mini program and Page() for individual pages.

Runtime environments: iOS uses JSCore, Android uses the X5 JS engine, and development tools run on a NW.js‑based Chrome kernel.

App Service – Lifecycle & Router

Routing APIs include navigateTo(object) (push a new page), redirectTo(object) (replace current page), and navigateBack(object) (pop pages). The page stack depth is limited to five levels.

5. Development Experience

Advantages

Pre‑create WebView for faster rendering.

Separate view and logic layers enable data‑driven updates without direct DOM manipulation.

Virtual DOM provides efficient partial updates.

All resources are loaded over HTTPS, ensuring secure transmission.

Component‑based front‑end development.

Responsive rpx unit abstracts device dimensions.

Limitations

Rendering still relies on WebView, not native UI.

Mini Programs run only inside WeChat; they cannot be executed in other environments.

Developers cannot create custom native components.

Server‑side Set‑Cookie headers are ignored.

JSCore lacks window and document, restricting use of many browser libraries.

WXSS cannot reference local assets (images, fonts).

WXSS is compiled to JavaScript rather than CSS to support rpx.

No support for cascading selectors in WXSS.

Mini Programs cannot directly open external pages or launch native apps.