微信小程序转支付宝小程序

业务需求：微信小程序项目要全部移植到支付宝平台，要求样式、功能与微信端保持一致，并且工作周期较短。

1、代码转换：

那会儿找了两个vscode上的插件，【wx2my】和【Antmove 小程序转换器（微信转支付宝）】，第一个插件执行完命令后总是报错，没细追报错的原因，于是使用了第二个插件，转换过程还是很快的，以下是插件教程，供参考：

小程序转换工具—Antmove 教程解析-七度鱼互联网络工作室

GitHub - ant-move/Antmove: 小程序转换器，基于支付宝/微信小程序， 轻松地转换成其它平台的小程序。

2、代码处理：

1）开发文档地址：

     微信开发文档：微信开放文档

     支付宝开发文档：小程序文档 - 支付宝文档中心

2）一些小程序提供的api返回的数据和格式是不同的，比如授权手机号：       

微信小程序：

<button open-type="getPhoneNumber" bindgetphonenumber="onGotPhoneNumber"></button>

onGotPhoneNumber(e) {
    if (e.detail.errMsg == "getPhoneNumber:ok") {
        ......
    }
}


支付宝小程序：

<btn open-type='getAuthorize' onGetAuthorize='onGotPhoneNumber' scope='phoneNumber'></btn>

onGotPhoneNumber(e) {
    my.getPhoneNumber({
        success: (res) => {
            if (res.response) {
                ......
            }
        }
    })
}

3）部分api的使用传参不同，比如setStorageSync：

微信小程序：

wx.setStorageSync('keyName', keyValue)


支付宝小程序：

my.setStorageSync({
    key: 'keyName',
    data: keyValue
})

4）部分组件的方法名称和返回值是不同的，比如scroll-view组件：

微信小程序：

<scroll-view scroll-y style="height: 100%;" bindscrolltolower="reachBottomEvent" bindscroll="scrollEvent" scroll-top="{{scrollTop}}"></scroll-view>

/* 触底事件 */
reachBottomEvent() {
    ......
}

/* 滚动事件 */
scrollEvent(e) {
    this.setData({
        scrollTop: e.detail.scrollTop
    })
}

支付宝小程序：

<scroll-view scroll-y="{{true}}" style='height:{{scrollbarHeight}};' onScrollToLower='reachBottomEvent' onScroll='scrollEvent' scroll-top='{{scrollTop}}'></scroll-view>

/* 触底事件 */
reachBottomEvent() {
    ......
}

/* 滚动事件 */
scrollEvent(e) {
    this.setData({
        scrollTop: e.detail.scrollTop
    })
}

onLoad() {
    my.getSystemInfo({
        success: (res) => {
            this.setData({
                scrollbarHeight: (res.safeArea ? (res.windowHeight*2-(res.screenHeight-res.safeArea.bottom)-10) : (res.windowHeight+res.statusBarHeight)*2)+'rpx'
            })
        }
    })
}

        注：还有就是scroll-view的一个高度问题，同样是在一个占满全屏的页面中，微信小程序height:100%是可以正常触发触底事件的，但是在支付宝小程序中这样设置就不行，所以在onLoad中获取了一下屏幕高度和安全高度，这样设置后也可以正常触发触底事件了。

5）样式问题：

        目前发现的问题是，在微信小程序中占满一行的元素，在支付宝小程序中超出一行换行展示了，而且在支付宝小程序中的元素像素展示都是rem单位的，微信小程序中是rpx单位的，可能和这个有关。总之转换完后的页面需要去查看下样式是否有变形。

6）小程序的自定义导航栏配置，只是字段名和文件名不同：

微信小程序：

文件名称：custom-tab-bar

app.json配置：
    {
        ...
        "tabBar": {
        "custom": true,
            ...
        },
        ...
    }

支付宝小程序：

文件名称：customize-tab-bar

app.json配置：
    {
        ...
        "tabBar": {
        "customize": true,
            ...
        },
        ...
    }

7）微信插件，运行时不报错，上传时报错：

{
    "root": "packageName",
    "pages": [
        ...
    ],
    "plugins": {
        "PluginName": {
            "version": ...,
            "provider": ...
         }
    }
}

差不多修改完这些以后，项目就能正常的运行和发布了。不过还有其他需要处理的地方应该没有总结到，遇到新的问题了再汇总处理吧。