Frontend Development 19 min read

Extending the Chameleon Cross‑Platform Framework to Quick Apps – Architecture, Implementation, and Deployment Guide

This guide explains how to extend the Chameleon cross‑platform framework to support Quick Apps by detailing the underlying architecture, required tooling such as mvvm‑cml‑loader and mvvmPack, configuration steps, runtime API mapping, sample code, integration process, and known limitations.

Didi Tech
Didi Tech
Didi Tech
Extending the Chameleon Cross‑Platform Framework to Quick Apps – Architecture, Implementation, and Deployment Guide

Chameleon is a cross‑platform framework that enables a single codebase to run on multiple terminals such as web, Weex, WeChat mini‑programs and Quick Apps.

The article introduces the background of cross‑platform development, compares various solutions (React‑Native, Weex, Flutter, etc.), and explains why Chameleon was chosen.

It describes the Quick App technical solution (HTML/CSS/JS, Vue.js, native JS‑Native rendering) and the architecture of the Quick App platform services.

Key implementation details are provided, including the mvvm-cml-loader , mvvm-pack , mvvmGraphPlugin , and the mapping of CML lifecycle hooks to Quick App APIs.

Sample code snippets show how to configure webpack for .cml files, how to write a Quick App plugin, and how to implement runtime interfaces such as createApp , createPage , and createComponent .

The guide also covers the steps to integrate Quick App support into an existing CML project: install chameleon-tool , add Quick App packages (cml-quickapp-api, cml-quickapp-plugin, etc.), modify app.cml and chameleon.config.js , update component imports, and run the Quick App development server.

Finally, it lists known limitations (animation, CSS features, watch) and provides links to demo projects, RPK files, and further documentation.

npm i -g chameleon-tool
cml quickapp dev
cml quickapp build
Frontendcross-platformTutorialframeworkImplementationchameleonquick app
Didi Tech
Written by

Didi Tech

Official Didi technology account

0 followers
Reader feedback

How this landed with the community

login Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.