Chameleon 滴滴跨端框架技术调研

Chameleon（简称 CML）是滴滴开源的 跨端统一开发框架，使用类 Vue 的 .cml 单文件组件，编译输出微信/支付宝/百度等小程序、H5 及历史 Weex 容器。曾是国内「一套代码多端运行」的早期探索者之一。2026 年仓库活跃度显著下降，官方文档更新缓慢，处于 存量/维护模式；滴滴系新业务多转向 mpx，外部新项目应优先评估 mpx、uni-app 或 Taro。

一、 基本信息

二、 技术定位与简介

Chameleon 架构分层：

• 语法层：.cml 文件（template/script/style），接近 Vue 单文件组件。
• 编译层：chameleon-tool 将 CML 编译为各端可运行代码。
• 运行时层：chameleon-runtime 处理数据绑定与生命周期适配。
• 接口层：chameleon-api 统一 cml.xxx 调用，底层映射 wx./my. 等。

与 mpx 关系：同属滴滴开源，mpx 是微信小程序增强的继任方向，Chameleon 更偏早期全端（含 Weex）统一。与 uni-app 对比：Chameleon 生态与社区规模远小于 DCloud 体系。

适合：维护既有 CML 工程、研究滴滴跨端演进、短期无迁移预算的存量业务。

三、 快速上手安装说明

# 存量项目：锁定 chameleon-tool 版本
npm install -g chameleon-tool
cml init project
cd project
cml dev --platform wx

CML 页面示例

<!-- src/pages/index/index.cml -->
<template>
  <view class="wrapper">
    <text>{{ title }}</text>
    <view c-bind:tap="onTap">Count: {{ count }}</view>
  </view>
</template>
 
<script>
class Index {
  data = {
    title: 'Hello Chameleon',
    count: 0
  }
  onTap() {
    this.count++
  }
}
export default new Index()
</script>
 
<style scoped>
.wrapper { padding: 24rpx; }
</style>

微信开发者工具导入 dist/development/mp-weixin（路径以项目配置为准）。

四、 核心特性

1. 类 Vue 单文件组件

.cml 组织页面，降低原生小程序 WXML 碎片化。

2. 统一 API 层

cml.request、cml.navigateTo 等跨端封装。

3. 多平台编译

cml dev --platform wx|ali|baidu|h5 切换目标。

4. 组件化与 npm 支持

cml-ui 基础组件；npm 包经编译接入。

5. Weex 历史支持

曾支持 Weex 容器输出（2026 年 Weex 已 Vue 化，此路线过时）。

6. 条件编译

cml-if 或平台配置文件处理端差异。

五、 适用场景

1. 黄金适用场景

• 维护 2018–2021 年间的 Chameleon 存量仓库。
• 阅读滴滴早期跨端架构与 CML 编译器实现。
• 短期冻结版本、仅安全补丁与审核适配。

2. 局限适用场景

• 2024 年后新立项（选 mpx/uni-app/Taro）。
• 需要鸿蒙、快手等新平台快速跟进。
• 依赖活跃社区插件与招聘市场。
• 大型新功能迭代（迁移成本低于继续扩展 CML）。

六、 技术亮点

1. 跨端 API 抽象先行

chameleon-api 模式影响后续 mpx 等平台设计。

2. 编译器可研究性

开源完整工具链，适合学习小程序编译原理。

3. 滴滴业务验证

出行场景曾落地多小程序端。

4. 与 mpx 技术延续

团队内部迁移路径有参考案例（CML → mpx）。

5. 类 Vue 降低门槛

相对原生小程序，组件化与样式作用域更友好。

七、 核心概念与架构

digraph CML_Arch {
  rankdir=LR
  node [shape=box, style="rounded,filled", fillcolor="#f0f9ff"]
  CML [label=".cml SFC", fillcolor="#bae6fd"]
  Tool [label="chameleon-tool\n(编译)"]
  Runtime [label="chameleon-runtime"]
  API [label="chameleon-api\n(统一 API)"]
  WX [label="微信小程序"]
  H5 [label="H5"]
 
  CML -> Tool
  Tool -> Runtime
  Runtime -> API
  API -> WX
  API -> H5
}

关键概念：cml.config.js 多环境配置、interface 描述多端差异、chameleon-mixins。

八、 技术局限与边界

1. 项目停滞：GitHub Issue/PR 响应慢，新微信特性跟进滞后。
2. Weex 路线废弃：历史 H5+Weex 同构方案需整体重写。
3. 生态萎缩：UI 库、脚手架、第三方插件停更多。
4. 与 mpx 重叠：滴滴官方精力集中在 mpx，Chameleon 无新叙事。
5. 文档老化：Skyline、隐私合规等新政策说明不足。
6. 迁移成本：与 uni-app/Taro 组件 API 不兼容，需页面级重写。

九、 生态地图

十、 生态集成

十一、 开发与工程化

• 冻结依赖：禁止无意 npm update；分支验证后再合并 lockfile。
• 保留可构建的 cml.config.js 快照与 Node 版本（.nvmrc）。
• 抽取纯业务 TS/JS 与 CML 视图层，降低未来迁移成本。
• 微信开发者工具固定基础库版本做回归基线。
• 建立页面级「迁移优先级」台账（流量、复杂度、原生依赖）。

十二、 性能与安全

• 关注 setData 全量更新习惯；老项目常有性能债。
• 主包 2MB 硬限制；清理未使用资源与插件。
• 用户数据加密传输；登录态不进前端持久化明文。
• 隐私政策弹窗与 __usePrivacyCheck__ 适配微信新规。
• 弱网与低端机真机纳入发布检查清单。

十三、 技术对比

十四、 最佳实践

1. 新需求不追加 CML 页面；评估 mpx 或原生新分包承载。
2. 与架构组确认是否仍有滴滴内部安全补丁渠道。
3. 文档记录 cml.xxx 与 wx.xxx 映射表，便于迁移对照。
4. 每季度扫描 npm 依赖漏洞；老 Webpack 传递依赖风险高。
5. 制定 12–18 个月迁移路线图，按业务模块灰度替换。

十五、 学习与社区资源

• 官方文档：https://cml.js.org
• GitHub：https://github.com/didi/chameleon
• mpx 文档（继任参考）：https://mpxjs.cn
• 微信开放文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
• Taro/uni-app 迁移指南：用于规划 CML 退场路径