Chameleon 起步

初始化

安装 chameleon-tool

依赖环境:node >= 8.10.0、npm >= 5.6.0

建议使用nvm管理 Node 版本,暂不支持使用 yarn、cnpm 等进行安装。

npm i -g chameleon-tool

安装成功后,执行 cml -v 查看当前版本, cml -h 查看帮助文档。

创建项目与启动

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

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

Native 端的效果请下载 Chameleon Playground (目前可下载 Android 端,iOS 端即将发布)或者下载 Weex Playground 扫码预览

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

对于字节跳动小程序,需要按照字节跳动小程序接入教程配置完毕之后,可以在 dist/tt 下用字节跳动小程序开发者工具打开对应的应用程序

目录与文件结构

生成的目录结构如下,详细介绍参见目录结构。

├── chameleon.config.js                 // 项目的配置文件
├── dist                                // 打包产出目录
  ├── alipay                            // 支付宝小程序代码
  ├── baidu                             // 百度小程序代码
  ├── wx                                // 微信小程序代码
  ├── tt                                // 头条小程序代码
  ├── qq                                // QQ小程序代码
  ├── xx                                // 其他终端
├── mock                                // 模拟数据目录
├── node_modules                        // npm包依赖
├── package.json
└── src                                 // 项目源代码
    ├── app                             // app启动入口
    ├── components                      // 组件文件夹
    ├── pages                           // 页面文件夹
    ├── router.config.json              // 路由配置
    └── store                           // 全局状态管理
编辑器中使用.cml的插件语法高亮,参见编辑器插件,插件持续覆盖更多编辑器。

编辑器插件

  • idea、WebStorm 插件 CML Language Support
  • VS Code 插件 cml
  • Atom 插件 language-cml
  • Sublime 插件审核中,敬请期待...

语法体验

替换src/pages/index/index.cml文件,删除src/pages/index/index.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: '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>

创建页面与组件

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

$ cml init page
? Please input page name:

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

项目根目录下 执行 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>

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

项目配置

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

模拟数据

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: 'HelloCML',
          },
        ],
      });
    },
  },
];

示例 Demo 学习

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

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部