微信小程序出現(xiàn)后，眾多公司平臺(tái)也紛紛推出了自家的小程序（快應(yīng)用），比如百度智能小程序、支付寶小程序、字節(jié)跳動(dòng)小程序以及國(guó)內(nèi)手機(jī)廠(chǎng)商的快應(yīng)用等等。每家小程序（快應(yīng)用）平臺(tái)都有各自的流量入口，開(kāi)發(fā)者多上傳一個(gè)平臺(tái)，就多一份流量來(lái)源。

各平臺(tái)小程序語(yǔ)法非常相近，業(yè)界已經(jīng)有許多小程序跨端解決方案。一種方式是從已有的微信小程序出發(fā)，利用轉(zhuǎn)換工具（比如 qa-adapter, wx2swan, wx2my, antmove）轉(zhuǎn)換成目標(biāo)小程序的代碼。另一種方式是利用小程序多端框架（比如 taro, uni-app, mpvue）開(kāi)發(fā)。

下面介紹第一種方式，如何基于已有的微信小程序，利用轉(zhuǎn)換工具生成多端代碼。并以 IQOO 社區(qū)小程序?yàn)槔?，體驗(yàn)下各平臺(tái)的轉(zhuǎn)換流程。

微信 => 百度

百度小程序官方文檔上提供了 轉(zhuǎn)換工具

支持兩種轉(zhuǎn)換形式： npm 命令行 和 開(kāi)發(fā)工具

npm 轉(zhuǎn)換

npm install -g wx2swan
wx2swan wxmp

輸出目錄會(huì)自動(dòng)添加 _swan 后綴

同時(shí)，轉(zhuǎn)換的代碼中會(huì)生成 log 文件。包含三種 log：

log
├── error.json   （沒(méi)法轉(zhuǎn)換過(guò)來(lái)的，目前不支持的，比如百度暫未支持的API，二次開(kāi)發(fā)時(shí)需要修改的）
├── info.json    （搬家工具轉(zhuǎn)換操作的log）
└── warning.json （根據(jù)經(jīng)驗(yàn)，有可能引起報(bào)錯(cuò)的，二次開(kāi)發(fā)時(shí)候需要重點(diǎn)注意的）

error.json 例子：

[{
  "type": "delete api",
  "file": "/Users/dev/packageAPI/pages/bluetooth/bluetooth.js",
  "row": 50,
  "column": 10,
  "before": "wx.onBluetoothAdapterStateChange(function (res) {\n  if (res && res.available) {\n    this.startBluetoothDevicesDiscovery();\n  }\n})",
  "after": "",
  "message": "wx.onBluetoothAdapterStateChange:沒(méi)有相對(duì)應(yīng)的函數(shù)"
}]

開(kāi)發(fā)工具轉(zhuǎn)換

轉(zhuǎn)換結(jié)果

嘗試了幾個(gè)項(xiàng)目，都能轉(zhuǎn)成百度小程序，但一般無(wú)法正常運(yùn)行，需要手動(dòng)修改幾處阻塞的問(wèn)題之后才能往下進(jìn)行。

遇到的幾個(gè)問(wèn)題：

1. 不支持 require('utils.js') 這種相對(duì)路徑的寫(xiě)法，需要手動(dòng)改成 require('./utils.js')
2. 不支持 require 變量，需要避免
3. 不支持 plugin, 需要將其從 usingComponents 中移除，否則編譯報(bào)錯(cuò)
4. 不支持微信小程序的 miniprogram_npm， 需要手動(dòng)修改 require 的路徑
5. 轉(zhuǎn)換工具會(huì)直接刪除不支持的 API， 需要留意轉(zhuǎn)換報(bào)告

解決完阻塞問(wèn)題后的效果對(duì)比：

微信 => 支付寶

轉(zhuǎn)換工具：

1. wx2my 
2. Antmov

wx2my

wx2my 支持 npm 命令行和 vscode 插件形式。

npm 命令行

npm i -g wx2my
wx2my wxmp

容易出現(xiàn)“轉(zhuǎn)換失敗”的提示，不過(guò)還是有轉(zhuǎn)換代碼生成。

