微信小程序转支付宝小程序工具：wx2my（转载）

背景

目前市面上有很多微信小程序，同时开发者开发完微信小程序后，希望可以同时发布到支付宝小程序平台上，可惜微信小程序并不能直接发布到支付宝平台上，两个平台小程序不兼容。因此开发者需要对微信小程序代码进行修改，调整成支付宝小程序代码。

庆幸的事两种小程序代码有很多相似之处，手动修改比较繁琐，因此小程序助手孕育而生。达到自动把微信小程序代码转换成支付宝小程序。不过由于两种小程序功能和api等的不一致，转换后生成的支付宝小程序并不能直接运行起来，还需要进行代码检查，手动的修改无法转换的部分。

 

地址

   vscode插件： wx2my（微信小程序转支付宝小程序）

   cli命令工具： wx2my npm地址

   使用文档： wx2my 语雀地址

 

目标

快速转换微信小程序为支付宝小程序，达到快速转换，降低转换成本，这样可以早点下班。

 

视频教程

能力

 

文件名转换

1. app文件名转换：

微信小程序	--> wx2my -->	支付宝小程序
app.json		app.json
app.js		app.js
app.wxss		app.acss

2. page页面、自定义组件文件名转换：

微信小程序	--> wx2my -->	微信小程序
index.json		index.json
index.js		index.js
index.wxml		index.axml
index.wxss		index.acss

3. 其他类型文件名转换：

微信小程序	--> wx2my -->	支付宝小程序
parse.wxs		parse.sjs
其他类型文件(图片、视频等)		直接复制，不转换

文件内容转换

1. app.json 转换

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

转换方式：

1. navigationBarTitleText --> defaultTitle

2. enablePullDownRefresh --> pullRefresh

3. navigationBarBackgroundColor --> titleBarColor

4. ...等

其中微信小程序支持，支付宝小程序不支持的，需要开发者自己手动修改，如：networkTimeout、functionalPages、workers等

 

2. 全局组件转换

微信小程序支持全局组件，即在app.json中添加usingComponents字段，这样在小程序内的页面或自定义组件中可以直接使用全局组件而无需再声明。

转换方式： 转换工具会分析小程序中所有页面和组件，找到那些使用了全局组件的页面和组件，并把全局组件声明在页面或组件的json文件中，当做普通组件引用和使用。同时把全局组件的声明删除。

 

3. 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: 关键字，查找需要修改的代码

 

4. js文件转换

转换工具对api相关的调用转换使用了桥接文件 wx2my.js ，在所有js文件顶部引入wx2my.js文件，对api的调用，使用桥接函数，桥接函数对api参数不一致的地方在函数内部进行处理，如下：

 

转换前：

wx.request(opts)

 

转换后：

wx2my.request(opts)

 

wx 转换为 wx2my ，其中wx2my为前进函数对外的方法

桥接函数中 request 的方法如下：

转载自：https://developers.weixin.qq.com/community/develop/article/doc/000eea17558f2001b068aa29f5c013