Chameleon是一個(gè)專業(yè)的跨多端開發(fā)的統(tǒng)一解決方案，之所以取名為變色龍，就是因?yàn)槠涓叨鹊倪m應(yīng)期，它可以像變色龍一樣適應(yīng)不同的環(huán)境。多端高度一致，無需關(guān)注各端文檔?；诙鄳B(tài)協(xié)議，不影響各端的差異化與靈活性。現(xiàn)在許多編程的小伙伴在面對(duì)入口擴(kuò)張、各種小程序和快應(yīng)用時(shí)，單一功能要想覆蓋到各大平臺(tái)，需要花費(fèi)較多的心血和時(shí)間，開發(fā)和維護(hù)成本成倍增加。使用CML就可以幫助你實(shí)現(xiàn)一套代碼運(yùn)行多端，一端所見即多端所見。

軟件特色

多端高度一致

深入到編程語言維度保障一致性，包括框架、生命周期、內(nèi)置組件、事件通信、路由、界面布局、界面單位、組件作用域、組件通信等高度統(tǒng)一。

豐富的組件

在用 CML 寫頁面時(shí)，chameleon 提供了豐富的組件供開發(fā)者使用，內(nèi)置的有button switch radio checkbox等組件，擴(kuò)展的有c-picker c-dialog c-loading等等,覆蓋了開發(fā)工作中常用的組件。

豐富的 API

為了方便開發(fā)者的高效開發(fā)，chameleon 提供了豐富的 API 庫(kù),發(fā)布為 npm 包c(diǎn)hameleon-api，里面包括了網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)存儲(chǔ)、地理位置、系統(tǒng)信息、動(dòng)畫等方法。

自由定制 API 和組件

基于強(qiáng)大的多態(tài)協(xié)議，可自由擴(kuò)展任意 API 和組件，不強(qiáng)依賴框架的更新。各端原始項(xiàng)目中已積累大量組件，也能直接引入到跨端項(xiàng)目中使用。

基于強(qiáng)大的多態(tài)協(xié)議，充分隔離各端差異化實(shí)現(xiàn)，輕松維護(hù)一套代碼實(shí)現(xiàn)跨多端。

智能規(guī)范校驗(yàn)

代碼規(guī)范校驗(yàn)，當(dāng)出現(xiàn)不符合規(guī)范要求的代碼時(shí)，編輯器會(huì)展示智能提示，不用挨個(gè)調(diào)試各端代碼，同時(shí)命令行啟動(dòng)窗口也會(huì)提示代碼的錯(cuò)誤位置。

漸進(jìn)式跨端

既想一套代碼運(yùn)行多端，又不用大刀闊斧的重構(gòu)項(xiàng)目？不僅可以用 cml 開發(fā)頁面，也可以將多端重用組件用 cml 開發(fā)，直接在原有項(xiàng)目里面調(diào)用。

先進(jìn)前端開發(fā)體驗(yàn)

Chameleon 不僅僅是跨端解決方案?；趦?yōu)秀的前端打包工具 Webpack，吸收了業(yè)內(nèi)多年來積累的最有用的工程化設(shè)計(jì)，提供了前端基礎(chǔ)開發(fā)腳手架命令工具，幫助端開發(fā)者從開發(fā)、聯(lián)調(diào)、測(cè)試、上線等全流程高效的完成業(yè)務(wù)開發(fā)。

業(yè)務(wù)線收集

使用CML業(yè)務(wù)線收集。

項(xiàng)目上線指南

#是否添加 polyfill

CML 框架中 js 代碼都是經(jīng)過了 babel 編譯，但是 babel 默認(rèn)只轉(zhuǎn)換語法，而不處理新的 API，例如Object.assign,Object.entries。如果項(xiàng)目中使用了一些不經(jīng)過 babel 的 API，并且線上產(chǎn)品需要兼容低版本系統(tǒng)的手機(jī)，CML 提供了在各端添加 polyfill 的配置 參見 babelPolyfill。

#靜態(tài)資源發(fā)布路徑

靜態(tài)資源發(fā)布路徑 是配合項(xiàng)目靜態(tài)資源最終線上地址,設(shè)置方法參見資源發(fā)布路徑。 例如： 項(xiàng)目中引用了一個(gè)本地圖片：

該圖片執(zhí)行 cml web build 打包到本地 web/static/img/chameleon_83ee00e.png;

