Chameleon快速上手簡易教程

時間  2019-11-24
標籤 chameleon 快速 上手 簡易 教程 简体版
原文   原文鏈接

CML特色是「一端所見即多端所見」，你只需開發一次就能跑全部端。 跟隨這個教程，開啓你的chameleon跨端開發。php

1 起步

1.1 安裝運行環境

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

運行環境html

node >= 8.10.0 npm >= 5.6.0vue

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

1.2 安裝腳手架工具

npm i -g chameleon-tool
複製代碼

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

嚐鮮版android

嚐鮮版提供了百度小程序和支付寶小程序的支持
若是想提早使用可移步這裏查看使用webpack

1.3 建立與啓動第一個chameleon項目

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

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

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

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

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

接下來，咱們一塊兒看看chameleon項目的目錄結構與代碼構成。

2 目錄結構與代碼構成

2.1 目錄結構

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

├── chameleon.config.js                 // 項目的配置文件
├── dist                                // 打包產出目錄
├── mock                                // 模擬數據目錄
├── node_modules                        // npm包依賴，基於多態協議直接使用各端原生組件
├── package.json
└── src                                 // 項目源代碼 
    ├── app                             // app入口
    ├── components                      // 組件文件夾
    ├── pages                           // 頁面文件夾
    ├── router.config.json              // 路由配置文件
    └── store                           // 全局狀態管理
複製代碼

編輯器中語法高亮，暫時使用.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。簡單舉例：

<template>
  <view>
    <!-- 數據綁定與計算屬性 -->
    <text>{{ message }}</text>
    <text class="class1">{{ message2 }}</text>

    <!-- 條件與循環渲染 -->
    <view c-if="{{showlist}}">
      <view c-for="{{array}}" c-for-index="idx" c-for-item="itemName" c-key="city" >
        <text> {{idx}}: {{itemName.city}}</text>
      </view>
    </view>

    <!-- 事件綁定 -->
    <view c-bind:tap="changeShow"><text>切換展現</text></view>
  </view>
</template>

<script>
class Index {
  data = {
    message: 'Hello Chameleon!',
    array: [{
        city: '北京'
      },
      {
        city: '上海'
      },
      {
        city: '廣州'
      }],
    showlist: true
  }
  computed = {
    message2: function() {
      return 'computed' + this.message;
    }
  }
  watch = {
    showlist(newVal, oldVal) {
      console.log(`showlist changed:`+ newVal)
    }
  }
  methods = {
    changeShow() {
      this.showlist = !this.showlist;
    }
  }
}
export default new Index();
</script>
複製代碼

同時，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將會更加靈活。 簡單舉例：
<style>
@import './global.css';
@size: 10px;

.header {
  width: @size;
  height: @size;
}
</style>
複製代碼

更多參見CMSS。

2.2.3 JS邏輯交互

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

  • data爲數據。
  • props爲屬性，父組件進行傳遞。
  • computed爲計算屬性，是動態的數據，能夠對數據進行邏輯處理後返回結果。
  • watch爲偵聽屬性，監聽數據的變化，觸發相應操做。
  • methods爲方法，處理業務邏輯與交互邏輯。
  • beforeCreate、created等生命週期，掌握生命週期的觸發時機，作相應操做。 簡單舉例： 
    <script>
class Index {
// data
data =  {
  message: 'Hello',
}
// 計算屬性
computed = {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
// 觀察數據變化
watch: {
  message: function (newV, oldV) {
  }
}
// 各類生命週期
mounted: function(res) {
  // 模板或者html編譯完成,且渲染到dom中完成,在整個vue的生命週期中只執行一次
}
}
export default new Index();
</script>
複製代碼
    更多參見邏輯層。

    2.2.4 JSON配置

