[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-10038":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":21,"defaultBranch":22,"hasWiki":20,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},10038,"chameleon","didi\u002Fchameleon","didi","🦎 一套代码运行多端，一端所见即多端所见","http:\u002F\u002Fcml.didi.cn\u002F",null,"JavaScript",8966,691,231,152,0,1,39.52,"Apache License 2.0",true,false,"master",[24,5,25,26,27,28,29,30],"android","cml","ios","miniprogram","mobile","vue","weex","2026-06-12 02:02:16","\n\nChameleon [![Build Status](https:\u002F\u002Fwww.travis-ci.org\u002Fdidi\u002Fchameleon.svg?branch=master)](https:\u002F\u002Fwww.travis-ci.org\u002Fdidi\u002Fchameleon) [![license](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fl\u002Fchameleon-tool.svg?registry_uri=https%3A%2F%2Fregistry.npmjs.com&style=popout-square)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fchameleon-tool) [![version](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fchameleon-tool.svg?style=flat)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fchameleon-tool)\n\n**Chameleon**\u002Fkəˈmiːlɪən\u002F，简写`CML`，中文名`卡梅龙`；中文意思`变色龙`，意味着就像变色龙一样能适应不同环境的跨端整体解决方案。\n\n[English Introduction](https:\u002F\u002Fgithub.com\u002Fdidi\u002Fchameleon\u002Fblob\u002Fgh-pages\u002Fdoc\u002Fquick_start\u002Freadme-en.md) | 中文介绍\n\n## 文档\n[新官网文档](http:\u002F\u002Fcml.didi.cn\u002F)\n\n[CML.JS.org](https:\u002F\u002Fcml.js.org)\n\n- [安装](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fquick_start\u002Fquick_start.html)\n- [快速上手](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fquick_start\u002Fquick_start.html)\n- [API 文档](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fapi\u002Fapi.html)\n- [组件文档](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fcomponent\u002Fcomponent.html)\n- [资源汇总 💰awesome-cml](https:\u002F\u002Fgithub.com\u002Fchameleon-team\u002Fawesome-cml)：依赖库、demo、完整应用示例、学习资源\n- [后续规划](https:\u002F\u002Fgithub.com\u002Fdidi\u002Fchameleon\u002Fwiki\u002F%E5%90%8E%E6%9C%9F%E8%A7%84%E5%88%92)\n- [五分钟上手视频教程](https:\u002F\u002Fmp.weixin.qq.com\u002Fs\u002F3NY_pbqDVnbQSYQG_D2qiA)\n- [青桔单车 chameleon 跨平台实践分享](https:\u002F\u002Fmp.weixin.qq.com\u002Fs\u002FN8PpxRHHtlIHVlemQ1Gepg)\n- [谁在使用？](https:\u002F\u002Fgithub.com\u002Fdidi\u002Fchameleon\u002Fissues\u002F131)\n\n## 仓库更新说明\n\n本仓库仅包含编译时代码，全部开源代码参见：https:\u002F\u002Fgithub.com\u002Fchameleon-team\n\nmaster为稳定版本，除了紧急 bug 修复，每份代码提交都有很严格的发布流程规范，会先在分支经历一段时间灰度期，确认稳定可用后才会合并到 master，\n[进行中的项目分支介绍](https:\u002F\u002Fgithub.com\u002Fdidi\u002Fchameleon\u002Fwiki\u002F%E8%BF%9B%E8%A1%8C%E4%B8%AD%E7%9A%84%E9%A1%B9%E7%9B%AE)\n\n## CML 即 多端\n支持平台：**web、微信小程序、支付宝小程序、百度小程序、[android(weex)](https:\u002F\u002Fgithub.com\u002Fchameleon-team\u002Fchameleon-sdk-android)、[ios(weex)](https:\u002F\u002Fgithub.com\u002Fchameleon-team\u002Fchameleon-sdk-ios)、qq 小程序、[字节跳动小程序](https:\u002F\u002Fcml.js.org\u002Fdoc\u002Fexample\u002Ftt_miniapp.html)、[快应用](https:\u002F\u002Fcml.js.org\u002Fdoc\u002Fexample\u002Fquickapp_miniapp.html)、持续更新中**\n\n**一端所见即多端所见**——多端高度一致，无需关注各端文档。\n\n> 基于多态协议不影响各端差异化灵活性\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeatles-chameleon\u002Fcml-demo\">\n\u003Cimg src=\"https:\u002F\u002Fcml.js.org\u002Fdoc\u002Fassets\u002Fefficient.gif\" width=\"400px\"\u002F>\n\u003C\u002Fa>\n\n\n|                                                                 web                                                                  |                                                             微信小程序                                                             |                                                              native-weex                                                              |                                                               百度小程序                                                               |                                                              支付宝小程序                                                              |\n| :----------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------: |\n| \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeatles-chameleon\u002Fcml-demo\">\u003Cimg src=\"https:\u002F\u002Fcmljs.org\u002Fcml-demo\u002Fpreview\u002Fweb-1.jpg\" width=\"200px\"\u002F> \u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeatles-chameleon\u002Fcml-demo\">\u003Cimg src=\"https:\u002F\u002Fcmljs.org\u002Fcml-demo\u002Fpreview\u002Fwx-1.jpg\" width=\"200px\"\u002F>\u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeatles-chameleon\u002Fcml-demo\">\u003Cimg src=\"https:\u002F\u002Fcmljs.org\u002Fcml-demo\u002Fpreview\u002Fweex-1.jpg\" width=\"200px\"\u002F> \u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeatles-chameleon\u002Fcml-demo\">\u003Cimg src=\"https:\u002F\u002Fcmljs.org\u002Fcml-demo\u002Fpreview\u002Fbaidu-1.png\" width=\"200px\"\u002F> \u003C\u002Fa> | \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeatles-chameleon\u002Fcml-demo\">\u003Cimg src=\"https:\u002F\u002Fcmljs.org\u002Fcml-demo\u002Fpreview\u002Falipay-1.png\" width=\"200px\"\u002F>\u003C\u002Fa> |\n\n## 背景\n\n研发同学在端内既追求 h5 的灵活性，也要追求性能趋近于原生。\n面对入口扩张，App 客户端、微信小程序、支付宝小程序、百度小程序、Android 厂商联盟快应用、其他类小程序，单一功能在各平台都要重复实现，开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案，滴滴跨端解决方案 Chameleon 终于发布。真正专注于让一套代码运行多端。\n\n## 设计理念\n\n软件架构设计里面最基础的概念“拆分”和“合并”，拆分的意义是“分而治之”，将复杂问题拆分成单一问题解决，比如后端业务系统的”微服务化“设计；“合并”的意义是将同样的业务需求抽象收敛到一块，达成高效率高质量的目的，例如后端业务系统中的“中台服务”设计。\n\n而 Chameleon 属于后者，通过定义统一的语言框架+[统一多态协议](http:\u002F\u002Fcml.didi.cn\u002Fdocs\u002Fpoly.html)，从多端（对应多个独立服务）业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。\n\n\u003Cimg src=\"https:\u002F\u002Fcml.js.org\u002Fdoc\u002Fassets\u002Fchameleon-idea.png\" width=\"400px\"\u002F>\n\n### 跨端目标\n\n虽然不同各端环境千变万化，但万变不离其宗的是 MVVM 架构思想，**Chameleon 目标是让 MVVM 跨端环境大统一**。\n\n![跨端目标](https:\u002F\u002Fcml.js.org\u002Fdoc\u002Fassets\u002Fmvvm4.png)\n\n\n## 开发语言\n代码示例\n```html\n\u003Ctemplate>\n  \u003Cview>\n    \u003Ctext>{{title}}\u003C\u002Ftext>\u003Ctext>{{reversedTitle}}\u003C\u002Ftext>\n  \u003C\u002Fview>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nclass Index  {\n  data = {\n    title: \"chameleon\"\n  }\n  computed = {\n    reversedTitle: function () {\n      return this.title.split('').reverse().join('')\n    }\n  }\n  mounted() {}\n  destroyed() {}\n}\nexport default new Index();\n\u003C\u002Fscript>\n```\n从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，同样道理，chameleon 中采用的是 CML + CMSS + JS。\n\n[JS](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Flogic\u002Flogic.html)语法用于处理页面的逻辑层，与普通网页编程相比，本项目目标定义标准 MVVM 框架，拥有完整的生命周期，watch，computed，数据双向绑定等优秀的特性，能够快速提高开发速度、降低维护成本。\n\n[CML](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fview\u002Fcml.html)（Chameleon Markup Language）用于描述页面的结构，我们知道 HTML 是有一套标准的语义化标签，例如文本是`\u003Cspan>` 按钮是`\u003Cbutton>`。CML 同样具有一套标准的标签，我们将标签定义为`组件`，CML 为用户提供了一系列[组件](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fcomponent\u002Fbase\u002Fbase.html)。同时 CML 中还支持\u003Cb>模板语法\u003C\u002Fb>，例如条件渲染、列表渲染，数据绑定等等。同时，CML 支持使用[类 VUE 语法](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fview\u002Fvue.html)，让你更快入手。\n\n[CMSS](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fview\u002Fcmss.html)(Chameleon Style Sheets)用于描述 CML 页面结构的样式语言，其具有大部分 CSS 的特性，并且还可以支持各种 css 的预处语言`less stylus`。\n\nCML 采用与 Vue 一致的组件化方案、单文件组织方式、生命周期，同时数据响应能力对齐 Vue，数据管理能力对齐 Vuex，非常方便开发者上手、维护。\n\n通过以上对于开发语言的介绍，相信你看到只要是有过网页编程知识的人都可以快速的上手chameleon的开发。\n\n## 多端高度一致\n\n深入到编程语言维度保障一致性，包括框架、生命周期、内置组件、事件通信、路由、界面布局、界面单位、组件作用域、组件通信等高度统一\n\n## 丰富的组件\n\n在用 CML 写页面时，chameleon 提供了[丰富的组件](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fcomponent\u002Fcomponent.html)供开发者使用，内置的有`button switch radio checkbox`等组件，扩展的有`c-picker c-dialog c-loading`等等,覆盖了开发工作中常用的组件。\n\n## 丰富的 API\n\n为了方便开发者的高效开发，chameleon 提供了[丰富的 API 库](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fapi\u002Fapi.html),发布为 npm 包`chameleon-api`，里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。\n\n## 自由定制 API 和组件\n\n基于强大的[多态协议](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fframework\u002Fpolymorphism\u002Fintro.html)，可自由扩展任意 API 和组件，不强依赖框架的更新。各端原始项目中已积累大量组件，也能直接引入到跨端项目中使用。\n\n基于强大的[多态协议](https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fframework\u002Fpolymorphism\u002Fintro.html)，充分隔离各端差异化实现，轻松维护一套代码实现跨多端\n\n## [规范校验](http:\u002F\u002Fcml.didi.cn\u002Fdocs\u002Fintroduction.html#%E6%99%BA%E8%83%BD%E8%A7%84%E8%8C%83%E6%A0%A1%E9%AA%8C)\n\n代码规范校验，当出现不符合规范要求的代码时，编辑器会展示智能提示，不用挨个调试各端代码，同时命令行启动窗口也会提示代码的错误位置。\n\n## 渐进式跨端\n\n既想一套代码运行多端，又不用大刀阔斧的重构项目？不仅可以用 cml 开发页面，也可以将多端重用组件用 cml 开发，直接在原有项目里面调用。\n\n## 先进前端开发体验\n\nChameleon 不仅仅是跨端解决方案。基于优秀的前端打包工具 Webpack，吸收了业内多年来积累的最有用的工程化设计，提供了前端基础开发脚手架命令工具，帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。\n\n## 联系我们\n\n[ChameleonCore@didiglobal.com](mailto:ChameleonCore@didiglobal.com)\n\n## [Beatles Chameleon 团队](https:\u002F\u002Fgithub.com\u002Fchameleon-team)\n\n负责人：Conan\n\n内部成员：透心凉、Sgoddon、动机不纯、Jalon、Jack、卡尺哈哈、change、Observer、Kevin、guoqingSmile、Mr.MY、JiM、lzc、名字待定、朱智恒、亭、龚磊、w55、小龙、不懂小彬、荣景超\n\n## 特别鸣谢\n[![zheyizhifeng](https:\u002F\u002Favatars3.githubusercontent.com\u002Fu\u002F9592849?s=100&v=4)](https:\u002F\u002Fgithub.com\u002Fzheyizhifeng)|[(头像空)](https:\u002F\u002Fgithub.com\u002Fwhuhenrylee)|[![broven](https:\u002F\u002Favatars0.githubusercontent.com\u002Fu\u002F12854613?s=100&v=4)](https:\u002F\u002Fgithub.com\u002Fbroven\u002F)|[(头像空)](https:\u002F\u002Fgithub.com\u002FJeany\u002F)\n:---:|:---:|:---:|:---:\n[zheyizhifeng（快应用）](https:\u002F\u002Fgithub.com\u002Fzheyizhifeng)|[whuhenrylee（快应用）](https:\u002F\u002Fgithub.com\u002Fwhuhenrylee)|[broven（阿里影业）](https:\u002F\u002Fgithub.com\u002Fbroven\u002F)|[Jeany（芒果 TV)](https:\u002F\u002Fgithub.com\u002Fyaxiji\u002F)\n\n## 贡献者们\n快应用官方研发团队、luyixin、z-mirror、夏夜焰火（百度）\n[kingsleydon](https:\u002F\u002Fgithub.com\u002Fkingsleydon)\n\n## 微信 & QQ 交流群\n\n**微信**\u003Cbr \u002F>\n\u003Cimg width=\"150px\" src=\"https:\u002F\u002FCML.JS.org\u002Fdoc\u002Fassets\u002Fwx-qr-code.png\" \u002F>\n\n\u003Cbr \u002F>\n\n**QQ**\u003Cbr \u002F>\n\u003Cimg width=\"150px\" src=\"https:\u002F\u002Fcmljs.org\u002Fdoc\u002Fassets\u002Fqq2-qrcode.JPG\" \u002F>\n\n\n## 协议\n\nApache-2.0 license\n\nChameleon 基于 Apache-2.0 协议进行分发和使用，更多信息参见[协议文件](.\u002FLICENSE)。\n\n## 友情链接\n\n[DoraemonKit](https:\u002F\u002Fgithub.com\u002Fdidi\u002FDoraemonKit) \u002F'dɔ:ra:'emɔn\u002F，简称DoKit， 一款功能齐全的客户端（ iOS 、Android、微信小程序 ）研发助手，你值得拥有。\n\n[Mand Mobile](https:\u002F\u002Fgithub.com\u002Fdidi\u002Fmand-mobile) 一款优秀的面向金融场景的 移动端UI组件库。\n\n\n[Cube-UI](https:\u002F\u002Fgithub.com\u002Fdidi\u002Fcube-ui)  基于 Vue.js 实现的精致移动端组件库。\n","Chameleon（卡梅龙）是一个跨端开发解决方案，允许开发者使用一套代码实现多平台的应用开发。其核心功能是通过CML（Chameleon Markup Language）技术，使得一次编写即可在Web、微信小程序、支付宝小程序、百度小程序、Android、iOS等多个平台上运行，并且保证了各端界面的一致性。基于Vue.js和Weex框架，Chameleon提供了丰富的组件库以及API接口支持，极大地简化了多端适配的工作量。此外，它还支持多态协议，在保持一致性的基础上保留了各平台特性的灵活性。该项目非常适合需要快速迭代并同时维护多个移动应用或小程序的企业和个人开发者使用。",2,"2026-06-11 03:26:15","top_topic"]