1.点击使用plus.runtime跳转打开支付宝
//打开支付宝授权,在支付宝APP中授权后会在支付宝中跳转到你填写的h5地址
//urls是授权地址可以后端拼接也可以前端写死
//以下是一个拼接示例,需修改app_id的值和redirect_uri的值即可
//app_id是商户的APPID,redirect_uri是你在支付宝中授权后的回调地址,在回调页面中你可以在路由中获取auth_code
let urls='https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=******&scope=auth_userinfo&redirect_uri=https://****.com/html';
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,用作从支付宝返回APP使用
HBuilder/HBuilderX自带真机运行基座的UrlSchemes为"hbuilder://",设置后从新打包才会生效
PS:ios端ios9以下需要把设置的UrlSchemes添加到白名单才可使用,否则会报错(plus.runtime.openURL 报错code:-3,msg:此功能不支持),具体添加如下:
5+App项目
在manifest.json文件的"plus"->"distribute"->"apple"下添加urlschemewhitelist节点数据如下:
"plus": {
"distribute": {
"apple": {
"urlschemewhitelist": [
"BaiduSSO",
"qqmusic"
],
//...
},
//...
},
//...
}
uni-app项目 把上面的urlschemewhitelist节点数据放到manifest.json的"app-plus"->"distribute"->"ios"节点下 注意:保存后提交App云端打包后才能生效 或者自定义基座运行也可,列表最多可添加50个
3.编写h5回调页面,编写完成后放置到服务器上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>汽震音乐</title>
<style>
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: 4.6rem;
height: 4.6rem;
margin-bottom: 1rem;
}
.title{
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 1.2rem;
color: #000000;
font-style: normal;
margin-bottom: 0.4rem;
}
#box {
width: 16rem;
height: 2.4rem;
text-align: center;
line-height: 2.4rem;
border-radius: 1.2rem;
background: linear-gradient( 225deg, #F1EA3D 0%, #8FEE6B 54%, #72D5E4 100%);
border-radius: 0.7rem;
font-family: PingFangSC, PingFang SC;
font-weight: 600;
font-size: 1.06rem;
color: #000000;
text-align: center;
font-style: normal;
position: fixed;
bottom: 12.2rem;
left: calc(50% - 8rem);
}
.desc {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 0.8rem;
color: #9C9C9C;
font-style: normal;
}
</style>
</head>
<body>
<content>
<img src="./logo.png" class="logo_img">
<div class="title">您已授权</div>
<div class="desc">请点击返回汽震音乐</div>
<div id="box" onclick="func()">返回汽震音乐</div>
</content>
</body>
<script>
// 获取auth_code
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) {
return pair[1];
}
}
return (false);
}
async function copyURL(){
try {
await navigator.clipboard.writeText(window.location.href);
alert("已复制链接请到浏览器打开");
// 这里可以添加用户通知或其他UI反馈
} catch (err) {
alert("请点击右上角复制链接,到浏览器打开");
}
}
function func() {
let code = getQueryVariable("auth_code");
// 判断是那种设备
let u = navigator.userAgent;
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 = "***music://auth_code=" + code; // 注意*** 这里需要修改为刚刚设置的urlscheme,auth_code需要后端拼接。auth_code只有后端才能拿到
window.setTimeout(function () {
copyURL();
}, 2000);
window.setTimeout(function () {
window.location.href = "https://rehuocm.com/download/"; // 3s后如果不能跳转到 App,则跳转到 App 的下载地址,一般是应用宝的对应的下载地址
}, 4000);
return;
}
// ios设备:原理:判断是否认识这个协议,认识则直接跳转,不认识就在这里下载appios();
if (isiOS) {
window.location.href = "***music://auth_code=" + code;
window.setTimeout(function () {
copyURL();
}, 2000);
window.setTimeout(function () {
window.location.href = "https://apps.apple.com/cn/app/%E6%B1%BD%E9%9C%87%E9%9F%B3%E4%B9%90/id6575360289"; // 3s后如果不能跳转到 App,则跳转到 AppStore 的下载地址
}, 4000);
return;
};
}
</script>
</html>
PS:支付宝里在回调页面中点击返回自己的app中非常的不灵敏,我现在还没有好的解决方法,有好的解决方法欢迎评论告诉我
4.再APP中接收支付宝中回调页面返回的code
onShow((e) => {
setTimeout(function(){
var args:any = plus.runtime.arguments; //这里可以看到从后端拿过来的urlscheme 或 通用链接
plus.runtime.arguments = ''; //进入之后就把urlscheme清空要不然下一次oushow时还会执行
args = args.split('auth_code');
console.log(args)
args = args[1].slice(1);
console.log(args)
if(args){
// 处理args参数,如直达到某新页面等
console.log(args,'code');
}
},0);
})
PS:可能会出现跳转回APP成功了,但是拿不到带回来的参数,这时我们就要在pages.json文件下找到condition这个节点删除就可以了,它回影响ios的启动