    JSON配置部分用於描述應用、頁面或組件的配置信息，對應於小程序的json配置文件。能夠在其中爲各端作不一樣的配置。舉例以下，base對象爲各端共用的配置對象,都引組件demo-com。wx、alipay、baidu分別對應生成微信小程序、支付寶小程序和百度小程序的各自配置。更多參見組件配置。 
    <script cml-type="json">
{
"base": {
  "usingComponents": {
    "demo-com": "/components/demo-com/demo-com"
  }
},
"wx": {
  "navigationBarTitleText": "index",
  "backgroundTextStyle": "dark",
  "backgroundColor": "#E2E2E2"
},
"alipay": {
  "defaultTitle": "index",
  "pullRefresh": false,
  "allowsBounceVertical": "YES",
  "titleBarColor": "#ffffff"
},
"baidu": {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "index",
  "backgroundColor": "#ffffff",
  "backgroundTextStyle": "dark",
  "enablePullDownRefresh": false,
  "onReachBottomDistance": 50
}
}
</script>
複製代碼
    經過以上對於CML、CMSS、JS交互邏輯以及JSON配置的學習，你已經具有了開發chameleon的頁面和組件的能力, 能夠參考卡片拖拽手勢刪除效果實現你想要的頁面效果。但要想快速開發還須要掌握chameleon提供的組件和API。

3 開發能力

3.1 組件

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

<template>
  <switch
    checked="{{ switchValue }}"
    label="Switch"
    c-bind:change="switchChange"
    >
  </switch>
</template>
<script>
class Switch {
  data = {
    switchValue: false
  }
  methods = {
    switchChange (e) {
      this.switchValue = e.detail.value
    }
  }
};
export default new Switch();
</script>
<script cml-type="json">
{
  "base": {}
}
</script>
複製代碼

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

3.2 API

chameleon封裝了豐富的基礎api庫chameleon-api供開發者使用，這些api屏蔽了各平臺的底層接口差別，例如數據存儲功能，咱們只須要這樣使用，而不須要關心各端數據存儲接口的差別。

import cml from 'chameleon-api'
cml.setStorage('name', 'chameleon').then(()=>{
},function(err){
})
複製代碼

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

import cml from 'chameleon-api'
cml.showToast({
  message: 'Hello chameleon!',
  duration: 1000
})
複製代碼

注意：接口均以promise形式進行返回，因此你能夠結合異步流程控制如async、await進行操做。 更多API能力參見API

3.3 路由管理

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

{
  "mode": "history",
  "domain": "https://www.chameleon.com",
  "routes":[
    {
      "url": "/cml/h5/index",
      "path": "/pages/index/index",
      "mock": "index.php"
    }
  ]
}
複製代碼
  • 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 打開其餘應用頁面

例如應用內打開新頁面：

import cml from 'chameleon-api';
cml.navigateTo({
  path: '/pages/page2/page2'
})
複製代碼

更多參見路由配置。

3.4 數據管理

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

└── store
    ├── action-types.js   # 定義 actions 的類型
    ├── actions.js        # 根級別的 actions
    ├── getter-types.js   # 定義 getters 的類型
    ├── getters.js        # 根級別的 getters
    ├── index.js          # 咱們組裝模塊並導出 store 的地方
    ├── mutation-types.js # 定義 mutations 的類型
    ├── mutations.js      # 根級別的 mutation
    ├── state.js          # 組件初始狀態數據
    └── modules           # 子模塊
        ├── ...
複製代碼

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

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

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

3.5 自由定製API和組件

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

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

4 工程化能力

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

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

module.exports = [
  {
    method: ['get', 'post'],
    path: '/api/getMessage',
    controller: function (req, res, next) {
      res.json({
        total: 0,
        message: [{
          name: 'Hello chameleon!'
        }]
      });
    }
  }
]
複製代碼

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

配置當前項目支持的端

cml.config.merge({
  platforms: ['web','wx'],
});
複製代碼

配置是否進行文件壓縮

cml.config.merge({
  web: {
    dev: {
      minimize: true
    }
  }
});
複製代碼

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

cml.config.merge({
  web: {
    build: {
      publicPath: "http://www.chameleon.com/static"
    }
  }
});
複製代碼

更多配置參見工程配置

5 漸進式跨端

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

6 端渲染能力接入

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

7 智能規範校驗

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程