摘要：但是從年微信推出小程序，到至今各大廠商都推出自己的小程序，跨端開發(fā)就不僅僅是技術(shù)的問題了。實現(xiàn)了微信端的基本擴展，用戶可以以此為模板進行開發(fā)。

新框架太多？學(xué)不動啦？有這一套跨端標準，今后再也不用學(xué)習(xí)新框架了。

各個小程序按自己喜好“各自為政”？有了這套標準，再也不用重復(fù)開發(fā)各種新平臺啦。

如今前端比較流行的 React Native、Weex、Flutter 等跨平臺開發(fā)框架，對于開發(fā)來說屬于技術(shù)方案的選擇，比如，我們會考慮用這個技術(shù)開發(fā)，性能會不會超過 h5，開發(fā)效率會不會超過原生開發(fā)等等。

但是從 2017 年微信推出小程序，到至今各大廠商都推出自己的小程序，跨端開發(fā)就不僅僅是技術(shù)的問題了。已經(jīng)變成了必爭的流量入口。現(xiàn)在的小程序大戰(zhàn)像極了當前的瀏覽器大戰(zhàn)。大戰(zhàn)中受苦的是我們一線開發(fā)者，同樣的應(yīng)用要開發(fā) N 次，面對了前所未有的挑戰(zhàn)，所以跨端框架的產(chǎn)生是大趨勢下的必然產(chǎn)物。

chameleon 基于對跨端工作的積累， 規(guī)范了一套跨端標準，稱之為 MVVM+協(xié)議；開發(fā)者只需要按照標準擴展流程，即可快速擴展任意 MVVM 架構(gòu)模式的終端。并讓已有項目無縫運行新端。所以如果你希望讓 chameleon 快速支持淘寶小程序、React Native？只需按標準實現(xiàn)即可擴展。

最終讓開發(fā)者只需要用 chameleon 開發(fā)，就可以在任意端運行，再也不用學(xué)習(xí)新平臺框架啦。

滴滴、芒果 TV、阿里的同學(xué)合作，正在按照跨端協(xié)議流程進行字節(jié)跳動小程序的共建開發(fā)。

分工排期如下：https://github.com/didi/chame...

倉庫地址： https://github.com/chameleon-...

快應(yīng)用官方研發(fā)團隊也正在接入中

分工排期如下：https://github.com/didi/chame...

倉庫地址： https://github.com/quickappcn...

跨端框架最核心的工作是統(tǒng)一，chameleon 定義了標準的跨端協(xié)議，通過編譯時+運行時的手段去實現(xiàn)各端的代碼和功能，其實現(xiàn)原理如下圖所示。

其中運行時和基礎(chǔ)庫部分利用多態(tài)協(xié)議實現(xiàn)各端的獨立性與框架的統(tǒng)一性。chameleon 目前支持的端都是采用這種方式，我們定義了擴展一個新端所需要實現(xiàn)的所有標準，用戶只需要按照這些標準實現(xiàn)即可完成一個新端的擴展。

我們再來看一張 chameleon 的設(shè)計圖，能夠?qū)崿F(xiàn)標準化的擴展新端，得益于多態(tài)協(xié)議中對各層代碼進行了接口的定義，各端代碼按照接口定義進行實現(xiàn)，向用戶代碼提供統(tǒng)一調(diào)用，同時還提供”多態(tài)協(xié)議“讓用戶代碼保障可維護性的前提下，直接觸達各端原生能力的方式。

API 接口協(xié)議：定義基礎(chǔ)接口能力標準。

內(nèi)置組件協(xié)議：定義基礎(chǔ) UI 組件標準。

框架協(xié)議：定義生命周期、路由等框架標準。

DSL 協(xié)議：定義視圖和邏輯層的語法標準。

多態(tài)實現(xiàn)協(xié)議：定義允許用戶使用差異化能力標準。

簡單來說只需要實現(xiàn) 6 個 npm 包。

chameleon-api提供了網(wǎng)絡(luò)請求，數(shù)據(jù)存儲，獲取系統(tǒng)信息，交互反饋等方法，用戶需要創(chuàng)建一個 npm 包，結(jié)構(gòu)參考cml-demo-api。將chameleon-api中提供的每個方法利用多態(tài)接口擴展語法擴展新端的實現(xiàn)。
以擴展一個alert方法為例,chameleon-api中alert方法的接口定義文件為chameleon-api/src/interfaces/alert.interface，其中的接口定義內(nèi)容如下：

用戶實現(xiàn)的interface文件中采用語法引入chameleon-api中alert方法的 interface 文件, 實現(xiàn)uiInterface。

// 引入官方標準interface文件

// 擴展實現(xiàn)新端（以頭條小程序為例，假設(shè)端擴展標識為：tt）

組件分為內(nèi)置組件chameleon-ui-builtin和擴展組件cml-ui。所以用戶需要創(chuàng)建兩個 npm 包分別實現(xiàn)這兩個組件庫，結(jié)構(gòu)參考cml-demo-ui-builtin和cml-demo-ui。利用多態(tài)組件擴展語法，對原有組件庫中的每一個組件進行新端的實現(xiàn)。

原有組件庫中的組件也分為兩種，一種為各端都有分別實現(xiàn)的多態(tài)組件，例如chameleon-ui-builtin中的button組件。實現(xiàn)起來新端基本上也是要多帶帶實現(xiàn)。另一種例如chameleon-ui-builtin中的radio組件，各端的實現(xiàn)都是用的chameleon-ui-builtin/components/radio/radio.cml。所以新端基本也可以復(fù)用這個實現(xiàn)，(還需要測試情況確實是否可以復(fù)用)。

