Antmove 缘起 - 好用的小程序多端解决方案

原文地址： https://ant-move.github.io/we...

蚂蚁搬家工具（Antmove）是一个小程序开发辅助工具，致力于解决小程序跨平台开发的难题，借助于 Antmove，你只须要编写一套微信小程序代码（或是支付宝小程序代码）就能够达到运行于多平台的目的，无需关心如何适配多平台的难题。

who？

Antmove 起源于高德小程序团队的一个内部项目，在高德小程序平台创建之初，有许多的企业合做商但愿将他们的小程序应用上线到高德小程序平台（支付宝小程序平台），但他们已经有了本身的微信小程序应用，再开发一套高德的（或是支付宝的）对企业来讲是一种资源的负担。基于这个需求，内部实现了一个微信小程序到高德小程序的转换工具，经过这个工具帮助这些企业用户快速的将他们的应用上线到高德上。

<!--truncate-->

基于初始的微信小程序到高德小程序转换的需求，咱们发现虽然解决了用户的第一步需求，但尚未彻底解决他们的痛点，去真正的实现小程序的跨平台开发，提供小程序跨平台能力解决方案，这也是蚂蚁搬家的目标，要去解决的问题。

what？

蚂蚁搬家工具，提供一种小程序跨平台开发统一解决方案

Antmove 的目标是提供一套成熟稳定的小程序跨平台开发解决方案，那么它究竟是什么样的一个工具，适合什么样的场景？

• 若是你没有小程序跨平台的需求，那么你是不须要用到 Antmove 的

  Antmove 作的是将小程序应用编译为其它平台的小程序应用，它不是一个小程序框架，不定义新的小程序语法，咱们认为目前的小程序框架发展的已经很成熟，功能完备。基于原生的小程序就已经足够开发者去开发小程序应用，引入第三方的库，框架反而会增长技术风险，是应用变得过于复杂。小程序就应该小而美，技术层也应该是这样。

• 目前支持哪些平台的搬家

  目前 Antmove 对外开放版本释放了微信小程序转支付宝小程序的功能，这也是咱们在调研中发现需求最多的。支付宝到微信以及支付宝到百度头条的转换目前正在测试中，很快就会与你们见面。

• 为何是支付宝到百度头条？而不是微信到百度头条的直接转换？

以下的转换链路图可让咱们更加清晰直观的了解 Antmove 的跨平台支持状况

在 Antmove 的转换链路中，咱们实现了微信小程序与支付宝小程序的双向转换，从而实现了以微信小程序为核心或者支付宝小程序为核心的跨平台解决方案。

• 微信小程序与支付宝小程序的做为可选转换链路的设计

  支付宝小程序的推出要落后于微信小程序，因此在整个框架能力支持上，支付宝是向微信小程序对齐的，而后在框架的底层设计上，二者是有差别的。从笔者的了解来看，微信小程序框架原理更接近于 Vue.js，而支付宝小程序更接近于 React.js。基于此，在开发体验上，两个平台也有许多的不一样。这也是 Antmove 支持二者做为转换支持核心的缘由之一，让用户能够选择本身或是本身团队搭的开发体验。

• Antmove 能作到百分百的转换支持吗？

  很遗憾的是，通过整个团队的努力，仍是有部分差别是工具没法解决或是咱们不想解决的，没法解决的部分是不一样小程序平台的能力差别化致使的；而工具没有去刻意支持的部分是由于咱们不但愿过多的去影响编译输出的代码，咱们但愿编译输出的仍是可编程的、人性化的原生的小程序代码，尽可能低的性能损耗。
  虽然有部分须要开发者自行去处理，不过彻底不用担忧，工具提供了一套机制，让开发者可用尽可能低成本的实现差别化的兼容

why？

从小程序发展至今，社区也出现了许多的小程序相关的框架、工具等生态工具，好比 mpvue、taro、uni-app等工具。它们也提供了跨平台的解决方案，Antmove 与它们相比有什么异同，有什么优点呢？

• 第三方框架与原生微信小程序开发框架性能之比较

采用原生小程序的开发方式

wepy、mpvue 小程序框架最初的目的是提高小程序的开发体验，它们是最先的一批框架，由于那时候微信小程序刚推出不久，功能不稳定，API 常常变动，功能也不够完善（不支持组件式开发）。因此那时迫切的须要提高小程序的开发体验，不过到目前为止，小程序框架已经发展的很成熟并且推出了许多小程序场景的功能。

原生小程序的开发体验已经足够好，语法扩展功能就显得有些鸡肋，这也是 Antmove 选择原生小程序开发方式的缘由。可以享受小程序框架的完整的功能特性，同时无需额外的学习成本。

简化开发流程

从技术工程的角度来看，引入第三方框架是有风险的，若是对框架有了强依赖，比必须保证对框架有足够的了解，不然就会出现框架层引入潜在 bug 的可能。开发流程的增长，开发体验也会降低，开发调试变得困难。这也是 Antmove 与框架类小程序跨平台解决方案相比的优点，不管是转换前仍是转换后获得的都是原生的小程序代码，只须要引入部分的 polyfill 代码便可。

应用性能

基于 Antmove 的跨平台方案，基本能够达到和原生小程序同样的性能体验。而若是使用了第三方框架的话，不管框架再怎么优化，与不引人相比，性能确定会有损耗。

使用体验

Antmove 基本能够达到一键转换的使用体验，同时还配套了开发模式的编译日志、运行时日志帮助用户完善应用，了解不一样平台之间的差一点，获得很适合目标平台的代码。

团队有资源优点，对支付宝小程序框架从外到内有深刻的了解，能够作出更多的优化。

how？

Antmove 工具为了提供更好的跨平台解决方案，主要在编译时、运行时以及编译运行时的结合处理，作了许多的转换处理工做。

以下以微信小程序转支付宝小程序为例，对应 Antmove 的 wx-alipay-plugin。

编译时处理

Antmove 在编译时会将整个应用的目录结构、文件结构等转换为对应平台的结构，对文件命名规范、样式、模板、逻辑文件、配置文件等按照特定平台输出。

框架相关的特定语法如 wxs 语法、模块依赖系统（路径解析规则差别处理）也会在编译的过程当中处理为目标平台语法。

编译示例

• 微信小程序

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

• 支付宝小程序

<view class='container'>
  <view class='userinfo'>
    <button a:if='{{!hasUserInfo && canIUse}}' open-type='getUserInfo' onGetuserInfo='getUserInfo'>
      获取头像昵称
    </button>
    <block a:else=" ">
      <image class='userinfo-avatar' src='{{userInfo.avatarUrl}}' mode='cover' onTap='bindViewTap'>
      </image>
      <text class='userinfo-nickname'>
        {{userInfo.nickName}}
      </text>
    </block>
  </view>
  <view class='usermotto'>
    <text class='user-motto'>
      {{motto}}
    </text>
  </view>
</view>

运行时处理

运行时处理主要是对 API，开放能力以及 App/Page/Component 构造函数进行差别抹平处理。

编译运行时结合处理

有许多功能是编译时和运行时单独没法处理的，以自定义组件事件传递为例，微信是以 triggerEvent 的形式，相似于自定义事件，而支付宝则是相似于 react 的机制，基于 props 的形式来实现组件之间的方法传递，这就须要在编译时将事件转换为支付宝 props 的形式，并须要在运行时对 props 函数更改成 triggerEvent 调用的形式。