如果預(yù)計(jì)將該靜態(tài)資源上線到https://static.cml.js/vender下

例如圖片線上地址https://static.cml.js/vender/web/static/img/chameleon_83ee00e.png。

則應(yīng)該將 publicPath 設(shè)置為https://static.cml.com/vender后執(zhí)行cml web build。

這樣代碼中的圖片地址線上就能夠正確訪問。 同理適用于 Web 端 html 頁面中注入的link和script標(biāo)簽。

#小程序中的靜態(tài)資源上線

由于小程序有包大小的限制，所有建議打包出的靜態(tài)資源單獨(dú)上線，不放在小程序包中，chameleon-tool@0.3.1 版本在 dev 模式也默認(rèn)將圖片的地址改成本地 web 服務(wù)器訪問的地址，解決 css 中 background-image 不能使用本地圖片的問題。

如果不將靜態(tài)資源單獨(dú)上線，注意要將 publicPath 設(shè)置為/，例如：

cml.config.merge({ wx: { build: { publicPath: "/" } } });

注：百度小程序中必須將靜態(tài)資源單獨(dú)上線, 因?yàn)椴恢С朱o態(tài)資源的。

常見問題

♦怎么理解框架的實(shí)現(xiàn)原理？

實(shí)現(xiàn)原理圖

♦我想使用 CML，是否需要大刀闊斧的重構(gòu)項(xiàng)目？

不需要，可以使用 CML 開發(fā)公用組件，導(dǎo)出到各端原有項(xiàng)目中使用。

♦用 CML 標(biāo)準(zhǔn)編寫代碼，是否增加調(diào)試成本？

我們實(shí)現(xiàn)了全面的語法檢查功能，且在持續(xù)加強(qiáng)。理論上框架是降低調(diào)試成本，就像從原生 js 開發(fā)到 vuejs、reactjs 是否認(rèn)為也增加了調(diào)試成本，見仁見智。

♦如何定位并解決 CML 開發(fā)中遇到的問題？

首先，當(dāng)我們遇到一些問題的時(shí)候，第一步要定位問題，定位問題的基本思路如下

初始化一個(gè)項(xiàng)目，以最基礎(chǔ)、最簡(jiǎn)單的demo復(fù)現(xiàn)出現(xiàn)問題的基本場(chǎng)景

通過在代碼中插入debugger進(jìn)行基本的斷點(diǎn)調(diào)試

github-issues搜索是否有類似問題

♦各端包括小程序的接口更新頻繁，如何保證框架編譯的抽象度和穩(wěn)定性？

1、自建輸入語法標(biāo)準(zhǔn) cml，編譯輸出結(jié)果自定的格式語法。 2、框架的 runtime 層實(shí)現(xiàn)匹配接收的編譯輸出代碼，runtime 跟隨小程序更新。 3、框架整體方向一致：mvvm 底層設(shè)計(jì)模式為標(biāo)準(zhǔn)設(shè)計(jì)接口。 基于以上三條，你可以理解為：我們?cè)O(shè)計(jì)了一個(gè)框架統(tǒng)一標(biāo)準(zhǔn)協(xié)議，再在各個(gè)端 runtime 分別實(shí)現(xiàn)這個(gè)框架，宏觀的角度就像 nodejs 同時(shí)運(yùn)行在 window 和 macOS 系統(tǒng)，就像 flutter 運(yùn)行在 Android 和 iOS 一個(gè)道理。各端小程序接口更新除非遇到不向下兼容情況，否則不影響框架，如果真遇到不向下兼容更新，這種情況下是否用框架都需要改。

♦一套代碼運(yùn)行多端，如何保證各個(gè)端充分的定制化空間？

基于多態(tài)協(xié)議，充分保證各端發(fā)揮，且保證最終一致性。

♦各端包括小程序的接口更新后，是否一定依賴框架更新？

同上一個(gè)問題，基于多態(tài)協(xié)議，可自己直接調(diào)用新的底層接口。

更新內(nèi)容

支持chameleon-api-miniapp按需加載

支持組件動(dòng)態(tài)加載

支持路由懶加載

支持終端構(gòu)建進(jìn)度 processBar 可配置，默認(rèn)關(guān)閉

修復(fù)config.json生成的weex端信息缺失

支持壓縮模式下console信息可配置是否刪除

chameleon-linter修復(fù)useingComponents中引入動(dòng)態(tài)組件校驗(yàn)