CML特點是「一端所見即多端所見」，你只需開發一次就能跑所有端。

跟隨這個教程，開啟你的chameleon跨端開發。

1 起步

1.1 安裝運行環境

開發chameleon項目的第一步是要安裝運行環境和全局安裝chameleon-tool。

運行環境

node >= 8.10.0 npm >= 5.6.0

建議安裝使用nvm管理node版本。

1.2 安裝腳手架工具

安裝成功後，執行 cml -v 即可查看當前版本， cml -h查看命令行幫助文檔，更多命令參見腳手架工具。接下來就可以使用它快速的創建chameleon項目。

嘗鮮版

嘗鮮版提供了百度小程序和支付寶小程序的支持如果想提前使用可移步這裡查看使用

1.3 創建與啟動第一個chameleon項目

  • 執行 cml init project
  • 輸入項目名稱
  • 等待自動執行npm install依賴
  • 切換到項目根目錄執行cml dev
  • 會自動打開預覽界面 預覽界面如下：

web端可以點擊模擬器內頁面右上角打開新的瀏覽器窗口。

native端的效果請下載chameleon playground(目前可下載Android端，IOS端即將發布)或者下載weex playground掃碼預覽

小程序端請下載微信開發者工具，打開項目根目錄下的 /dist/wx 目錄預覽。

支付寶、百度小程序正在alpha版本中，這裡查看使用；快應用正在測試中。

接下來，我們一起看看chameleon項目的目錄結構與代碼構成。

2 目錄結構與代碼構成

2.1 目錄結構

剛剛生成chameleon項目的目錄結構如下：

編輯器中語法高亮，暫時使用.vue的插件，參見編輯器插件，後續會推出更強大的插件。

chameleon的目錄結構將組件、頁面、路由、全局狀態管理、靜態資源、模擬數據等按照功能進行劃分。更多參見目錄結構。 你可以留意到這個項目中的app入口、組件和頁面下都是.cml為後綴的文件，接下來我們就看看.cml文件代碼構成。

2.2 .cml文件代碼構成

從事過網頁編程的人知道，網頁編程採用的是HTML + CSS + JS這樣的組合，同樣道理，chameleon中採用的是 CML + CMSS + JS。我們定義了擴展名為.cml的文件將一個組件需要的所有部分組合（CML、CMSS、JS邏輯交互、JSON配置）在一起，更方便開發。

2.2.1 CML

CML（Chameleon Markup Language）用於描述頁面的結構，我們知道HTML是有一套標準的語義化標籤，例如文本是<span> 按鈕是<button>。CML同樣具有一套標準的標籤，我們將標籤定義為組件，CML為用戶提供了一系列組件。CML中還支持模板語法，例如條件渲染、列表渲染，數據綁定等等，更多參見CML。簡單舉例：

同時，CML支持使用類VUE語法，讓你更快入手。

2.2.2 CMSS

CMSS(Chameleon Style Sheets)用於描述CML頁面結構的樣式語言，其具有大部分CSS的特性，也做了一些擴充和修改。

  • 1 支持css的預處語言less與stylus。
  • 2 新增了尺寸單位cpx。在寫 CSS 樣式時，開發者需要考慮到手機設備的屏幕會有不同的寬度和設備像素比，採用一些技巧來換算一些像素單位。CMSS 在底層支持新的尺寸單位 cpx ，開發者可以免去換算的煩惱，只要交給chameleon底層來換算即可，由於換算採用的浮點數運算，所以運算結果會和預期結果有一點點偏差。
  • 3 為了各端樣式一致性，內置了一些一致性基礎樣式。
  • 4 chameleon 布局模型基於 CSS Flexbox，以便所有頁面元素的排版能夠一致可預測，同時頁面布局能適應各種設備或者屏幕尺寸。
  • 5 cml文件中支持樣式多態，即可以針對不同的平台寫不同的樣式。
  • 6 如果只跨web和小程序端CMSS將會更加靈活。 簡單舉例：

更多參見CMSS。

2.2.3 JS邏輯交互

JS語法用於處理頁面的邏輯部分，cml文件<script></script>標籤中的export default導出的VM對象即採用JS語法。它負責業務邏輯、交互邏輯的處理與驅動視圖更新，擁有完整的生命周期，watch，computed，數據雙向綁定等優秀的特性，能夠快速提高開發速度、降低維護成本。

  • data為數據。
  • props為屬性，父組件進行傳遞。
  • computed為計算屬性，是動態的數據，可以對數據進行邏輯處理後返回結果。
  • watch為偵聽屬性，監聽數據的變化，觸發相應操作。
  • methods為方法，處理業務邏輯與交互邏輯。
  • beforeCreate、created等生命周期，掌握生命周期的觸發時機，做相應操作。 簡單舉例：更多參見邏輯層。2.2.4 JSON配置JSON配置部分用於描述應用、頁面或組件的配置信息，對應於小程序的json配置文件。可以在其中為各端做不同的配置。舉例如下，base對象為各端共用的配置對象,都引組件demo-com。wx、alipay、baidu分別對應生成微信小程序、支付寶小程序和百度小程序的各自配置。更多參見組件配置。通過以上對於CML、CMSS、JS交互邏輯以及JSON配置的學習，你已經具備了開發chameleon的頁面和組件的能力, 可以參考卡片拖拽手勢刪除效果實現你想要的頁面效果。但要想快速開發還需要掌握chameleon提供的組件和API。

3 開發能力

3.1 組件

chameleon提供了豐富的基礎組件給開發者，開發者可以像搭積木一樣，組合各種組件拼合成需要的功能。 就像 HTML 的 div, p 等標籤一樣，在chameleon裡邊，你只需要在 WXML 寫上對應的組件標籤名字就可以把該組件顯示在界面上，例如，你需要一個switch開關組件，你只需要這樣寫：

