wx2my

微信小程序转支付宝小程序工具，降低转换开发成本。

解释

wx：微信

my：蚂蚁金服 (支付宝)

使用说明

插件安装完成后，在vscode中打开微信小程序项目，然后打开命令输入框（windows:Ctrl+Shift+P、MacOS:Command+Shift+P）,输入wx2my，执行命令即可，转换后的文件放在项目文件夹_output 文件夹下，该文件夹与项目文件夹同级。 详细使用文档：语雀地址

由于微信小程序与支付宝小程序的功能不一致，所以转换后的支付宝小程序并不能直接运行，需要开发者手动的修改。

转换能力

• [x] .json: JSON文件转换
• [x] .js: 脚本文件转换
• [x] 样式文件.wxss 转 .acss
• [x] 模板文件.wxml 转 .axml
• [x] 文件.wxs 转 .sjs
• [x] api使用wx2my.js文件桥接函数转换
• [x] todo.html 转换结果报告，方便开发者查找检查

详细介绍

app.json 转换

app.json文件为整个小程序配置文件，不过微信小程序app.json和支付宝小程序在app.json配置文件支持的能力不完全一致，部分一致的但名称不一致的配置，转换工具会分析并转换出来。

转换方式：

1. navigationBarTitleText -->defaultTitle**
2. enablePullDownRefresh -->pullRefresh**
3. navigationBarBackgroundColor -->titleBarColor**
4. ...等

其中微信小程序支持，支付宝小程序不支持的，需要开发者自己手动修改，如：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
  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);
  }
}