Chameleon Migration Guide: Cross-Platform Mini-Program Development

Introduction: With the rise of various mini‑programs, cross‑platform development is increasingly needed. Chameleon (cml) provides an MVVM‑based framework that enables a single codebase to run on multiple platforms such as WeChat Mini‑Program, Weex, React‑Native, Flutter, Quick‑App, etc.

Directory Structure:

cml/
├── dist/            // build output for each platform
│   ├── alipay/
│   ├── baidu/
│   ├── wx/
│   ├── web/
│   └── weex/
├── node_modules/
├── mock/
├── src/
│   ├── app/          // app entry
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── store/
│   └── router.config.json
├── chameleon.config.js
└── package.json

Project Configuration (chameleon.config.js):

const publicPath = '//www.static.chameleon.com/static';
const apiPrefix = 'https://api.chameleon.com';
cml.config.merge({
  wx: { build: { apiPrefix } },
  alipay: { build: { apiPrefix } },
  baidu: { build: { apiPrefix } },
  web: {
    dev: { hot: true, console: true },
    build: { publicPath: `${publicPath}/web`, apiPrefix }
  },
  weex: { build: { publicPath: `${publicPath}/weex`, apiPrefix } }
});

Configuration Files:

Mini‑program project uses project.config.json , app.json , app.js , app.wxss .

Chameleon uses src/app/app.cml with a <script cml-type="json"> block for global settings.

Routing:

{
  "mode": "history",
  "domain": "https://www.chameleon.com",
  "routes": [
    { "url": "/cml/h5/index", "path": "/pages/index/index", "mock": "index.php" },
    { "url": "/cml/h5/logs", "path": "pages/logs/logs", "mock": "logs.php" }
  ]
}

Registration:

App registration: App({ onLaunch(){}, globalData:'...' }) or Chameleon class with lifecycle methods.

Page registration: Page({ data:{}, onLoad(){}, onShow(){}, ... }) or Chameleon class with beforeCreate , created , mounted , etc.

Component registration: Component({ properties:{}, data:{}, methods:{}, ... }) or Chameleon class with props , data , methods .

Lifecycle Mapping:

Mini‑program app.js onLaunch

Chameleon beforeCreate

Mini‑program app.js onShow

Chameleon mounted

Mini‑program Page onLoad

Chameleon beforeCreate

Mini‑program Page onReady

Chameleon beforeMount / mounted (polymorphic)

Data Binding:

{{message}}                     // interpolation
c-if="{{view=='WEBVIEW'}}"      // conditional rendering
c-for="{{array}}"               // list rendering

Event Handling:

c-bind:tap="tapName"            // bind tap event
this.$cmlEmit('customevent', {}) // emit custom event

Style Import:

@import './common.css';

Custom Components:

Component({
  properties:{ innerText:{type:String,value:''} },
  data:{},
  methods:{ customMethod(){} }
});

Component Communication:

this.$cmlEmit('customevent', {detail:'...'});

API Usage (chameleon-api):

import cml from 'chameleon-api';
cml.setStorage('name','Hanks').then(res=>console.log(res)).catch(e=>console.error(e));

Migration Examples:

Vue → Chameleon: link

Weex → Chameleon: link

WeChat Mini‑Program → Chameleon: link

Export Chameleon dialog component to ordinary projects: link

Conclusion: The guide provides a complete checklist (directory, configuration, routing, registration, lifecycle, data binding, events, styles, custom components, API) to help developers migrate existing mini‑programs or other front‑end projects to Chameleon and achieve true cross‑platform development.