跨端开发的最佳实践——Chameleon（变色龙 ）

前言

近期，在公司落地了一个社区内比较 新（踩）的（坑） 跨端框架 Chameleon，当时的需求是先实现快应用端，以后须要支持 H五、微信小程序、字节小程序等。因为公司用的技术栈是以 Vue.js 为主，在作了一番技术选型后，最终选择了 Chameleon（开始疯狂踩坑 😳）

这个时候，可能会有人问：为何不选 uniapp？这么说吧，uniapp -> 快应用就不是一个坑了，是个炸弹 💣。后面，我会讲解为何不选 uniapp 😲

不过，理性评价，Chameleon 确实是一个优秀的跨端框架。至于优秀在哪？（请继续阅读 😶）

本次文章将会分为如下三个部分，经过介绍、对比现有前端跨端框架，来逐点讲述 Chameleon 优秀之处 😍：

• 为何咱们须要跨端？
• 爆炸发展的前端跨端框架
• Chameleon 将来的跨端方案

1. 😷 为何咱们须要跨端？

固然，了解这个原因的同窗，能够跳过这个小节哈～

这个问题，咱们能够分为两个维度去解释：

需求的多变性

现今，小程序实在是太多了...并且，对于日异变动的需求，今天可能和你说的是微信小程序，过了一段时间，可能会和你说一样的产品，你写个快应用版的 😲。对于需求方来讲，他们并不关注你是怎么实现的不一样端，而且，可能还会以为，你作个同样的东西只是平台不同那不是很快吗？

技术的维护性

从技术维护维度思考，这是为了咱们更好地维护代码，尽可能经过维护一套代码来实现不一样端的产品，例如微信小程序、字节小程序、快应用、H5 等等。因此，选择跨端框架开发的方式，给咱们带来的好处：

• 保证上新功能时的稳定
• 出现问题时的，快速 touble shot
• 减小写重复性的代码
• and so on...

2. 💥 爆炸发展的前端跨端框架

如今，前端可选择的跨端框架有不少，Taro、uniapp、kbone、mpvue、Chameleon 等等。固然，其中部分仍是有技术限制的，例如腾讯的 Kbone 只能支持 web 端和微信小程序同构，京东的 Taro 支持的 DSL 是 React，Uniapp 支持的 DSL 是 Vue。因此，框架虽多，可是仍是那句大白话，适合本身所处技术团队的才是最好的 🤓️。

接下来，咱们来简单认识一下支持 Vue 的 DSL 的四个跨端框架 mp-vue、uniapp、kbone、Chameleon：

2.1 mpvue

mpvue 是 fork 自 Vue@2.4.1 版本，其保留了 Vue2.x 的一部分东西，例如使用 flow 来作静态类型检测、默认的一些语法等。mpvue 设计思路大致上是修改 Vue2.x 运行时和模版编译的部分，针对不一样的平台对编译生成的 AST（抽象语法树）作语法转化到指定端的语法，从而完成对不一样端的代码生成。

友情提示：mpvue 的 GitHub commit 最近一次 commit 是 17 个月前

2.2 uniapp

uniapp 我想不少同窗都耳熟能详，估计有些接触的前端同窗，就是由于这个，毕竟 DCloud 也算是“大名鼎鼎”。前面，也说起 mpvue 最近的一次的 commit 已是 17 个月前，而 uniapp 能够支持把 mpvue 的项目转为 uniapp 的项目（估计能多很多使用者 😏）。

uniapp 在跨端方面确实是很优秀，引入了条件编译的机制来支持不一样端的表现，例如咱们要在 H5 和微信小程序两个不一样端显示用户头像，前者能够经过微信提供的数据显示用户头像，后者能够直接使用 open-data 组件获取。那么，经过条件编译咱们能够这样写：

<!-- #ifdef MP-WEIXIN -->
   <open-data class="img-avatar" type="userAvatarUrl"></open-data>
<!-- #endif -->
<!-- #ifdef H5 -->
   <img :src="avatar" class="avatar" />
<!-- #endif -->

条件编译，只会将符合这个条件的平台下的代码写入该平台的项目代码中