新端獨立實現(xiàn)

例如：

編寫 my-ui-builtin/components/button/button.interface

// 引入官方標準interface文件

編寫 my-ui-builtin/components/button/button.demo.cml

獨立實現(xiàn)的my-ui-builtin/components/button/button.demo.cml文件屬于多態(tài)組件的灰度層，可以調(diào)用各端底層組件和 api，具體例子參見button和scroller的實現(xiàn)。

新端復(fù)用現(xiàn)有組件

編寫 my-ui-builtin/components/radio/button.interface

// 引入官方標準interface文件

// 復(fù)用官方的實現(xiàn)

chameleon 內(nèi)部會將整個項目文件編譯為如下編譯圖結(jié)構(gòu)，節(jié)點中的內(nèi)容經(jīng)過了標準編譯，比如script節(jié)點的babel處理，style節(jié)點的less與stylus處理等等。

節(jié)點的數(shù)據(jù)結(jié)構(gòu)如下：

class CMLNode {
  constructor(options = {}) {
    this.realPath; // 文件物理地址  會帶參數(shù)
    this.moduleType; // template/style/script/json/asset
    this.dependencies = []; // 該節(jié)點的直接依賴       app.cml依賴pages.cml pages.cml依賴components.cml js依賴js
    this.childrens = []; // 子模塊 cml文件才有子模塊
    this.source; // 模塊源代碼
    this.output; // 模塊輸出  各種過程操作該字段
    ......
  }
}

用戶只需要實現(xiàn)一個編譯插件類，利用鉤子方法實現(xiàn)對節(jié)點的編譯，所有節(jié)點編譯完后再進行文件的組織。編譯類如下：

module.exports = class DemoPlugin {
  constructor(options) {
    ......
  }
  /**
   * @description 注冊插件
   * @param {compiler} 編譯對象
   * */
  register(compiler) {
    // 編譯script節(jié)點，比如做模塊化
    compiler.hook("compile-script", function(currentNode, parentNodeType) {
    })
    // 編譯template節(jié)點 語法轉(zhuǎn)義
    compiler.hook("compile-template", function(currentNode, parentNodeType) {
    })
    // 編譯style節(jié)點  比如尺寸單位轉(zhuǎn)義
    compiler.hook("compile-style", function(currentNode, parentNodeType) {
    })
    // 編譯結(jié)束進入打包階段
    compiler.hook("pack", function(projectGraph) {
      // 遍歷編譯圖的節(jié)點，進行各項目的拼接
      // 調(diào)用writeFile方法寫入文件
      // compiler.writeFile()
    })
    ......
  }
}

運行時主要是對 cml 文件的邏輯對象進行適配，chameleon 內(nèi)部將 cml 文件的邏輯對象分為三類 App、Page、Component。對應(yīng)會調(diào)用用戶運行時 npm 包的createApp、createPage、createComponent方法，所以對外只需要實現(xiàn)這三個方法。

例如一個 Page 的邏輯對象如下：

class PageIndex {
  data = {
    name: "chameleon"
  }
  computed = {
    sayName () {
      return "Hello" + this.name;
    }
  }
  mounted() {
  }
}
export default new PageIndex();

編譯時就會自動插入用戶的運行時方法處理邏輯對象，例如cml-demo-runtime：

class PageIndex {
  ......
}
export default new PageIndex();

// 編譯時自動插入用戶配置的運行時方法
import {createPage} from "cml-demo-runtime";
createPage(exports.default);

createApp、createPage、createComponent方法,參考cml-demo-runtime的結(jié)構(gòu)進行實現(xiàn)，需要include chameleon-runtime中相應(yīng)的接口進行實現(xiàn)，才能夠?qū)崿F(xiàn)對chameleon-runtime的擴展。用戶的工作量主要在于對邏輯對象的處理，可以參考chameleon-runtime中的實現(xiàn)方式，一般需要如下方面的適配工作。

從宏觀來看，運行時處理可分為：

輸入Options對象的適配，參考

跨端運行時能力注入，參考

從微觀來看，有以下處理：

生命周期：映射表參考 和 實現(xiàn)參考

組件 props 屬性：適配參考 和 變化監(jiān)聽參考

數(shù)據(jù)響應(yīng)：數(shù)據(jù)響應(yīng)實現(xiàn)參考

computed 計算能力：實現(xiàn)參考

watch 監(jiān)聽能力：適配參考 和 實現(xiàn)參考

methods 方法屬性：適配參考

mixins 能力：適配參考 和 合并參考

生命周期多態(tài)

例如： createPage 方法的實現(xiàn)

chameleon-store提供了類似 Vuex 的數(shù)據(jù)管理解決方案，具體標準參見數(shù)據(jù)管理。同樣利用多態(tài)協(xié)議實現(xiàn)其功能。

擴展新端 demo 示例倉庫: https://github.com/chameleon-...。 實現(xiàn)了微信端的基本擴展，用戶可以以此為模板進行開發(fā)。

更詳細的教程參見擴展新端操作教程。

期待更多人的加入開源。想了解更多 chameleon 信息請訪問官網(wǎng) cmljs.org

預(yù)告：chameleon 1.0正式版即將到來