Antmove 緣起 - 好用的小程序多端解決方案

原文連接：ant-move.github.io/website/blo…

螞蟻搬家工具（Antmove）是一個小程序開發輔助工具，致力於解決小程序跨平臺開發的難題，藉助於 Antmove，你只須要編寫一套微信小程序代碼（或是支付寶小程序代碼）就能夠達到運行於多平臺的目的，無需關心如何適配多平臺的難題。

who？

Antmove 起源於高德小程序團隊的一個內部項目，在高德小程序平臺創建之初，有許多的企業合做商但願將他們的小程序應用上線到高德小程序平臺（支付寶小程序平臺），但他們已經有了本身的微信小程序應用，再開發一套高德的（或是支付寶的）對企業來講是一種資源的負擔。基於這個需求，內部實現了一個微信小程序到高德小程序的轉換工具，經過這個工具幫助這些企業用戶快速的將他們的應用上線到高德上。

基於初始的微信小程序到高德小程序轉換的需求，咱們發現雖然解決了用戶的第一步需求，但尚未徹底解決他們的痛點，去真正的實現小程序的跨平臺開發，提供小程序跨平臺能力解決方案，這也是螞蟻搬家的目標，要去解決的問題。

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 調用的形式。