uniapp系列之支付宝端支付&授权等(uniapp支付宝支付开发)
前言
本文主要涉及到了uniapp基于支付宝平台的，支付&用户授权·支付宝端h5支付&用户授权等相关操作。
支付宝端相关开发的较少，这边做一个总结和笔记吧！
一、h5支付宝授权流程
h5授权流程官方文档：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支付宝支付流程。
我们可以先看看官方文档介绍再开始：opendocs.alipay.com/open/203/10…
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、官方文档：opendocs.alipay.com/mini/introd…
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));
}
});复制代码结尾
伪原创工具 SEO网站优化 https://www.237it.com/
希望对uniapp的小伙伴有帮助。
作者：dufeng
链接：https://juejin.cn/post/7036007680242089998