而且，uniapp 能跨端的类型也是很完善的，也支持快应用。可是，不一样于其余小程序，快应用是自绘渲染引擎，而不是 webview 渲染。因此，目前 uniapp 对于快应用只支持了 vivo、oppo、华为这三种厂商。

所以，这也是我起初作技术选型的时候，放弃 uniapp 的缘由。不过 uniapp 还支持转 webview 版的快应用，可是 webview 版的快应用又不是全部厂商都支持的...

2.3 kbone

kbone 是腾讯团队推出的一套支持 Web 端和微信小程序端进行同构的跨端框架。可是，显然相比较前面二者，kbone 的使用场景就略少一些，由于其受限于只支持 Web 端和微信小程序端。不过，若是需求只是 H5 和微信小程序，显然 kbone 是一个不错的选择，毕竟原装正版（腾讯）的技术支持。

那么，接下来就轮到 Chameleon 了，主角即将登场 😎～

3. 🐲 Chameleon 将来的跨端方案

Chameleon 做为跨端框架中的新兴势力，它一样有一套本身的 DSL（特点领域语言），即也能够称它为 CML。可是，不一样于上述咱们介绍的跨端框架，Chameleon 扩展多端的方式是采用的多态协议的方式，这里咱们引用一下官方的介绍：

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

3.1 多态协议

官方的介绍中出现了一个你们可能没有接触过的一个名词多态协议。那么，Chameleon 的多态协议是什么？

首先，咱们从理论层面了解一下什么是多态协议，Chameleon 的多态协议设计的想法 💡 源于 Apache Thrift - 可伸缩的跨语言服务开发框架。那么，什么是 Apache Thrift ？

Apache Thrift 是一个采用 接口描述语言定义并建立服务，支持可扩展的跨语言服务开发的框架。 用大白话讲，就是 Apache Thrift 使得不一样语言（Java、C、PHP）建立的服务能够被互相调用。

而 Chameleon 框架的核心机制之一 —— 多态协议则是借鉴了这种设计，提供了多态接口和多态组件的方式来扩展第三方端（微信小程序、快应用、字节小程序等）。例如，咱们能够经过定义多态接口来实现不一样端的特定 API，而后在业务代码层面直接使用定义好的多态接口就能够实现一个方法调用在不一样端下的特定 API，这看起来会是这样：

而且，对于目前 Chameleon 默认支持的跨端平台来讲，其编译生成的代码只是支持了 Chameleon 官方提供的基础组件和 API，例如在微信和快应用中经常使用到的组件 list、text，API setStorage 和 getStorage 等等。

那么，这些不一样端是如何基于 Chameleon 规定的基础组件和 API 来扩展实现的呢？接下来，我会以 Chameleon 扩展快应用端的实现为例，带你们深刻浅出一番其中的因此然 😲 ～

3.2 如何扩展一个新端

首先，不得不说的一点就是 Chameleon 能够完美支持跨快应用的开发，可是这个过程有一点点坑，不过踩掉就行~

那么，这里咱们来了解一下基于 Chameleon 扩展快应用须要作什么？这个过程主要是由 6 个 packages 完成:

|—— cml-quickapp-api              ## 实现 CML 提供的 api
|—— cml-quickapp-plugin            ## 实现编译相关处理，例如生成 .ux 文件、manifest.json 文件
|—— cml-quickapp-runtime            ## 实现 App、Page、Component 组件实例
|—— cml-quickapp-store            ## 实现 CML 的状态管理
|—— cml-quickapp-ui            ## 实现 CML 的普通组件
|—— cml-quickapp-ui-builtin        ## 实现 CML 的 Native 组件

实际上快应用是 7 个 package，还有一个 cml-quickapp-mixins，它会对一些指令和事件（例如 c-model、touchstart）作兼容处理。

能够看到扩展一个端，咱们至少须要 6 个 packages，而这 6 个 packages 完成了这 4 点：

而其中每一点须要实现的细节，官方文档已经讲解很详细了，这里就不重复论述。本小节只是简单介绍一下每一个 packages 的职责，让同窗们能够具有 debugger 源码的一点思路，有兴趣的同窗能够自行了解其中的代码细节。

接下来，咱们讲讲在业务开发中要如何扩展某个端的特定 API，即多态接口。

3.3 如何扩展某个端的 API（多态接口）

