uniapp支付宝小程序支付&用户授权·支付宝端h5支付&用户授
2020-06-17 本文已影响0人
Feng_Du
一、h5支付宝授权流程
h5授权流程官方文档：https://opendocs.alipay.com/open/284/h5
1、针对不同客户端js判断代码：
if (/MicroMessenger/.test(window.navigator.userAgent)) {
alert('微信客户端');
} else if (/AlipayClient/.test(window.navigator.userAgent)) {
alert('支付宝客户端');
} else {
alert('其他浏览器');
}
2、在组件页面mounted生命周期下引入官方js。
const oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = 'https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js';
document.body.appendChild(oScript);
3、 定义获取授权方法得到auth_code。（如报错请查看错误码信息，注意配置回调地址）
<button @click="getalpayuser()">getAuthCode</button>
-----------js-------------------------------------------
getalpayuser() {
ap.getAuthCode(
{
appId: `${appid}`,
scopes: ['auth_user']
},
function(res) {
ap.alert(JSON.stringify(res));
}
);
},
4、把得到的auth_code传给后端通过接口获取对应用户信息。
二、h5支付宝支付流程。
官方文档：https://opendocs.alipay.com/open/203/107090
1、调用后端地址获取对应form或者支付链接。（php版本pageExecute ( $request，get);）
2、在客户端调用链接支付。
三、小程序授权登录流程
1、条件判断，通过官方的条件编译判断。
2、uni.login获取信息。
<button class="signin-btn" open-type="getUserInfo" @click="onalipaySignin">授权登录</button>
onalipaySignin(){
uni.login({
provider: 'alipay',
success: function (loginRes) {
console.log(loginRes.authResult); // 获取用户信息
uni.getUserInfo({
provider: 'alipay',
success: function (infoRes) {
console.log('用户昵称为：' + infoRes.userInfo.nickName);
} });
} });
}
四、小程序支付
1、官方文档：https://opendocs.alipay.com/mini/introduce/pay
2、页面支付
原生代码
my.tradePay({ // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号
trade_no tradeNO: '201711152100110410533667792',
success: (res) => {
my.alert({ content: JSON.stringify(res), });
},
fail: (res) => {
my.alert({ content: JSON.stringify(res), }); } });
uniapp代码
// 仅作为示例，非真实参数信息。支付宝小程序的 orderInfo(支付宝的规范为 tradeNO) 为 String 类型，表示支付宝交易号。
uni.requestPayment({
provider: 'alipay',
orderInfo: 'orderInfo', // ==tradeNO
success: function (res) {
console.log('success:' + JSON.stringify(res));
}, fail: function (err) {
console.log('fail:' + JSON.stringify(err));
}
});
