最近转移到新坑位，公司原有微信小程序，需要在开发一版支付宝小程序。可能很多人和笔者一样，微信小程序接触并开发的比较多，但是支付宝小程序可以说是小白一枚，简单看了文档之后发现，其实本质上没有太大区别，只是一些语法、配置等方面有一定的差别。现在支付宝小程序也做得差不多了，简单总结下两者的区别，当然主要是基本语法和项目中涉及到的知识点的一些总结，毕竟支付宝小程序还没有深入研究。
一、基本的文件格式和配置
微信小程序文件后缀：.wxml .wxss
支付宝小程序文件后缀：.axml .acss
同样的对于配置json文件，设置页面标题、是否下拉刷新等参数也不一致，具体的参考文档即可，此处不详细列出。
二、基础语法和方法调用
| 方法 | 微信小程序 | 支付宝小程序 |
|---|---|---|
| 内置方法调用 | 通过wx.方式 | 通过my.方式 |
| 页面内语法 | wx:if/wx:for | a:if/a:for |
| 触发事件 | 通过bindtap/bindcatch等 | 通过onTap/onCatch等 |
| 缓存方法 | wx.getStorageSync()/wx.setStorageSync() | my.setStorageSync({key: '', data: ''})/my.getStorageSync({key: ''}).data |
三、授权相关方法
| 方法 | 微信小程序 | 支付宝小程序 | 其他 |
|---|---|---|---|
| 获取定位 | wx.getLocation({}） | my.getLocation({}) | 传参type，微信可以默认船‘wgs84’，支付宝传1 |
| 登录凭证 | wx.login({}) | my.getAuthCode({}) | |
| 手机号授权 | 详见下部说明 |
关于手机号授权，需要单独说一下，尤其是支付宝的坑。
对于微信手机号授权，我们按照文档去开发即可，附简单代码：
<button class='submit-pay-btn' open-type="getPhoneNumber" bindgetphonenumber="authJianpan">授权</button>
authJianpan: function (e) {
if (e.detail.errMsg == 'getPhoneNumber:ok') {
// 授权成功方法
} else {
// 拒绝授权方法
}
}
但是对于支付宝手机号授权，我们按照文档方式去写，会发现授权的回调并不能被成功触发，支付宝的授权后回调是需要单独写出来的，直接上代码：
<button class='submit-pay-btn' open-type="getAuthorize" onGetAuthorize="getPhoneNum" onError="onAuthError" scope='phoneNumber'>确认支付</button>
// 授权
onGetAuthorize: function (e) {
return new Promise((resolve, reject)=>{
my.getPhoneNumber({
success: (res) => {
// 授权成功
resolve(res)
},
fail: (res) => {
// 拒绝授权
reject(res)
}
})
})
},
// 授权成功回调
getPhoneNum: function(e){
this.onGetAuthorize(e).then((res)=>{})
},
// 拒绝授权回调
onAuthError: function(err){}
简单说一下支付宝授权方法：在定义button的时候需要添加onGetAuthorize/onError方法，分别代表同意授权和拒绝授权，然后定义onGetAuthorize方法，可以通过my.getPhoneNumber方法拿到授权成功或者失败，然后在分别处理成功失败的回调。
四、支付接口
微信小程序的支付方法 wx.requestPayment，需要传一堆参数进去，当然这些参数通过后端接口和文档结合很容易就能获取到；
支付宝小程序的支付方法 my.tradePay，只需要传入一个 tradeNO 参数即可，但是这个参数文档里并没有明确说明到底是哪个字段，案例只是写了一串数字，这就比较坑了，最终经过试验，确定拿到的是后端通过与支付宝对接之后返回的source字段（还有一个比较狠的方法是，看各个字段返回值，去和文档中的值比较，长度一致可能就是需要的字段）。
五、支付宝小问题记录：
1、非tab页面跳转导致tabbar不显示
有些页面在进入的时候需要用户授权，这时候我们通常会加一个统一的授权页，用户同意授权会成功并返回原页面，取消授权则会回到首页。在微信小程序里，我们可以使用wx.redirectTo进行跳转，后续流程正常执行。但是在支付宝小程序里无论是通过my.navigateTo和my.redirectTo跳转，在用户取消授权回到首页的时候都会导致tabbar不显示问题，同事页面相关生命周期和点击事件均无效。
上述问题解决办法，根据官方回复，在由tab页跳转到非tab页时不要用navigateTo和redirectTo，可以使用relaunch方式进行跳转，这样在返回时能够成功显示tabbar并不影响后续流程。
以上就是在项目中填过的坑，可能相对比较简单，但是有的问题确实困扰了比较长的时间。当然除了这些，还有一些像modal、alert等的参数不一致啊；picker日期选择器格式不一样啊等等比较小的问题，基本通过查看文档就能轻松解决了。
当然有些大佬对微信小程序玩的相当的溜，这种大佬相信做支付宝小程序也不会有太大问题。对于我们这些小白还是需要不断加油的共勉
