# wx2my

> 小程序转换，微信小程序转支付宝小程序

Latest version **0.0.7** (published 2019-06-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install wx2my
pnpm add wx2my
yarn add wx2my
bun add wx2my
```

Provides the command `wx2my`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2019-06-06 |
| First published | 2019-03-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 227 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 15 |
| Author | chengguan |
| Maintainers | zsk526 |
| Keywords | wx2my, 小程序转换, 微信小程序, 支付宝小程序, 小程序助手, convert, migrate |

## Links

- npm: https://www.npmjs.com/package/wx2my
- Repository: https://github.com/debian001/app-migrator
- Homepage: https://github.com/debian001/app-migrator#readme
- Issues: https://github.com/debian001/app-migrator/issues
- npm.io page: https://npm.io/package/wx2my

## Dependencies (15)

- [opn](https://npm.io/package/opn.md) ^5.5.0
- [pug](https://npm.io/package/pug.md) ^2.0.3
- [cjs-es6](https://npm.io/package/cjs-es6.md) 0.0.4
- [fs-extra](https://npm.io/package/fs-extra.md) ^7.0.1
- [camelcase](https://npm.io/package/camelcase.md) ^5.3.1
- [escodegen](https://npm.io/package/escodegen.md) ^1.11.1
- [dateformat](https://npm.io/package/dateformat.md) ^2.2.0
- [decamelize](https://npm.io/package/decamelize.md) ^3.2.0
- [xmlparsing](https://npm.io/package/xmlparsing.md) ^1.0.3
- [js-beautify](https://npm.io/package/js-beautify.md) ^1.9.1
- [@babel/types](https://npm.io/package/@babel/types.md) ^7.3.4
- [@babel/parser](https://npm.io/package/@babel/parser.md) ^7.4.3
- [@babel/traverse](https://npm.io/package/@babel/traverse.md) ^7.4.3
- [esprima-harmony](https://npm.io/package/esprima-harmony.md) ^7001.1.0-dev-harmony-fb
- [@babel/generator](https://npm.io/package/@babel/generator.md) ^7.4.0

## Recent versions

- 0.0.7 (latest) — 2019-06-06
- 0.0.6 — 2019-04-30
- 0.0.5 — 2019-04-16
- 0.0.2 — 2019-04-12
- 0.0.1 — 2019-03-29

## README

# wx2my

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

## 解释

> `wx`：`微信`

> `my`：`蚂蚁`金服 (支付宝)

## 安装

```shell
npm install -g wx2my
```

## 使用说明

```shell
wx2my ./path/to/wxapp
```

转换后的文件放在`项目文件夹_output`文件夹下，该文件夹与项目文件夹同级，以上命令生成的支付宝小程序目录路径为`./path/to/wxapp_output`。**详细使用文档：[语雀地址](https://www.yuque.com/chengguan/wx2my)**
> 由于微信小程序与支付宝小程序的功能不一致，所以转换后的支付宝小程序并不能直接运行，需要开发者手动的修改。

## 转换能力

- [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](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)和[支付宝小程序在app.json](https://docs.alipay.com/mini/framework/app#appjson)配置文件支持的能力不完全一致，部分一致的但名称不一致的配置，转换工具会分析并转换出来。

#### 转换方式：

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

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

### **全局组件转换**

微信小程序支持[全局组件](https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html)，即在app.json中添加**usingComponents**字段，这样在小程序内的页面或自定义组件中可以直接使用全局组件而无需再声明。

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

### **wxml文件转换**

转换逻辑是以**wx:**xxx开头的，替换为**a:**xxx方式。

a. 事件相关的转换，微信中 **bindeventname **或** bind:eventname** 转换为 **onEventname**， 如下：

转换前：

```xml
<page
  bindtap="showName"
  bind:input = "actionName"
  catchchange="catchchange"
  bindtouchend="onTouchEnd"
></page>
```

转换后：

```xml
<page
  onTap="showName"
  onInput = "actionName"
  catchChange="catchchange"
  onTouchEnd="onTouchEnd"
></page>
```

b: 循环语句转换， 如下：

转换前：

```xml
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="unique">
  {{idx}}: {{itemName.message}}
</view>
```

转换后：

```xml
<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文件，如下：

转换前：

```xml
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="../wxs/utils.wxs" module="utils"> </wxs>

<wxs module="parse">
  module.exports.getMax = getMax;
</wxs>
```

转换后：

```xml
<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文件内容：

```javascript
 export default { getMax };
```

d: 无法替换完成的，在转换后的支付宝小程序的代码中，插入注释代码，提醒开发者并需要开发者手动检查修改。如下：

转换前：

```xml
<cover-image
  class="img"
  src="/path/to/icon_play"
  bindload="bindload"
  binderror="binderror"
  aria-role="xxx"
  aria-label="xxx"
/>
```

转换后：

```xml
<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参数不一致的地方在函数内部进行处理，如下：

转换前：

```javascript
wx.request(opts)
```

转换后：

```javascript
wx2my.request(opts)
```

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

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

```javascript
{
  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);
  }
}
```

---
_Source: https://npm.io/package/wx2my · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._