Chameleon 起步

初始化

安裝 chameleon-tool

依賴環(huán)境：node >= 8.10.0、npm >= 5.6.0

建議使用nvm管理 Node 版本，暫不支持使用 yarn、cnpm 等進行安裝。

npm i -g chameleon-tool

安裝成功后，執(zhí)行 cml -v 查看當(dāng)前版本， cml -h 查看幫助文檔。

創(chuàng)建項目與啟動

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

Web 端可以點擊模擬器內(nèi)頁面右上角打開 新的瀏覽器窗口。

Native 端的效果請下載 Chameleon Playground (目前可下載 Android 端，iOS 端即將發(fā)布)或者下載 Weex Playground 掃碼預(yù)覽

小程序端請下載對應(yīng)小程序開發(fā)工具，打開項目根目錄下的 /dist/[wx|alipay|baidu|其他] 目錄預(yù)覽。

• 微信開發(fā)者工具、
• 支付寶開發(fā)者具、
• 百度開發(fā)者工具
• QQ 開發(fā)者工具

對于字節(jié)跳動小程序，需要按照字節(jié)跳動小程序接入教程配置完畢之后，可以在 dist/tt 下用字節(jié)跳動小程序開發(fā)者工具打開對應(yīng)的應(yīng)用程序

目錄與文件結(jié)構(gòu)

生成的目錄結(jié)構(gòu)如下，詳細(xì)介紹參見目錄結(jié)構(gòu)。

├── chameleon.config.js                 // 項目的配置文件
├── dist                                // 打包產(chǎn)出目錄
  ├── alipay                            // 支付寶小程序代碼
  ├── baidu                             // 百度小程序代碼
  ├── wx                                // 微信小程序代碼
  ├── tt                                // 頭條小程序代碼
  ├── qq                                // QQ小程序代碼
  ├── xx                                // 其他終端
├── mock                                // 模擬數(shù)據(jù)目錄
├── node_modules                        // npm包依賴
├── package.json
└── src                                 // 項目源代碼
    ├── app                             // app啟動入口
    ├── components                      // 組件文件夾
    ├── pages                           // 頁面文件夾
    ├── router.config.json              // 路由配置
    └── store                           // 全局狀態(tài)管理

編輯器中使用.cml的插件語法高亮，參見編輯器插件，插件持續(xù)覆蓋更多編輯器。

編輯器插件

• idea、WebStorm 插件 CML Language Support
• VS Code 插件 cml
• Atom 插件 language-cml
• Sublime 插件審核中，敬請期待...

語法體驗

替換src/pages/index/index.cml文件，刪除src/pages/index/index.cml文件中的所有代碼，然后替換為下面的代碼，體驗 CML 語法。

數(shù)據(jù)綁定

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

    <!-- 條件與循環(huán)渲染 -->
    <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: 'HelloCML',
    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;
    },
  };

  created() {
    console.log('生命周期');
  }
}

export default new Index();
</script>
<style scoped>
.class1 {
  color: #f00;
}
</style>
<script cml-type="json">
{
}
</script>

創(chuàng)建頁面與組件

項目根目錄下 執(zhí)行 cml init page, 輸入頁面名稱 first-page

$ cml init page
? Please input page name:

回車，即可生成頁面 組件src/pages/first-page/first-page.cml。

項目根目錄下 執(zhí)行 cml init component，選擇Normal component,輸入 first-com， 回車，即可生成文件components/first-com/first-com.cml。 組件也是 cml 文件 結(jié)構(gòu)上與頁面相同。

拷貝如下代碼到first-com.cml

<template>
  <view>
    <text class="first-com-text">我是組件first-com</text>
  </view>
</template>
<script>
class FirstCom {}
export default new FirstCom();
</script>
<style scoped>
.first-com-text {
  color: #0f0;
}
</style>
<script cml-type="json">
{
}
</script>

然后在剛才的src/pages/index/index.cml中引用first-com

<script cml-type="json">
{
  "base": {
    "usingComponents": {
      "first-com": "components/first-com/first-com"
    }
  }
}
</script>

template 中使用 first-com 組件。

<template>
  <view>
    <first-com></first-com>
  </view>
</template>

經(jīng)過以上操作，你已經(jīng)學(xué)會了組件的引用，豐富的組件等待著你去學(xué)習(xí)!

項目配置

chameleon.config.js為項目的配置文件，以后定制化構(gòu)建會使用到，比如是否帶 hash，是否壓縮等等,可以在項目根目錄下執(zhí)行cml build，執(zhí)行完成后，項目根目錄的dist文件夾下生成 build 模式的文件。

模擬數(shù)據(jù)

mock/api/index.js 文件內(nèi)容如下，可以本地模擬 api 請求。

訪問 localhost:8000/api/getMessage 即可看到模擬的 api 返回。

端口以實際啟動為準(zhǔn)，默認(rèn) 8000.

module.exports = [
  {
    method: ['get', 'post'],
    path: '/api/getMessage',
    controller: function(req, res, next) {
      res.json({
        total: 0,
        message: [
          {
            name: 'HelloCML',
          },
        ],
      });
    },
  },
];

示例 Demo 學(xué)習(xí)

chameleon-tool中內(nèi)置了 todolist 的項目模板，通過命令cml init project --demo todo 即可生成該模板，按照 1.2 節(jié)中的說明啟動項目，即可看到如下頁面

經(jīng)過以上的介紹和實踐操作，相信你已經(jīng)了解了 CML 的基本使用，本文檔其余部分將涵蓋剩余功能和其他高級功能的詳盡細(xì)節(jié)，所以請務(wù)必完整閱讀整個文檔！