chameleon 使用体验

[Bowen7]

访问 https://bowencodes.com 以获得最佳体验

chameleon使用体验

Chameleon(变色龙)是滴滴最近开源的一个跨端解决方案，趁着寒假，我花了些时间学习cml，并使用cml做了一款简单的背单词软件，本文主要从开发者的角度分享我的使用体验

快速上手

cml使用类似于vue的一套语言（CML+CMSS+JS），你甚至可以在模版上加一个 <template lang="vue">使cml支持vue的指令，让它更像vue，对于了解vue的人来说学习成本很低

当然，cml对于没用使用过vue的人（比如我）也相当友好，cml有很详细的文档，基本上，根据文档，花个半个下午，就能写个简单的demo自娱自乐了

官方提供了cml的脚手架chameleon-tool，我们可以通过这个脚手架快速创建一个跨小程序、h5和native的项目，chameleon快速上手；在项目内，我们可以通过执行npm init componennt快速创建普通组件、多态组件、多态接口模版，最大程度地降低了用户的学习成本

wosi-demo

这是我写的一个背单词软件，项目地址，水平有限，写得比较粗糙，项目readme有软件分别运行在h5，小程序，weex端的截图

使用体验

使用cml init project（需全局安装脚手架）即可快速创建一个cml项目，项目内有基本的文件 ，执行cml dev即可运行

与普通的web项目类似，pages文件夹下存放页面，拆分的组件（包括多态组件和多态接口）则是放置在components文件夹下。我的app主要有三个界面，所以我新建了index、recite、setting三个文件夹在pages文件夹下，再去配置路由

router.config.json是路由的配置文件：

{
  "mode": "history",
  "domain": "https://www.chameleon.com",
  "routes": [{
      "url": "/cml/h5/index",
      "path": "/pages/index/index",
      "mock": "index.js"
    }
  ]
}

开发的时候主要是向routes中增加页面，再修改url和path，url是h5页面的路由，path则是对应cml文件的路径

接下来，进入了code阶段，需要注意的是，cml有严格的代码规范校验，比如在公共代码里不能出现某端特有的api和标签，全局变量校验，模版规范校验，更多请参考文档。如果要使用某端特有的方法或标签，可以使用多态组件或多态接口（我另一篇文章：chameleon之强大的多态协议)

cml提供了大量跨端api和组件，我们可以根据需求使用

比如，储存数据：

cml.setStorage('name', 'Bowen').then(()=>{
},function(err){
})

要注意，api需要通过import cml from 'chameleon-api';的方式引入，而且均以Promise形式返回，可配合async、await使用；而组件分为内置组件和扩展组件，内置组件不需要引入，可直接使用，扩展组件需引入后才能使用，以c-loading为例：

<script cml-type="json">
{
    "base": {
        "usingComponents": {
            "c-loading": "cml-ui/components/c-loading/c-loading"
        }
    }
}
</script>

当然，也可以利用强大的多态协议自由扩展开发跨端api和组件，为了尝鲜，我在项目里开发了一个audio多态组件，首先执行npm init component，选择多态组件，输入audio，就在components文件夹下生成一个audio多态组件，我们先修改audio.interface，定义组件接收一个String类型的属性src:

<script cml-type="interface">
interface AudioInterface {
  src: String
}
</script>

下面分别是三端的具体实现：

web端：

<template>
  <view>
    <origin-audio src="{{src}}"></origin-audio>
  </view>
</template>

<script>
class Audio implements AudioInterface {
  props = {
    src: {
      type: String,
      default: ''
    }
  }
  data={
    oldSrc:''
  }
  /**
  * 由于浏览器限制，某些浏览器无法自动播放音视频
  * 绑定全局事件，监听click事件
  * 当src改变时触发播放
  **/
  beforeCreate(){
    document.addEventListener('click', (e)=>{
      if(this.oldSrc!==this.src){
        const audioEle=document.querySelector('audio')
        !!audioEle&&audioEle.play();
        this.oldSrc=this.src;
      }
    })
  }
}

export default new Audio();
</script>

weex:

<template>
  <view>
    <origin-video
      class="video"
      src="{{src}}"
      auto-play="{{true}}">
    </origin-video>
  </view>
</template>

<script>

class Audio implements AudioInterface {
  props = {
    src: {
      type: String,
      default: ''
    }
  }
}

export default new Audio();
</script>

<style scoped>
  /**
  * video必须有高度和宽度
  **/
  .video {
    width: 10cpx;
    height: 10cpx;
    opacity:0;
  }
</style>

wx:

<template>
  <view>
  </view>
</template>

<script>
const audio = wx.createInnerAudioContext();
class Audio implements AudioInterface {
  props = {
    src: {
      type: String,
      default: ''
    }
  }

  watch = {
    src:function(newV,oldV){
      audio.src=newV;
    }
  }
  mounted() {
    audio.autoplay = true;
    audio.src = this.src;
  }
}

export default new Audio();
</script>

上面三段代码可以看到，三端分别使用了各端独有的能力，而cml会在打包的时候将代码隔离开，互不污染

最后在cml文件中引入，即可直接使用audio组件进行跨端：

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

多态协议不仅能用在扩展跨端能力上，有时候，各端会有定制化需求，我们也可以使用多态协议，提高代码逻辑性，便于维护。

cml还提供了数据mock功能，下面是一个简单的get请求：

module.exports = [
  {
    method: 'get',
    path: '/api/message',
    controller:  function (req, res, next) {
        res.json({
          message:'a message'
        });
    },
  }
]

然后使用自带的网络请求获取数据：

cml.get({
  url: '/api/message'
})

有了mock功能，我们可以不依赖后端，方便开发时调试

总结

Chameleon是一款上手简单的跨端框架，学习成本较低，同时自带了较多跨端组件和api。与其他跨端框架对比，cml拥有更好的拓展性，开发者也可以在多态协议的基础上根据需求自己开发组件和api，且可利用多态协议应对各端定制化需求，当然，cml也有它的不足之处，比如它的生态还不成熟，组件数量不够多

Chameleon还有其他过人之处，比如导入导出原生组件、Chameleon iOS SDK、Chameleon Android SDK等等，可以参阅文档：传送门

想更加了解多态协议？可看我的后续文章：chameleon之强大的多态协议