简介

Chameleon /kəˈmiːlɪən/ 是滴滴团队开发的一个跨平台框架,简写CML,中文名卡梅龙;中文意思变色龙,意味着就像变色龙一样能适应不同环境的跨端整体解决方案。

支持平台:web、微信小程序、支付宝小程序、百度小程序、android(weex)、ios(weex)、qq 小程序、头条小程序、快应用

设计理念

软件架构设计里面最基础的概念“拆分”和“合并”,拆分的意义是“分而治之”,将复杂问题拆分成单一问题解决,比如后端业务系统的”微服务化“设计;“合并”的意义是将同样的业务需求抽象收敛到一块,达成高效率高质量的目的,例如后端业务系统中的“中台服务”设计。

而 Chameleon 属于后者,通过定义统一的语言框架+统一多态协议,从多端(对应多个独立服务)业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。

虽然不同各端环境千变万化,但万变不离其宗的是 MVVM 架构思想,Chameleon 目标是让 MVVM 跨端环境大统一。

开发语言

JS语法用于处理页面的逻辑层,与普通网页编程相比,本项目目标定义标准 MVVM 框架,拥有完整的生命周期,watch,computed,数据双向绑定等优秀的特性,能够快速提高开发速度、降低维护成本。

CML(Chameleon Markup Language)用于描述页面的结构,我们知道 HTML 是有一套标准的语义化标签,例如文本是<span> 按钮是<button>。CML 同样具有一套标准的标签,我们将标签定义为组件,CML 为用户提供了一系列组件。同时 CML 中还支持模板语法,例如条件渲染、列表渲染,数据绑定等等。同时,CML 支持使用类 VUE 语法,让你更快入手。

CMSS(Chameleon Style Sheets)用于描述 CML 页面结构的样式语言,其具有大部分 CSS 的特性,并且还可以支持各种 css 的预处语言less stylus。

目录结构

项目结构

使用cml init project 生成的项目结构如下:

├── chameleon.config.js                 // 项目的配置文件
├── dist                                // 打包产出目录
├── mock                                // 模拟数据目录
├── node_modules                        // npm包依赖
├── package.json
└── src                                 // 项目源代码
    ├── app                             // app启动入口
    ├── components                      // 组件文件夹
    ├── pages                           // 页面文件夹
    ├── router.config.json              // 路由配置文件
    └── store                           // 全局状态管理

其中,dist目录中有各平台打包出来的产物,包括:

  • wx 微信小程序
  • alipay 支付宝小程序
  • baidu 百度小程序

文件夹和文件

文件 必须 作用
chameleon.config.js 必须 项目配置文件
dist 必须 自动生成,用户无需关注。项目编译目标目录
mock 必须 数据mock编写文件夹
node_modules 必须 自动生成,用户无需关注。npm包安装文件夹
package.json 必须 npm包配置文件
app 必须 应用启动入口根文件夹
components 必须 用户组件根文件夹
pages 必须 页面根文件夹
router.config.json 必须 路由配置文件
store 必须 数据管理文件夹

CML 文件

一个CML文件开发的组件由四块内容组成,分别是:

标签 必须 属性 作用
template 必须 lang:cml|vue 提供组件结构、事件绑定、数据绑定、样式绑定
script 必须 暂无 组件逻辑
style 必须 lang:less|stylus 组件样式表
json(使用script标签设置cml-type属性) 必须 cml-type:json 组件配置

参考资料

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress