Cross‑Platform Development of Qingju Bike Mini‑Program Using the Chameleon Framework

The Qingju Bike mini‑program has grown to over one million applications and two hundred million daily active users, requiring strict performance, stability, and security standards across multiple platforms.

Background – The rapid evolution of front‑end frameworks and the proliferation of mini‑program ecosystems (WeChat, Alipay, Baidu, etc.) created a “hundred‑school‑conflict” where each platform demanded separate code bases, leading to low efficiency and high maintenance cost.

Framework Expectations – The team needed a solution that ensured consistent UI across platforms, allowed easy customization for platform‑specific features, provided strong engineering support, offered high abstraction with minimal code changes, and met strict performance and bundle‑size requirements.

Technical Solution – Chameleon was chosen as the cross‑platform framework. Its architecture adds a DSL layer (routing, lifecycle, component, data binding, style rendering) on each platform, uses chameleon‑tools for Webpack‑based compilation, and provides chameleon‑UI and chameleon‑API to smooth out API differences.

Key implementation details include:

Multi‑polymorphic interface definitions for platform‑specific APIs (e.g., login) wrapped in <script cml-type="interface">... and concrete implementations for WeChat and Alipay.

Unified data management using chameleon‑store (Vuex‑like) with modules such as user , location , and bicycle .

Component design with parent‑child communication, dynamic component rendering via is="{{item.type+'-card'}}" , and event bus handling.

Local mock support and environment‑specific API prefixes configured via cml.config.merge({ wx: { dev: { apiPrefix: testApiPrefix }, build: { apiPrefix } }) .

Performance Optimizations – Chameleon performs array diffing to transmit only changed data, reducing WebView and JS VM overhead. Bundle size remains around 1.2 MB after compression, demonstrating efficient runtime.

Conclusion – Adopting Chameleon eliminated the need for multiple code bases, halved development time for new features, improved QA efficiency, and provided a scalable foundation for future cross‑platform extensions.