最近转移到新坑位,公司原有微信小程序,需要在开发一版支付宝小程序。可能很多人和笔者一样,微信小程序接触并开发的比较多,但是支付宝小程序可以说是小白一枚,简单看了文档之后发现,其实本质上没有太大区别,只是一些语法、配置等方面有一定的差别。现在支付宝小程序也做得差不多了,简单总结下两者的区别,当然主要是基本语法和项目中涉及到的知识点的一些总结,毕竟支付宝小程序还没有深入研究。
一、基本的文件格式和配置
微信小程序文件后缀:.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日期选择器格式不一样啊等等比较小的问题,基本通过查看文档就能轻松解决了。
当然有些大佬对微信小程序玩的相当的溜,这种大佬相信做支付宝小程序也不会有太大问题。对于我们这些小白还是需要不断加油的共勉