uniapp

您所在的位置:网站首页 如何把支付宝授权的app授权取消了 uniapp

uniapp

2024-07-14 21:23| 来源: 网络整理| 查看: 265

uniapp-App支付宝授权小记 先上效果图

在这里插入图片描述

实现步骤:

1.在点击事件上使用plus.runtime模块调用支付宝打开授权地址(授权地址是后端拼接也可以前端写死) PS:完成第1点应该能看到这样的效果:(如果不是可能是你的授权地址app_id不对) 在这里插入图片描述

//相关示例代码:(该代码会打开支付宝授权,授权之后会在支付宝中打开你所设置的【回调地址】网页) //*********************** //***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://") 在这里插入图片描述

3.提交打包(urlscheme)设置之后需重新打包(可以重新打基座也可以直接云App打包,建议打基座【因为还需要写从支付宝回来之后的事件】) 在这里插入图片描述

4.编写(redirect_uri)页面,编写完成后拿给后端放在服务器上就基本成功了 PS:完成第4点应该看到这样的效果,如果出现没有跳转到你的APP说明你的urlscheme没填写对或者是你的APP没有打包 在这里插入图片描述

//相关示例代码 该代码是一个页面(样式自行编写) 主要的是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


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3