Java基础、中级、高级、架构面试资料
    你的位置：业余草 > 业余杂谈 > 滴滴开源跨平台统一各类终端的 MVVM 框架 Chameleon（变色龙）使用教程

    滴滴开源跨平台统一各类终端的 MVVM 框架 Chameleon（变色龙）使用教程

    业余杂谈 herman 6000浏览
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    赶在过年之前，滴滴开源了跨平台的统一各类终端的 MVVM 框架 Chameleon（变色龙）。真正专注于让一套代码运行多端的开发框架，提供标准的 MVVM 架构开发模式统一各类终端。

    Chameleon 读音，/kəˈmiːlɪən/，简写CML，中文名卡梅龙；中文意思变色龙，意味着就像变色龙一样能适应不同环境的跨端整体解决方案。

    Chameleon 变色龙

    据悉，滴滴内部的研发同学在端内既追求 h5 的灵活性，也要追求性能趋近于原生。面对入口扩张，主端、独立端、微信小程序、支付宝小程序、百度小程序、Android 厂商联盟快应用，单一功能在各平台都要重复实现，开发和维护成本成倍增加。迫切需要维护一套代码可以构建多入口的解决方案，历经近 20 个月打磨，滴滴跨端解决方案 Chameleon 终于发布。真正专注于让一套代码运行多端。

    软件架构设计里面最基础的概念“拆分”和“合并”，拆分的意义是“分而治之”，将复杂问题拆分成单一问题解决，比如后端业务系统的”微服务化“设计；“合并”的意义是将同样的业务需求抽象收敛到一块，达成高效率高质量的目的，例如后端业务系统中的“中台服务”设计。

    而 Chameleon 属于后者，通过定义统一的语言框架+统一多态协议，从多端（对应多个独立服务）业务中抽离出自成体系、连续性强、可维护强的“前端中台服务”。

    虽然不同各端环境千变万化，但万变不离其宗的是 MVVM 架构思想，Chameleon 目标是让 MVVM 跨端环境大统一。

    Chameleon 的跨端目标学习全景图如下：

    Chameleon 学习全景图

    从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，同样道理，chameleon 中采用的是 CML + CMSS + JS。

    JS 语法用于处理页面的逻辑层，与普通网页编程相比，本项目目标定义标准 MVVM 框架，拥有完整的生命周期，watch，computed，数据双向绑定等优秀的特性，能够快速提高开发速度、降低维护成本。

    CML（Chameleon Markup Language）用于描述页面的结构，我们知道 HTML 是有一套标准的语义化标签，例如文本是<span> 按钮是<button>。CML 同样具有一套标准的标签，我们将标签定义为组件，CML 为用户提供了一系列组件。同时CML中还支持模板语法，例如条件渲染、列表渲染，数据绑定等等。同时，CML支持使用类VUE语法，让你更快入手。

    CMSS(Chameleon Style Sheets)用于描述 CML 页面结构的样式语言，其具有大部分 CSS 的特性，并且还可以支持各种 css 的预处语言 less stylus。

    通过以上对于开发语言的介绍，相信你看到只要是有过网页编程知识的人都可以快速的上手 chameleon 的开发。

    在用 CML 写页面时，chameleon 提供了丰富的组件供开发者使用，内置的有 button switch radio checkbox 等组件，扩展的有 c-picker c-dialog c-loading 等等,覆盖了开发工作中常用的组件。

    为了方便开发者的高效开发，chameleon 提供了丰富的 API 库,发布为 npm 包 chameleon-api，里面包括了网络请求、数据存储、地理位置、系统信息、动画等方法。

    基于强大的多态协议，可自由扩展任意 API 和组件，不强依赖框架的更新。各端原始项目中已积累大量组件，也能直接引入到跨端项目中使用。

    代码规范校验，当出现不符合规范要求的代码时，编辑器会展示智能提示，不用挨个调试各端代码，同时命令行启动窗口也会提示代码的错误位置。

    既想一套代码运行多端，又不用大刀阔斧的重构项目，可以将多端重用组件用 Chameleon 开发，直接在原有项目里面调用。

    Chameleon 不仅仅是跨端解决方案。基于优秀的前端打包工具 Webpack，吸收了业内多年来积累的最有用的工程化设计，提供了前端基础开发脚手架命令工具，帮助端开发者从开发、联调、测试、上线等全流程高效的完成业务开发。

    全局安装 chameleon-tool 构建工具

    chameleon 运行环境：node >= 8.10.0 npm >= 5.6.0。官方建议安装使用 nvm 管理 node 版本。

    npm i -g chameleon-tool

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

    创建项目与启动

    步骤如下：

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

    Chameleon 开发效果

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

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

    小程序端请下载微信开发者工具，打开项目根目录下的 /dist/wx 目录预览。

    支付宝、百度小程序、快应用正在努力测试中，尽请期待。

    语法体验

    替换 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>

    创建新页面

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

    $ cml init page
? Please input page name:

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

    创建及引用组件

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

    经过以上操作，你已经学会了组件的引用，其他更多学习资料请参考官方网站，谢谢！

    参考资料

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » 滴滴开源跨平台统一各类终端的 MVVM 框架 Chameleon（变色龙）使用教程

    相关文章推荐