快速上手(Quick start)

视频教程

1 安装启动

[success] 运行环境 node >= 8.10.0npm >= 5.6.0

建议安装使用nvm管理 node 版本

1.1 全局安装 chameleon-tool 构建工具

npm i -g chameleon-tool

注：暂不支持使用 yarn、cnpm 等第三方 npm 工具进行安装。

安装成功后，执行 cml -v 即可查看当前版本， cml -h查看命令行帮助文档。

1.2 创建项目与启动

• 执行 cml init project
• 输入项目名称
• 等待自动执行 npm install 依赖
• 切换到项目根目录执行cml dev
• 会自动打开预览界面 预览界面如下：

web 端可以点击模拟器内页面右上角打开 · 新的浏览器窗口。

native 端的效果请 · 下载chameleon playground(目前可下载 Android 端，IOS 端即将发布)或者下载weex playground扫码预览

小程序端请下载对应小程序开发工具，打开项目根目录下的/dist/[wx|alipay|baidu]目录预览。

微信开发者工具、支付宝开发者工具、百度开发者工具

2 目录与文件结构

生成的目录结构如下，详细介绍参见目录结构：

├── chameleon.config.js                 // 项目的配置文件
├── dist                                // 打包产出目录
  ├── alipay                            // 支付宝小程序代码
  ├── baidu                             // 百度小程序代码
  ├── wx                                // 微信小程序代码
├── mock                                // 模拟数据目录
├── node_modules                        // npm包依赖
├── package.json
└── src                                 // 项目源代码
    ├── app                             // app启动入口
    ├── components                      // 组件文件夹
    ├── pages                           // 页面文件夹
    ├── router.config.json              // 路由配置
    └── store                           // 全局状态管理

· 编辑器中语法高亮，暂时使用.vue的插件，参见编辑器插件，后续会推出更强大的插件。

3 编辑器插件

• Idea、Webstorm 插件cml-language-support
• Vscode 插件cml
• Atom 插件language-cml
• sublime 插件审核中，敬请期待…

4 语法体验

替换src/pages/index/index.cml文件，删除src/pages/index/index.cml文件中的所有代码，然后替换为下面的代码，体验 chameleon 语法。

数据绑定

<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;
      }
    };
    created() {
      console.log("生命周期");
    }
  }
  export default new Index();
</script>
<style scoped>
  .class1 {
    color: #f00;
  }
</style>
<script cml-type="json">
  {
  }
</script>

5 创建新页面

项目根目录下 · 执行 · cml init page, 输入页面名称 first-page

$ cml init page
? Please input page name:

回车，即可生成页面 · 组件src/pages/first-page/first-page.cml。

6 创建及引用组件

项目根目录下 · 执行 · cml init component，选择Normal component,输入 first-com， · 回车，即可生成文件components/first-com/first-com.cml。 组件也是 cml 文件 · 结构上与页面相同。

拷贝如下代码到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>

经过以上操作，你已经学会了组件的引用，丰富的组件等待着你去学习!

7 项目配置

chameleon.config.js为项目的配置文件，以后定制化构建会 · 使用到，比如是否带 hash，是否 · 压缩等等,可以在项目根目录下执行cml build · ， · 执行完成后 · ，项目根目录的dist文件夹下生成 build 模式的文件。

8 模拟 · 数据

mock/api/index.js文件内容如下，可以本地模拟 api 请求。访问localhost:8000/api/getMessage · 即可看到模拟的 api 返回。端口以实际启动为准，默认 8000.

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

9 · 示例 demo 学习

· chameleon-tool中内置了 todolist 的项目模板， · 通过命令cml init project —demo todo 即可生成该模板，按照 1.2 节中的说明启动项目，即可看到如下页面

经过以上的介绍和实践操作，相信你已经了解了 chameleon 的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！

10 FAQ

我想使用chameleon，是否需要大刀阔斧的重构项目？

不需要，可以使用chameleon开发公用组件，导出到各端原有项目中使用。

用CML标准编写代码，是否增加调试成本？

我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。

各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？

1、自建输入语法标准 cml，编译输出结果自定的格式语法。2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。3、框架整体方向一致：mvvm底层设计模式为标准设计接口。基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。

框架有多大，性能是否有影响？

1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:minimize | minimize + gzip

我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？

可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：只跨web和小程序的应用