Chameleon快速上手简易教程

栏目: IOS · Android · 发布时间: 5年前

内容简介:CML特点是“一端所见即多端所见”,你只需开发一次就能跑所有端。 跟随这个教程,开启你的chameleon跨端开发。开发chameleon项目的第一步是要安装运行环境和全局安装chameleon-tool。

CML特点是“一端所见即多端所见”,你只需开发一次就能跑所有端。 跟随这个教程,开启你的chameleon跨端开发。

1 起步

1.1 安装运行环境

开发chameleon项目的第一步是要安装运行环境和全局安装chameleon-tool。

运行环境

node >= 8.10.0 npm >= 5.6.0

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

1.2 安装脚手架工具

npm i -g chameleon-tool
复制代码

安装成功后,执行 cml -v 即可查看当前版本, cml -h 查看命令行帮助文档,更多命令参见脚手架工具。接下来就可以使用它快速的创建chameleon项目。

尝鲜版

尝鲜版提供了百度小程序和支付宝小程序的支持

如果想提前使用可移步这里查看使用

1.3 创建与启动第一个chameleon项目

cml init project
cml dev

Chameleon快速上手简易教程

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

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

小程序端请下载微信开发者工具,打开项目根目录下的 /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的预处语言 lessstylus
  • 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-comwx、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端路由模式,分为 hashhistory
  • 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和组件。有如下几种情况:

  • 第一 定制化的组件,比如要使用echarts组件,这时就需要使用多态组件实现,例如 手把手教你系列- 实现多态 echart
  • 第二 定制化的底层接口,可以参考 手把手教你系列- 实现多态API
  • 第三 业务需求导致的各端差异化实现,比如web端和小程序要有不用的逻辑处理,可以利用多态组件和多态接口实现。

注:多态协议是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 SDKIOS Chameleon SDK

7 智能规范校验

chameleon提供了多种规范校验,对这些规范的学习可以提高开发效率,保证代码质量。接口校验语法 是使用多态协议扩展多态组件和多态接口时使用。可以通过配置进行开启或者关闭。全局变量校验 是保证跨端代码全局变量正确性的检查方法,可以通过配置进行开启或者关闭。代码规范校验 是对项目结构,文件规范,样式规范等进行校验,可以通过配置进行开启或者关闭。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Filter Bubble

The Filter Bubble

Eli Pariser / Penguin Press / 2011-5-12 / GBP 16.45

In December 2009, Google began customizing its search results for each user. Instead of giving you the most broadly popular result, Google now tries to predict what you are most likely to click on. Ac......一起来看看 《The Filter Bubble》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具