《開源精選》是我們分享Github、Gitee等開源社群中優質項目的欄目，包括技術、學習、實用與各種有趣的内容。本期推薦的是一個開源的小程式跨端統一解決方案。——chameleon。
研發同學在端内既追求 h5 的靈活性，也要追求性能趨近于原生。 面對入口擴張，App 用戶端、微信小程式、支付寶小程式、百度小程式、Android 廠商聯盟快應用、其他類小程式，單一功能在各平台都要重複實作，開發和維護成本成倍增加。迫切需要維護一套代碼可以建構多入口的解決方案，滴滴跨端解決方案 Chameleon 終于釋出。真正專注于讓一套代碼運作多端。
功能特性
開發效率高：獨創強大的跨多端文法檢查功能；擁有業内最優秀的工程化設計
可維護性好：獨創多态協定；輕松維護一套代碼實作跨多端
漸進式接入：一鍵導出原生元件；無污染引用原生元件
擴充性強：基于多态協定，可擴充任意底層接口；不強依賴架構的更新
基礎庫豐富：統一的 CML Native SDK；豐富的元件、API 庫
多端高度一緻：統一的代碼、界面互動、開發流程；多層次高度統一
設計理念
軟體架構設計裡面最基礎的概念“拆分”和“合并”，拆分的意義是“分而治之”，将複雜問題拆分成單一問題解決，比如後端業務系統的”微服務化“設計；“合并”的意義是将同樣的業務需求抽象收斂到一塊，達成高效率高品質的目的，例如後端業務系統中的“中台服務”設計。
而 Chameleon 屬于後者，通過定義統一的語言架構+統一多态協定，從多端（對應多個獨立服務）業務中抽離出自成體系、連續性強、可維護強的“前端中台服務”。
CML 即多端
支援平台：web、微信小程式、支付寶小程式、百度小程式、android(weex)、ios(weex)、qq 小程式、位元組跳動小程式、快應用、持續更新中
跨端目标
雖然各端環境千變萬化，但萬變不離其宗的是 MVVM 架構思想，Chameleon 目标是讓 MVVM 跨端環境大統一。
安裝
依賴環境
依賴環境：node >= 8.10.0、npm >= 5.6.0 安裝 chameleon-tool
建議使用nvm管理 Node 版本，暫不支援使用 yarn、cnpm 等進行安裝。
npm i -g chameleon-tool 安裝成功後，執行 cml -v 檢視目前版本， cml -h 檢視幫助文檔。
建立項目與啟動
- 執行 cml init project
- 輸入項目名稱
- 等待自動執行 npm install 依賴
- 切換到項目根目錄執行cml dev
- 會自動打開預覽界面 預覽界面如下：
目錄與檔案結構
├── chameleon.config.js // 項目的配置檔案
├── dist // 打包産出目錄
├── alipay // 支付寶小程式代碼
├── baidu // 百度小程式代碼
├── wx // 微信小程式代碼
├── tt // 頭條小程式代碼
├── qq // QQ小程式代碼
├── xx // 其他終端
├── mock // 模拟資料目錄
├── node_modules // npm包依賴
├── package.json
└── src // 項目源代碼
├── app // app啟動入口
├── components // 元件檔案夾
├── pages // 頁面檔案夾
├── router.config.json // 路由配置
└── store // 全局狀态管理 編輯器插件
- idea、WebStorm 插件 CML Language Support
- VS Code 插件 cml
- Atom 插件 language-cml
- Sublime 插件稽核中，敬請期待...
代碼示例
<template>
<view>
<text>{{title}}</text><text>{{reversedTitle}}</text>
</view>
</template>
<script>
class Index {
data = {
title: "chameleon"
}
computed = {
reversedTitle: function () {
return this.title.split('').reverse().join('')
}
}
mounted() {}
destroyed() {}
}
export default new Index();
</script> 從事過網頁程式設計的人知道，網頁程式設計采用的是 HTML + CSS + JS 這樣的組合，同樣道理，chameleon 中采用的是 CML + CMSS + JS。
- 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 采用與 Vue 一緻的元件化方案、單檔案組織方式、生命周期，同時資料響應能力對齊 Vue，資料管理能力對齊 Vuex，非常友善開發者上手、維護。
通過以上對于開發語言的介紹，相信你看到隻要是有過網頁程式設計知識的人都可以快速的上手chameleon的開發。
—END—
開源協定：Apache-2.0
開源位址：https://github.com/didi/chameleon