CTrip's WeChat Mini‑Program Framework: Architecture, Development Practices, and Solutions to Common Issues

Mini‑programs are lightweight applications that run without installation, offering instant access and a "use‑and‑go" experience. CTrip obtained a mini‑program beta slot in September 2016, researched WeChat documentation, and quickly built an independent framework.

1. Framework Overview

The core of the framework is CPage(), a wrapper around WeChat's Page that injects middleware to handle page communication, hierarchy control, analytics, and sharing. Middleware includes:

Base – decorates the page option.

Navigator – manages navigation options and a page stack.

UBT – provides business‑level tracking and statistics.

Sharing is also processed in CPage to simplify analytics.

2. CWX Extension CWX extends the native wx API with additional utilities, network request handling, location services, and component APIs. For network requests, wx.request() has a maximum concurrency of 5; CWX queues requests and offers a cancel method, while also supporting server‑side data aggregation to reduce calls.

Utility functions include Base64 encoding/decoding and object type checks. Location services use wx.getLocation with server‑side reverse‑geocoding and queue control to handle permission issues.

Component APIs such as cwx.component.calendar(), cwx.component.city(), and cwx.component.imagebrowser() provide ready‑to‑use UI elements that follow the CPage conventions.

3. Basic Components

Calendar – customizable date picker with hierarchical titles and colors.

City selector – supports domestic and international cities, index filtering, and search.

Image browser – offers full‑screen preview with optional titles and descriptions; recommends using the native wx.previewImage for performance.

4. Development Challenges and Solutions

Rendering white‑screen : When rendering hundreds of items at once, the page may stay blank. Solutions include partial rendering in onLoad, pagination with onReachBottom, and UI redesign to avoid heavy initial rendering.

Page depth limit : Mini‑programs cannot exceed five navigation layers. Mitigation strategies are business‑level flow redesign, using floating layers instead of pages, or employing wx.redirectTo where appropriate.

Authorization dialogs : Simultaneous calls to permission APIs cause stacked dialogs. The fix is to encapsulate permission calls and queue them, as done in cwx.locate.

Package size : The bundle must stay under 1 MB. Recommendations include resolving IDE warnings (e.g., adding wx:key), moving logic from WXML to JS, splitting large WXSS files, removing debug code, using online images, and compressing code.

Exception handling : Common IDE issues are addressed by saving frequently, rolling back code, line‑by‑line deletion, clearing caches, and restarting the IDE.

5. Review Process Issues

Submitted versions cannot be withdrawn, new submissions overwrite pending approved versions, page‑category mismatches cause rejection, and poor user experience leads to denial.

6. Future Plans

CTrip intends to extract the core framework into a configurable SDK for easier reuse across multiple mini‑programs and to support dynamic packaging for different distribution channels.