uniapp-App支付宝授权小记
先上效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210430094316959.gif#pic_center)
实现步骤:
1.在点击事件上使用plus.runtime模块调用支付宝打开授权地址(授权地址是后端拼接也可以前端写死) PS:完成第1点应该能看到这样的效果:(如果不是可能是你的授权地址app_id不对) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429143219192.gif#pic_center)
//相关示例代码:(该代码会打开支付宝授权,授权之后会在支付宝中打开你所设置的【回调地址】网页)
//***********************
//***url授权地址由后端拼接也可以前端写死***
//***以下是一个拼接示例,仅需修改app_id的值和redirect_uri的值***
//***app_id是商户的APPID,redirect_uri是页面跳回地址(授权成功之后会在支付宝中打开这个地址)***
//***********************
let urls='https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=2021001183611007&scope=auth_userinfo&redirect_uri=https://shandianlaoshi.com/api/user/zfb_url';
urls=encodeURIComponent(urls);//将地址编码成浏览器访问的格式
// 判断平台
if (plus.os.name == 'Android') {
plus.runtime.openURL(
'alipays://platformapi/startapp?appId=20000067&url=' + urls,
res => {
//这里写打开URL地址失败后的处理
console.log(res);
uni.showModal({
content: '本机未检测到对应客户端,是否打开浏览器访问页面?',
success: function (res) {
if (res.confirm) {
//plus.runtime.openURL();
}
}
});
},
'com.eg.android.AlipayGphone'
);
} else if (plus.os.name == 'iOS') {
plus.runtime.openURL(
'alipay://platformapi/startapp?appId=20000067&url=' + urls,
res => {
console.log(res);
uni.showModal({
content: '本机未检测到对应客户端,是否打开浏览器访问页面?',
success: function (res) {
if (res.confirm) {
//plus.runtime.openURL(url);
}
}
});
},
'com.eg.android.AlipayGphone'
);
}
2.给你的APP设置一个urlscheme(HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://") ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429143429512.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxNzgzODgzMTIx,size_16,color_FFFFFF,t_70#pic_center)
3.提交打包(urlscheme)设置之后需重新打包(可以重新打基座也可以直接云App打包,建议打基座【因为还需要写从支付宝回来之后的事件】) ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429143459590.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxNzgzODgzMTIx,size_16,color_FFFFFF,t_70#pic_center)
4.编写(redirect_uri)页面,编写完成后拿给后端放在服务器上就基本成功了 PS:完成第4点应该看到这样的效果,如果出现没有跳转到你的APP说明你的urlscheme没填写对或者是你的APP没有打包 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210429150549878.gif#pic_center)
//相关示例代码 该代码是一个页面(样式自行编写) 主要的是Js代码
/**
* html
*/
DOCTYPE html>
闪电老师登录
body {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 90vh;
font-size: .9375rem;
}
content{
display: flex;
flex-direction: column;
justify-content: center ;
align-items: center;
}
.logo_img {
width: 6.875rem;
height: 6.875rem;
margin-bottom: .625rem;
}
#box {
width: 60%;
height: 2rem;
text-align: center;
line-height: 2rem;
border-radius: 20px;
background-color: rgb(23, 120, 194);
color: white;
margin: .9375rem auto;
}
.desc {
font-size: .3125rem;
color: gray;
}
返回闪电老师
您已授权登录,请点击返回闪电老师
function func() {
console.log("点击触发99999");
// 判断是那种设备
let u = navigator.userAgent;
console.log(u);
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; // Android系统或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // iOS系统
// 如果为Android系统
if (isAndroid) {
window.location.href = "sdls://?auth_code=88888888"; // 注意*** 这里需要修改为刚刚设置的urlscheme,auth_code需要后端拼接。auth_code只有后端才能拿到
window.setTimeout(function () {
window.location.href = "http://www.baidu.com"; // 3s后如果不能跳转到 App,则跳转到 App 的下载地址,一般是应用宝的对应的下载地址
}, 2000);
return;
}
// ios设备:原理:判断是否认识这个协议,认识则直接跳转,不认识就在这里下载appios();
if (isiOS) {
let startIndex = u.indexOf('iPhone OS') + 9;
let endIndex = u.indexOf('like Mac OS') - 1;
let num = +u.slice(startIndex, endIndex).split('_')[0]; // 计算版本号的前面数值
if (num |