CTrip WeChat Mini Program Framework: Architecture, Development Challenges, and Solutions

Author: Zhu Tianchao, iOS engineer at CTrip Technology Center, shares his experience developing the company's mini‑program.

Mini‑programs are lightweight applications that run without installation, offering instant access and a "use‑and‑go" experience.

Since receiving a mini‑program beta slot in September 2016, CTrip has built its own framework after researching WeChat documentation and defining required business features.

1. CTrip Mini‑Program Framework Overview

CPage() wraps the native Page function, inserting middleware to handle page initialization, communication, hierarchy control, analytics, and sharing.

Base: decorates the page options.

Navigator: manages navigation options and page stack.

UBT: provides business analytics and page residency statistics.

Sharing is handled specially within CPage to facilitate statistics.

The data flow through CPage is illustrated in an accompanying diagram, followed by a step‑by‑step explanation of how data is processed, synchronized, and finally passed to the native Page() call.

2. CWX

CWX extends the native wx API, adding more network, location, and component functionalities.

Network Requests

WeChat limits wx.request() to five concurrent requests; CWX mitigates this by queuing requests and providing a cancel method, while also reducing server‑side data duplication.

Utility Classes

Common utilities such as Base64 encoding/decoding and object type checks are provided.

Location

Location is obtained via wx.getLocation, sent to the server for city matching, and uses Baidu reverse‑geocoding; CWX queues location requests to handle authorization issues.

Component API

CWX offers easy‑to‑use component APIs like cwx.component.calendar(), cwx.component.city(), and cwx.component.imagebrowser().

Basic Components

Calendar component with customizable titles, subtitles, and colors.

City selector supporting domestic and international cities with indexing and search.

Image browser supporting large‑image preview, titles, descriptions, and optional use of wx.previewImage.

Component screenshots are provided.

2. Development Issues and Solutions

Rendering White‑Screen

Rendering hundreds of items at once can cause long white‑screens; solutions include partial rendering in onLoad, pagination with onReachBottom or scroll-view, and redesigning UI to avoid heavy rendering.

Page Hierarchy

WeChat limits page depth to five layers; avoid deep navigation by redesigning interactions, using floating layers, or wx.redirectTo where appropriate.

Authorization Dialogs

Multiple simultaneous permission requests cause stacked dialogs; encapsulate permission APIs to ensure only one request is active at a time.

Package Size

Mini‑program packages must stay under 1 MB; reduce size by fixing IDE warnings, moving logic from WXML to JS, splitting large WXSS files, removing debug code, using online images, and compressing code.

Exception Handling

Common IDE debugging tips: save frequently, rollback code, delete line‑by‑line, clear cache, and restart the IDE.

3. Audit Issues

Submitted versions cannot be withdrawn during review.

New submissions overwrite un‑published approved versions.

Page‑category mismatches cause rejection.

Poor user experience leads to rejection.

4. Future Plans

Extract the core framework into a configurable SDK and integrate dynamic packaging to support various channels and future mini‑program development.

These insights are part of CTrip's technical sharing series, aimed at developers and technology enthusiasts.