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