介紹
Antmove（中文：螞蟻搬家），是一個小程序平臺開發(fā)的統(tǒng)一解決方案，通過編寫一次代碼，編譯成不同平臺的小程序代碼，如現(xiàn)如今使用比較多的微信小程序、支付寶小程序、百度智能小程序、頭條小程序以及更多小程序平臺。現(xiàn)Antmove已支持微信小程序和支付寶小程序的轉(zhuǎn)換，其中百度智能小程序、頭條小程序以及更多的支持也即將推出。
Github地址
https://github.com/ant-move/antmove
應(yīng)用場景
開發(fā)指南
antmove 的初衷是提供一種小程序跨平臺開發(fā)的解決方案，幫助開發(fā)者底層本實現(xiàn)小程序的跨平臺開發(fā)（微信小程序、支付寶小程序、百度智能小程序、頭條小程序），做到一套代碼開發(fā)、多小程序平臺運行的目的。
目前 antmove 已經(jīng)幫助了多款微信小程序到支付寶小程序的遷徙，代碼轉(zhuǎn)換率高達 90% ，極大的降低了小程序開發(fā)企業(yè)的人力成本。工具不僅能做到運行時 diff 的抹平，也能部分做到一個 API 從無到有的過程以及缺失組件的支持。
1、特性
- 簡單易使用，無學(xué)習(xí)成本，直接上手
- 轉(zhuǎn)換覆蓋率全面，及時跟進各小程序平臺更新情況
- 配套詳細的編譯時日志/運行時日志工具
- 編譯生成代碼可讀性強，可二次編程
- 二次編譯支持
2、安裝
vscode 轉(zhuǎn)換插件，可以在VSCode的擴展中搜索Antmove下載安裝轉(zhuǎn)換插件來實現(xiàn)一鍵轉(zhuǎn)換。
3、編譯步驟
- 安裝擴展（Antmove – antmove-vscode-plugin）
- 在 VsCode 中打開要轉(zhuǎn)換的項目
- 打開 VsCode 命令面板
- Mac: command shift p
- Windows: ctrl shift p
- 輸入 Antmove
- 運行 Antmove: Run antmove 命令
- 運行如上命令后會給出一個彈窗，選擇轉(zhuǎn)換后生成代碼存儲目錄
- 轉(zhuǎn)換完成
4、使用 npm 或 yarn 安裝
推薦使用 npm 或 yarn 的方式進行開發(fā)，不僅可在開發(fā)環(huán)境輕松調(diào)試，也可放心地在生產(chǎn)環(huán)境打包部署使用
- 全局安裝
$ npm install antmove -g
- 本地安裝
$ npm install antmove –save
由于網(wǎng)絡(luò)環(huán)境原因可以使用cnpm來進行安裝
5、命令行使用
通過 npm 或 yarn 全局安裝才能使用如下命令行
提供兩種可用的命令行調(diào)用方式：
- antmove wx-alipay（使用前請將終端切換到需轉(zhuǎn)換編譯的微信小程序項目路徑）
antmove wx-alipay ./dist/alipay-app
- antmove – 該命令更加靈活，可配置輸出輸出目錄/編譯模式等
antmove -i ./wechat-mini/project -o ./dist/alipay-mini/project –env development
如上的命令表示將 ./wechat-mini/project 微信小程序項目轉(zhuǎn)換為支付寶小程序項目，轉(zhuǎn)換到 ./dist/alipay-mini/project 目錄
參數(shù)說明
- –input,-i
- 可選，編譯源碼目錄，如果不傳則是當(dāng)前目錄
- –output,-o
- 必傳，編譯輸出目錄
- –env,-e
- 可選（development/production），編譯模式，生產(chǎn)模式代碼會壓縮，無編譯日志及運行時日志
6、Node.js 使用方式
簡單示例
const path = require(\’path\’);const transformFramework = require(\’antmove\’);const WechatPlugin = require(\’@antmove/wx-alipay\’);let outputPath = path.join(__dirname, \’../../dist\’);let inputDirPath = path.join(__dirname, \’../../examples/miniprogram-demo/miniprogram\’);const App = transformFramework();App.use( WechatPlugin, { entry: inputDirPath, dist: outputPath \’/alipaymini-demo\’, env: \’development\’ }) .start();
7、API
transformFramework
工具實例生成函數(shù)。
const transformFramework = require(\’antmove\’);const App = transformFramework(); // 得到的 app 實例即可進行轉(zhuǎn)換處理操作
App
- use | Function – App.use(plugin, pluginOptions) – 掛載插件到實例上，可掛載多個，按掛載順序執(zhí)行
- plugin: 轉(zhuǎn)換插件
- pluginOptions: 轉(zhuǎn)換插件配置項
- entry | String – 轉(zhuǎn)換源碼目錄
- dist | String – 轉(zhuǎn)換后代碼輸出目錄
- env | String – 編譯環(huán)境設(shè)置（env/prod）
- 默認值為生產(chǎn)環(huán)境
- remote | Boolean – 是否拉去遠程拉取 polyfill 代碼
- 默認開啟
- start | Function – 開始編譯操作
8、高級用法
- 支付寶代碼與微信代碼混合編寫
- 微信小程序到支付寶小程序登錄遷徙
9、計劃推出
- 支付寶轉(zhuǎn)百度能力支持
- 支付寶轉(zhuǎn)微信能力支持
- 支付寶轉(zhuǎn)頭條能力支持
- 頁面/組件維度轉(zhuǎn)換能力支持
組件
截圖一覽
總結(jié)
如今前端技術(shù)和框架百花齊放，沒有哪一個敢說最好，像Antmove這樣的新產(chǎn)物或多或少都是一種思想的展現(xiàn)，無疑都是為了解決前端痛點，多端統(tǒng)一的問題，比如之前有介紹過的uniapp都是其中比較優(yōu)秀的，還有Taro框架都值得探索一番，感興趣的小伙伴都可以去學(xué)習(xí)學(xué)習(xí)！
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請發(fā)送郵件至 舉報，一經(jīng)查實，本站將立刻刪除。