不支持的 api 只會(huì)在報(bào)告中體現(xiàn)，不會(huì)擅自刪除代碼。

生成的 todo.html 信息較為豐富，還可以跳轉(zhuǎn)到文檔。

vscode 插件形式

1. 搜索安裝插件 wx2my
2. 打開(kāi) vscode 命令面板輸入 wx2my 或者直接在文件欄 app.json 右鍵選擇 wx2my

轉(zhuǎn)換結(jié)果

Antmove

Antmove 支持多種小程序間的相互轉(zhuǎn)換。

npm 命令行形式：

npm i -g antmove
antmove wx-alipay -i IQOO_wx -o IQOO_my --env development

轉(zhuǎn)換報(bào)告顯示轉(zhuǎn)換得很成功。

vscode 插件形式

1. 搜索安裝插件 Antmove
2. 打開(kāi) vscode 命令面板輸入 Antmove: Run antmove wx-alipay
3. 選擇輸出路徑

轉(zhuǎn)換結(jié)果

雖然轉(zhuǎn)換報(bào)告顯示完全轉(zhuǎn)換，但是其實(shí)在 IDE 中無(wú)法正常預(yù)覽。編譯中有阻塞性的報(bào)錯(cuò)。因?yàn)槲⑿判〕绦虻?plugin 在支付寶中是無(wú)法使用的，導(dǎo)致編譯報(bào)錯(cuò)。

暫時(shí)刪除引用的 plugin 后，頁(yè)面可以大致展示出來(lái)：

微信 => 快應(yīng)用（兼容版）

微信小程序轉(zhuǎn)換快應(yīng)用（兼容版）也支持兩種形式轉(zhuǎn)換

npm 命令行
IDE 插件

詳細(xì)教程： 微信小程序轉(zhuǎn)快應(yīng)用工具

npm 命令行

1. npm i -g qa-adapter
2. adt [sourceDir] [destDir?optional]
3. 會(huì)自動(dòng)彈出轉(zhuǎn)換報(bào)告 report.html
4. 在快應(yīng)用開(kāi)發(fā)工具中打開(kāi)預(yù)覽

IDE 插件

1. 快應(yīng)用中搜索安裝插件 hap-transformer
2. 命令面板，輸入 hap:transfer wechat miniprogram into Quick App
3. 輸入源碼路徑和輸出路徑,點(diǎn)擊“轉(zhuǎn)換”

轉(zhuǎn)換效果

在 IDE 中打開(kāi)一樣遇到了 plugin 報(bào)錯(cuò)問(wèn)題，手動(dòng)把 plugin 刪除后就可以正常預(yù)覽頁(yè)面：

總結(jié)

1. 目前市面上的小程序語(yǔ)法、框架、組件、接口都非常相近，利用轉(zhuǎn)換工具，可以非常快速地實(shí)現(xiàn)小程序多端開(kāi)發(fā)、上線(xiàn)。代碼轉(zhuǎn)換基本是分分鐘的事
2. 各轉(zhuǎn)換工具大差不差，大都支持 npm 命令行的模式，輸入命令一鍵轉(zhuǎn)換
3. 利用轉(zhuǎn)換工具生成的目標(biāo)代碼，和原來(lái)的代碼結(jié)構(gòu)一致，具有非常好的可讀性，方便對(duì)目標(biāo)平臺(tái)做針對(duì)性的修改
4. 現(xiàn)有的轉(zhuǎn)換工具還沒(méi)有完全覆蓋微信的特性，有些微信特有的功能（比如 plugin，miniprogram_npm 等），沒(méi)有很好的轉(zhuǎn)換或者提示，需要人為手動(dòng)修改
5. 微信小程序轉(zhuǎn)快應(yīng)用工具 提供了另外一種快速接入快應(yīng)用的方式，而無(wú)需學(xué)習(xí)新語(yǔ)法
6. 各小程序(快應(yīng)用)平臺(tái)差異在所難免（比如百度不支持 require('utils.js') 這種相對(duì)路徑的寫(xiě)法、微信的 plugin 不被其他平臺(tái)支持），所以如果要考慮多端，需要盡量采用比較通用的特性和寫(xiě)法，減少轉(zhuǎn)換后的修改工作