Ctrip Hotel Mini‑Program Development Experience and Practices

Author Bio Cui Guangyu, Mini‑Program Development Manager in Ctrip Hotel R&D, previously responsible for anti‑scraping and H5 development.

This article shares Ctrip Hotel’s development experience with mini‑programs (WeChat, Alipay, Baidu, Toutiao) and some non‑technical insights. All opinions are personal and do not represent the company.

Project Background Mini‑programs were introduced by WeChat around 2016, remained quiet until a surge in popularity in 2018.

The original “use‑and‑leave” concept conflicted with internet platforms’ desire to retain users, leading to continuous feature additions that contradict the original idea.

Mini‑programs are often compared to apps, but they resemble H5 pages, especially after the introduction of WebView, which can make a mini‑program a thin wrapper.

Compared with H5, mini‑programs support fewer features; they add limited hardware access (e.g., screenshot callbacks) that H5 lacks.

Initially, many doubted the viability of mini‑programs, but they have since thrived, despite early resource constraints and fears of “draining” app traffic.

Ctrip’s Unique Development Model

Product and Development Joint Requirement Gathering Unlike typical business scenarios where product dominates, mini‑programs require close collaboration because competitors may have private APIs and the platform evolves rapidly.

Both sides must propose requirements together, reflecting the “everyone is a product manager” mindset.

Keep It Simple WeChat enforces size limits (initially 1 MB). Ctrip managed to fit multiple business units within this constraint.

Most developers transitioned from H5, so the learning curve was low; many MVVM patterns are identical.

Speed Beyond Agile Rapid development is forced by market pressure; teams adjust tactics on the fly, similar to a chaotic battle strategy.

WebView Login State Issues WebView is a “weird” component in mini‑programs, used mainly for promotions. It offers hot‑updates but can violate WeChat policies if misused.

WeChat restricts WebView to full‑screen, no overlay. Some “black‑tech” tricks can bypass this, but they risk being blocked.

For promotions, we usually allow one‑way login state transfer from mini‑program to WebView, avoiding reverse flow that could pollute the session.

Choosing Circular vs. Square QR Codes Circular QR codes (mini‑program codes) are recommended by WeChat; square codes have stronger capabilities and can map URLs to mini‑program paths, enabling cross‑platform universal QR codes.

Using Apparently Useless APIs WeChat provides many creative APIs, such as screenshot callbacks. By detecting a screenshot, we can prompt sharing, which correlates with higher order conversion.

Push and Share WeChat discourages malicious push/share but allows legitimate sharing and push features.

Team Allocation Two sub‑teams handle mini‑programs: one for core order flow (strict Scrum) and one for promotional features (more flexible, heavy use of WebView).

Black‑Tech Techniques When native capabilities are needed (e.g., sharing), we perform a jump to a native page to “steal” permissions, then optionally jump back. This approach handles login state refreshes and layer limits by relaunching when necessary.

We also develop conversion tools to port WeChat mini‑programs to Alipay, Baidu, Toutiao, and even H5, addressing compatibility differences.

From a broader perspective, H5 is a superset of mini‑programs; converting from mini‑program to H5 encounters fewer compatibility issues than the reverse.

Overall, these experiences—including technical tricks, product‑development collaboration, and cross‑platform strategies—aim to inspire other developers.

Recommended Reading

Componentized Architecture Practice from the Smart Travel Android Project

Ctrip Framework Team’s Exploration of Application Monitoring Systems

Saving 55% Test Time: Introduction to Ctrip Hotel Comparison Platform