微信小程序轉支付寶小程序工具，降低轉換開發成本。
解釋
wx：微信
my：螞蟻金服 (支付寶)
使用說明
插件安裝完成後，在vscode中打開微信小程序項目，然後打開命令輸入框（windows:Ctrl+Shift+P、MacOS:Command+Shift+P）,輸入wx2my，執行命令即可，轉換後的文件放在項目文件夾_output 文件夾下，該文件夾與項目文件夾同級。 詳細使用文檔：語雀地址
由於微信小程序與支付寶小程序的功能不一致，所以轉換後的支付寶小程序並不能直接運行，需要開發者手動的修改。
轉換能力
- .json: JSON文件轉換
- .js: 腳本文件轉換
- 樣式文件.wxss 轉 .acss
- 模板文件.wxml 轉 .axml
- 文件.wxs 轉 .sjs
- api使用wx2my.js文件橋接函數轉換
- todo.html 轉換結果報告，方便開發者查找檢查
詳細介紹 - app.json 轉換
- app.json文件爲整個小程序配置文件，不過微信小程序- app.json和支付寶小程序在app.json配置文件支持的能力不完全一致，部分一致的但名稱不一致的配置，轉換工具會分析並轉換出來。
轉換方式：
- navigationBarTitleText -->defaultTitle**
- enablePullDownRefresh -->pullRefresh**
- navigationBarBackgroundColor -->titleBarColor**
- …等
其中微信小程序支持，支付寶小程序不支持的，需要開發者自己手動修改，如：networkTimeout、functionalPages、workers等
全局組件轉換
微信小程序支持全局組件，即在app.json中添加usingComponents字段，這樣在小程序內的頁面或自定義組件中可以直接使用全局組件而無需再聲明。
轉換方式： 轉換工具會分析小程序中所有頁面和組件，找到那些使用了全局組件的頁面和組件，並把全局組件聲明在頁面或組件的json文件中，當做普通組件引用和使用。同時把全局組件的聲明刪除。
wxml文件轉換
- 轉換邏輯是以wx:xxx開頭的，替換爲a:xxx方式。
a. 事件相關的轉換，微信中 bindeventname 或 bind:eventname 轉換爲 onEventname， 如下：
轉換前：
<page
bindtap="showName"
bind:input = "actionName"
catchchange="catchchange"
bindtouchend="onTouchEnd"
></page>
轉換前：
<page
bindtap="showName"
bind:input = "actionName"
catchchange="catchchange"
bindtouchend="onTouchEnd"
></page>
轉換後：
<page
onTap="showName"
onInput = "actionName"
catchChange="catchchange"
onTouchEnd="onTouchEnd"
></page>
b: 循環語句轉換， 如下：
轉換前：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="unique">
{{idx}}: {{itemName.message}}
</view>
轉換後：
<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName" a:key="unique">
{{idx}}: {{itemName.message}}
</view>
c: wxs代碼轉換，微信小程序中的wxs功能對應支付寶小程序中的sjs功能，微信wxml中支持引用外部wxs文件和內聯wxs代碼，支付寶中只支持引用外部文件方式使用sjs，不支持內聯sjs代碼。
轉換方式：轉換工具分享所有wxml文件，找到wxs內聯代碼，提取wxs的內聯代碼，生成sjs文件，並使用外部引用的方式引入sjs文件，如下：
轉換前：
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="../wxs/utils.wxs" module="utils"> </wxs>
<wxs module="parse">
module.exports.getMax = getMax;
</wxs>
轉換後：
<import-sjs from="../wxs/utils.sjs" name="utils" />
<import-sjs from="../wxs/utils.sjs" name="utils"/>
<import-sjs from="./parse.sjs" name="sjsTest" />
並在同級目錄下創建了 parse.sjs 文件，並轉換wxs的CommonJS爲ESM
parse.sjs文件內容：
export default { getMax };
d: 無法替換完成的，在轉換後的支付寶小程序的代碼中，插入註釋代碼，提醒開發者並需要開發者手動檢查修改。如下：
轉換前：
<cover-image
class="img"
src="/path/to/icon_play"
bindload="bindload"
binderror="binderror"
aria-role="xxx"
aria-label="xxx"
/>
轉換後：
<cover-image
class="img"
src="/path/to/icon_play"
bindload="bindload"
binderror="binderror"
aria-role="xxx"
aria-label="xxx"
/><!-- WX2MY: 屬性bindload、binderror、aria-role、aria-label不被支持，請調整 -->
出現這種情況，開發者可以手動的搜索 WX2MY: 關鍵字，查找需要修改的代碼
js文件轉換
轉換工具對api相關的調用轉換使用了橋接文件 wx2my.js ，在所有js文件頂部引入wx2my.js文件，對api的調用，使用橋接函數，橋接函數對api參數不一致的地方在函數內部進行處理，如下：
轉換前：
wx.request(opts)
轉換後：
wx2my.request(opts)
wx 轉換爲 wx2my ，其中wx2my爲前進函數對外的方法
橋接函數中 request 的方法如下：
{
request: function request({ url, data, header, method, success, fail, complete, }) {
const requestObj = {
url,
headers: header,
method,
data: JSON.stringify(data),
dataType,
success: ({ data, status, headers }) => {
if (success) {
success({ data, statusCode: status, header: headers });
}
},
fail,
complete,
};
return my.request(requestObj);
}
}
轉換之後需要注意幾點:
1:轉換如果報錯，需要手動添加一個文件：在根目錄下：
Behavior.js
內容：
const wx2my = require('./wx2my');
const Behavior = require('./Behavior');
// Create by wx2my.
module.exports = function Behavior(obj) {
const keyMap = {
properties: 'props',
created: 'onInit',
attached: 'didMount',
detached: 'didUnmount'
};
Object.keys(keyMap).forEach(key => {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
obj[keyMap[key]] = obj[key];
delete obj[key];
}
}); // if exist lifetimes replace others.
if (obj.lifetimes) {
const keyMap = {
created: 'onInit',
attached: 'didMount',
detached: 'didUnmount'
};
const lifetimesObj = obj.lifetimes;
Object.keys(keyMap).forEach(key => {
if (Object.prototype.hasOwnProperty.call(lifetimesObj, key)) {
obj[keyMap[key]] = lifetimesObj[key];
}
});
delete obj.lifetimes;
}
return obj;
};
2：下載支付寶小程序後，需要在支付寶的小程序每一個js的內容上添加這樣的引用
const wx2my = require('../wx2my');
const Behavior = require('../Behavior');
3：支付寶添加js引用跟微信有一些區別，需要主要的是要在前面加 …/
4:需要重新調整樣式
在支付寶裏面的樣式跟微信的完全不一樣，需要調整rem的大小。
5：支付寶小程序目前對用戶自定義控件兼容性不是非常友好，需要注意這點，儘量減少或者不用自定義控件。
6:支付寶申請小程序跟發佈版本基本上跟微信小程序一致，需要注意一點，支付寶小程序發佈審覈需要2個工作日，微信小程序只需要幾個小時。
7:支付寶小程序頁面js一樣有緩存。緩存更新時間跟微信差不多，一個工作日