微信小程序转支付宝小程序
目录
微信小程序转支付宝小程序
业务需求：微信小程序项目要全部移植到支付宝平台，要求样式、功能与微信端保持一致，并且工作周期较短。
1、代码转换：
那会儿找了两个vscode上的插件，【wx2my】和【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": ...
}
}
}差不多修改完这些以后，项目就能正常的运行和发布了。不过还有其他需要处理的地方应该没有总结到，遇到新的问题了再汇总处理吧。