使用組件的時候，還可以通過屬性傳遞值給組件，讓組件可以以不同的狀態去展現，例如checked屬性用於控制switch的開關狀態: 組件的內部行為也會通過事件的形式讓開發者可以感知，例如c-bind:change綁定change事件的處理函數為switchChange方法，在該方法中拿到改變的值，修改switchValue的值。 更多的組件的使用參見組件。

3.2 API

chameleon封裝了豐富的基礎api庫chameleon-api供開發者使用，這些api屏蔽了各平台的底層介面差異，例如數據存儲功能，我們只需要這樣使用，而不需要關心各端數據存儲介面的差異。

例如彈出toast方法，只需要這樣使用：

注意：介面均以promise形式進行返回，所以你可以結合非同步流程式控制制如async、await進行操作。 更多API能力參見API

3.3 路由管理

chameleon項目是應用級的項目，應用內允許多個頁面的存在，下面學習項目中多個頁面之間的路由管理與跨應用之間的跳轉。 chameleon項目內置了一套各端統一的路由管理方式，項目根目錄下的src/router.config.json是路由的配置文件,內容如下:

  • mode 為web端路由模式，分為hash或history。
  • domain 為web端地址的域名。
  • routes 為路由配置
    • path為路由對應的cml文件的路徑,以src目錄下開始的絕對路徑，以/開頭。
    • url為web端的訪問路徑
    • mock為該路由對應的mock文件(僅模擬模板下發需要)

  • 小程序端，構建時會將router.config.json的內容，插入到app.json的pages欄位，實現小程序端的路由。

路由跳轉分為應用內跳轉和應用間跳轉，chameleon-api都提供了相應的方法：

  • navigateTo 打開新頁面
  • redirectTo 頁面重定向
  • navigateBack 頁面返回
  • open 打開其他應用頁面

例如應用內打開新頁面：

更多參見路由配置。

3.4 數據管理

當項目中的組件和頁面越來越多，越來越複雜後，他們之間會出現共同管理數據狀態的情況，這時我們建議使用chameleon提供的全局數據管理chameleon-store進行管理，它位於項目根目錄下的src/store中，目錄結構如下：

類似 Vuex 數據理念和語法規範，chameleon-store 主要有以下核心概念：

  • state
  • getters
  • mutation
  • action
  • 子模塊

通過 chameleon-store 創建的Store實例,方法如下： ChameleonStore.createStore(options: Object): Object更多參見數據管理。

可以通過cml init project --demo todo 初始化todo 示例demo，學習其中對於數據管理的使用。

3.5 自由定製API和組件

目前學習到現在，我們都是利用一套代碼實現多端的開發，但是當你遇到特殊的情況時，一套代碼無法滿足多端的需求時，chameleon提供的多態協議，可以讓你自由的擴展API和組件。有如下幾種情況：

  • 第一 定製化的組件，比如要使用echarts組件，這時就需要使用多態組件實現，例如手把手教你系列- 實現多態 echart。
  • 第二 定製化的底層介面，可以參考手把手教你系列- 實現多態API。
  • 第三 業務需求導致的各端差異化實現，比如web端和小程序要有不用的邏輯處理，可以利用多態組件和多態介面實現。

註： 多態協議是Chameleon業務層代碼和各端底層組件和介面的分界點，是跨端底層差異化的解決方案，普通用戶開發基本上使用不到多態協議，因為chameleon已經使用多態協議封裝了豐富的組件和介面。

4 工程化能力

當我們執行cml dev進行開發時，就已經使用了chameleon的工程化能力，如果還想使用熱更新與自動刷新、調試窗口、mock數據、代碼的壓縮、資源發布路徑、打包資源分析、文件指紋等功能就需要進一步的學習。

mock數據是本地開發必不可少的工作，chameleon項目中在mock文件夾的文件中寫express中間件的形式mock數據,更多參見 數據mock，例如：

chameleon的其他工程化配置統一收斂在項目根目錄下的chameleon.config.js文件，在該文件中可以使用全局對象cml的api去操作配置對象。例如：

配置當前項目支持的端

配置是否進行文件壓縮

配置資源發布路徑，分離線上和線下的資源路徑。

更多配置參見工程配置

5 漸進式跨端

如果你既想一套代碼運行多端，又不用大刀闊斧的重構項目，可以將多端重用組件用Chameleon開發，直接在原有項目裡面調用。參見導入與導出。也有如下手把手實例進行參考

  • 手把手教你系列 - 普通項目使用chameleon跨端組件
  • 手把手教你系列 - webpack集成chameleon

6 端渲染能力接入

如果你需要跨native端渲染，則需要接入chameleon SDK，目前支持的渲染引擎是 weex，即將支持 react native，使用時二者選其一作為項目的 native 渲染引擎。chameleon SDK包括對原生組件和本地api能力的擴展，對性能和穩定性的優化。使用方式可以參見Android Chameleon SDK 與IOS Chameleon SDK。

7 智能規範校驗

chameleon提供了多種規範校驗，對這些規範的學習可以提高開發效率，保證代碼質量。 介面校驗語法 是使用多態協議擴展多態組件和多態介面時使用。可以通過配置進行開啟或者關閉。 全局變數校驗 是保證跨端代碼全局變數正確性的檢查方法，可以通過配置進行開啟或者關閉。 代碼規範校驗 是對項目結構,文件規範，樣式規範等進行校驗，可以通過配置進行開啟或者關閉。

推薦閱讀：

相关文章