假设，此时咱们处于快应用开发的场景，须要为应用添加桌面。而快应用添加桌面的 API 不在 Chameleon 官方文档规定的 API 中，因此这个时候就须要实现多态接口，即咱们要须要自定义快应用添加桌面的 API。

首先，建立 shortcut.interface 文件，在该文件中定义 API 的类型：

<script cml-type="interface">
  type successCallBack = (res: boolean) => void
  type failCallBack = (res: boolean) => void
  type obj = {
    success: successCallBack,
    fail: failCallBack
  }

  interface UtilsInterface {
    installShortCut(obj): void;
    hasInstalled(obj): void;
  }
</script>

相信你们能够看出来，其实接口的类型定义和 TypeScript 中的类型定义大同小异。

而后，在 shortcut.interface 文件中，定义添加桌面的类，其中包含两个方法 installShortCut() 和 hasInstalled()，在方法内部能够直接使用快应用的原生 API：

<script cml-type="quickapp">
class Method implements UtilsInterface {
  installShortCut(obj) {
    quickapp.shortcut.install(obj)
  }
  hasInstalled(obj) {
    quickapp.shortcut.hasInstalled(obj)
  }
}

export default new Method()
</script>
<script cml-type="web">
class Method implements UtilsInterface {
  installShortCut(obj) {
  }
  hasInstalled(obj) {
  }
}
export default new Method();
</script>
...

而且，这里须要注意 ⚠️ 2 点：

• 为了保证其余端的正常运行，shortcut.interface 文件中一样须要声明其余端对应的方法，这里咱们能够是一个空函数
• 不能直接在方法的内部使用 shortcut API。由于，在快应用中 shortcut 是绑定在 system 上的，而 system 在编译时会被注入代码中以 quickapp 存在，因此咱们必须经过 quickapp.shortcut 的方式调用

最后，咱们就能够在业务代码中使用添加桌面的 API，而且它只会在快应用下有所表现：

<template>
  <page title="index">
    <text @click="addShortCut"></text>
  </page>
</template>
<script>
import shortCut from "../../components/utils/shortcut.interface";
  
class Index {
    methods = {
      addShortCut() {
        shortCut.installShortCut({
          success: (res) => {
            console.log(res)
          },
          fail: (err) => {
            console.log(err)
          }
        })
      }
    }
}
</script>

而扩展某个端的组件（ 多态组件）和扩展 API 大同小异。chameleon-tool 也提供了命令 cml init component 来初始化一个多态组件模版，这一块官方文档也详细介绍了，这里就不作论述哈。

3.4 小结

多态组件和多态接口都是多态协议的一部分，多态协议还支持多态模版，这会相似于 uniapp 的条件编译，能够指定 template 中展现的组件所属的端（仅做用于 root element）。而且，我想懂得了如何使用多态组件、多态接口、多态模版，那么使用 Chameleon 开发能够说是为所欲为。

最方便的是万不得已时咱们能够改一点源码哈哈 😄

结语

Chameleon 这个框架给个人感觉，确实是又爱又狠 😷。由于，当时在项目开发过程当中，快应用团队写的扩展有几个问题，我为了保证项目的正常上线，因此只能硬着头皮魔改源码抗着项目往前走 😳，最终项目也成功上线。而后，在周末的时间，我也整理了一些对 Chameleon 框架的理解，以及修复了几个快应用扩展存在的问题（顺手提了个 PR）。

最后，欢迎 👏 打算在业务中尝试 Chameleon 的同窗一块儿交流心得（加我微信或公众号），若是在快应用实现中遇到了坑，我想我应该能够帮助一二，而且，若是文中存在表达不当或错误的地方，欢迎各位同窗提 Issue～

参考

深刻浅出主流的几款小程序跨端框架原理

Chameleon 统一的语言框架 + 多态协议

Apache Thrift - 可伸缩的跨语言服务开发框架

Chameleon 扩展新端标准

❤️ 爱心三连击

写做不易，能够的话麻烦点个赞，这会成为我坚持写做的动力！！！

我是五柳，喜欢创新、捣鼓源码，专一于 Vue3 源码、Vite 源码、前端工程化等技术分享，欢迎关注个人 微信公众号：Code center。