Chameleon 统一多端开发
项目地址：https://github.com/didi/chameleon
文档与示例：见仓库与官网文档
关联清单：https://github.com/justjavac/awesome-wechat-weapp
Chameleon（简称 cml）是滴滴开源的“统一多端解决方案”。核心思想是使用统一 DSL（.cml 文件）与规范化开发范式，统一编译到小程序（微信/支付宝/百度等）、Web（H5）、以及其他终端，实现“一套代码，多端运行”。
提示：项目活跃度较以往下降，建议新项目权衡生态与维护成本；但其设计思想对多端工程体系具有参考价值。
🎯 文章目标
- 了解 cml 的设计理念与编译链路
- 上手初始化与目录结构
- 掌握端差异适配与常见问题
- 与 Taro/uni-app 的取舍建议
📚 框架简介
- 统一 DSL：采用 .cml 单文件格式，包含 template/script/style
- 统一规范：从路由、组件、接口到工程规范统一抽象
- 编译适配：编译期将标准 DSL 转为各端目标代码
⚙️ 快速开始（以历史 CLI 为例）
请以仓库 README 为准（不同版本命令可能有所变化）：
bash
# 全局安装（历史命令，仅示例）
npm i -g chameleon-tool
# 初始化项目
cml init my-cml-app
cd my-cml-app
# 开发（示例：微信小程序端）
cml dev wx
# 构建
cml build wx示例页面（语法演示）：
html
<!-- pages/index/index.cml（示意） -->
<template>
<view class="container">
<text>\{\{count\}\}</text>
<button @tap="inc">计数</button>
</view>
</template>
<script>
export default {
data: {
count: 0
},
methods: {
inc () { this.count++ }
}
}
</script>
<style>
.container { padding: 24rpx; }
</style>📁 目录结构（示例）
my-cml-app/
├─ src/
│ ├─ pages/ # 页面（.cml）
│ ├─ components/ # 组件（.cml）
│ └─ assets/ # 资源
├─ dist/ # 各端构建产物
└─ project.config.json # 微信小程序工程配置🧩 工程实践
- 端差异处理：通过平台条件编译/多态能力处理 API 与 UI 差异
- 状态与请求：抽象数据层，统一封装鉴权、错误处理、重试与缓存
- 包体积管理：分包与按需引入，避免主包超限
- 依赖治理：优先使用无 DOM 依赖的库，或提供降级方案
🧪 常见问题
- 学习成本：自定义 DSL 与规范需要额外学习
- 生态活跃度：近年来维护活跃度下降，需评估长期可持续
- 适配边界：底层平台差异仍然存在，复杂场景需要手写适配
🔄 与其他方案对比
- Taro：多框架（React/Vue）+ 工程化生态成熟，社区活跃
- uni-app：Vue 技术栈友好，上手快、生态整合好
- Chameleon：统一 DSL 概念完整，适合从零到一搭建“统一规范”的组织，但当下需要评估维护性
✅ 适用场景
- 组织内需要强一致的“统一规范”与“统一 DSL”
- 目标端较多、希望编译期统一治理与抽象
- 团队具备对编译与适配层的维护能力
🔗 参考
- GitHub：https://github.com/didi/chameleon
- 小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
📊 总结
Chameleon 的价值在于“统一与规范”。在当下生态背景下，新项目更常见的选择是 Taro/uni-app；若你偏好标准化与一致性，并能承担适配层维护成本，Chameleon 的思想仍有借鉴意义。