APP支付宝授权获取code uniapp

news2025/1/11 15:09:42

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的启动

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2051458.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WorkPlus-为用户提供IM即时通讯和实时音视频通信本地化服务

WorkPlus作为一家领先的企业级通讯解决方案提供商&#xff0c;为用户提供了本地化服务&#xff0c;以满足IM即时通讯和实时音视频通信的需求。本文将深入探讨WorkPlus本地化服务的重要性以及其为用户提供的IM即时通讯和实时音视频通信的解决方案。 一、本地化服务的意义 低延迟…

【动态规划、dp】[CSP-J 2022] 上升点列 题解

题目描述 在一个二维平面内&#xff0c;给定 n n n 个整数点 ( x i , y i ) (x_i, y_i) (xi​,yi​)&#xff0c;此外你还可以自由添加 k k k 个整数点。 你在自由添加 k k k 个点后&#xff0c;还需要从 n k n k nk 个点中选出若干个整数点并组成一个序列&#xff0c…

从0开始搭建vue + flask 旅游景点数据分析系统(十三)vue + flask 图片上传、用户头像更改

项目是基于我的博文&#xff1a;vue flask 旅游景点数据分析系统 基础上做的&#xff0c;可以参考之前的博客文章。 1 前端修改 主要是修改Profile.vue <!-- 头像上传 --><el-form-item label"头像"><el-uploadclass""action"/api/…

使用 Fyne 构建 GUI 应用:设置标签文本和自增计数器

引言 Fyne 是一个用 Go 语言编写的跨平台 GUI 框架&#xff0c;它提供了一套丰富的组件来帮助开发者快速构建出漂亮的用户界面。在本文中&#xff0c;我们将通过一个简单的案例来演示如何使用 Fyne 创建 GUI 应用程序&#xff0c;该程序包含设置标签文本和自增计数器的功能。 …

按钮(Buttons)-Qt-思维导图-学习笔记

按钮(Buttons) 按钮在 Qt 中的重要性 按钮是 Qt 中最常用的控件之一 通过点击按钮&#xff0c;可以响应事件&#xff0c;实现人机交互效果 按钮在嵌入式系统和 PC 端的界面交互中都是不可或缺的 Qt 内置的六种按钮部件 QPushButton&#xff1a;下压按钮 用法示例 项目创建与…

指针详解(三)

目录 1. 数组名 2. 使用指针访问数组 3. 一维数组传参的本质 4. 冒泡排序 5. 二级指针 6. 指针数组 7. 指针数组模拟二维数组 1. 数组名 在使用指针访问数组的内容时&#xff0c;有这样的代码&#xff1a; int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0];/…

CV党福音:YOLOv8实现实例分割(二)之训练过程

在上一篇博客中&#xff0c;我们已经了解了YOLOv8实例分割的基本流程&#xff0c;本章则是对数据集、以及训练过程等进行进一步的学习。 文章目录 训练整体流程语义分割与实例分割数据集开启训练训练Debug数据封装损失函数初始化前向传播 总结 训练整体流程 训练模型的整体流…

洗衣机洗衣服一些知识

01智能:按衣物多少自动调节合适水位的标准洗涤程序 (需要30分钟时间) 02:大物:较大,较厚的衣服洗涤 03:轻柔:毛织品或内衣洗涤 04:快速:少量清污衣服洗涤 (13分钟) 05:浸泡:先浸泡一段时间再洗涤 06:单洗:只洗衣不脱水 07:单脱:只脱水不洗衣 08:洁桶:清洁洗衣桶 准备工作: (1)…

XSS反射型和DOM型+DOM破坏

目录 第一关 源码分析 payload 第二关 源码分析 payload 第三关 源码分析 payload 第四关 源码分析 payload 第五关 源码分析 payload 第六关 源码分析 第七关 源码分析 方法一&#xff1a;构造函数 方法二&#xff1a;parseInt 方法三&#xff1a;locat…

龙门吊(天车)防撞方案

防撞雷达设备&#xff0c;是一款基于无线微波技术自主研发的应答式高精度无线防撞产品&#xff0c;该产品具有测距精度高&#xff08;最高可到10厘米&#xff09;&#xff0c;测距稳定&#xff0c;无累计误差&#xff0c;粉尘、水汽不影响测距精度&#xff0c;抗电磁干扰等特点…

oracle数据库目录及文件

oracle数据库目录及文件 oracle安装后所有根目录 1、admin 目录 里边有不同文件夹&#xff0c;代表一个实例&#xff0c;记录 Oracle 实例的配置&#xff0c;运行日志等文件。每个实例一个目录。 SID&#xff1a;System IDentifier 的缩写&#xff0c;是 Oracle 实例的唯一标记…

IT服务标准化知识体系攻略(至简)

标准是为了在一定范围内获得最佳秩序 &#xff0c;经协商一致制定并由公开机构批准共同使用和重复使用的和中规范性文件。标准是标准化活动的主要成果之一。国家标准的制定有一套正常程序&#xff0c;分为预阶段、立项阶段、起草阶段、征求意见阶段、审查阶段、批准阶段、出版阶…

【区块链+金融服务】第一创业证券开发银行间报价 Dapp | FISCO BCOS应用案例

在银行间市场现券交易的过程中&#xff0c;通过银保监会发牌的代理机构进行报价交易&#xff0c;已解决无代理阶段存在的许多问题。 但是由于业务需要&#xff0c;使用以前模式进行报价交易的仍占有一定比例。 针对这一现状&#xff0c;第一创业证券基于 FISCO BCOS 区块链底层…

工作 sql 数据库创建 表的修改 插入数据

一. 创建数据库 创建数据库 CREATE DATABASE (IF NOT EXISTS) 数据库名称;使用数据库 USE 数据库名称;查看当前数据库中存在的表 SHOW TABLES;删除数据库 DROP DATABASE demolibang 二. 创建表 格式&#xff1a; CREATE TABLE IF NOT EXISTS 表名&#xff08; 字段名 字…

Unity动画模块 之 3D模型导入基础设置 Materials

本文仅作笔记学习和分享&#xff0c;不用做任何商业用途 本文包括但不限于unity官方手册&#xff0c;unity唐老狮等教程知识&#xff0c;如有不足还请斧正 还是那句话&#xff0c;用到的时候再看看&#xff0c;死记硬背不是正经的学习方法&#xff0c;但是又不得不知道一下&…

javaweb_10:XML映射文件

一、规范 1、XML映射文件的名称与Mapper接口名称一致&#xff0c;并且将XML映射文件和Mapper接口放在相同的包下&#xff08;同包同名&#xff09;。 2、XML映射文件的namesapce属性为Mapper接口全限定名一致。 3、 XML映射文件中sql语句的id与Mapper接口中的方法名一致&a…

培训第二十七天(lvs_nat模式与lvs_dr模式配置)

上午 核心&#xff1a;内核中的ipvs&#xff0c;ipvsadm1、安装ipvsadm[rootnat ~]# yum -y install ipvsadm2、配置规则查看所有的规则&#xff0c;如果已经配置好规则&#xff0c;重启之后也就没有了[rootnat ~]# ipvsadm -L -n 1、配置vip网卡 &#xff08;1&#xff09;在…

数组前缀和算法技巧

一、什么是数组前缀和 数组中前缀和技巧&#xff08;Prefix Sum Technique&#xff09;是一种常见且有用的算法技巧&#xff0c;特别适用于需要频繁查询数组区间和的问题。这种技巧通过创建一个额外的数组来存储原始数组中特定位置之前所有元素的和&#xff0c;从而在需要计算…

【图论】并查集(Union-find Sets)

文章目录 前言一、并查集(Union-find Sets)基本概念基本操作步骤 二、并查集的操作步骤1. 初始化 init2. 查询 find、合并 union&#xff08;未进行路径压缩&#xff09;3. 查询 find、合并 union&#xff08;路径压缩&#xff09; 三、Kruskal 算法中 环 的判断并查集的使用 总…

C++中的string介绍(常用函数)

string类 为什么学习string类C语言中的字符串 标准库中的string类string类(了解)auto和范围forauto关键字范围for string类的常用接口说明(注意下面只讲解最常用的接口)string类对象的常见构造 string类对象的容量操作string类对象的访问及遍历操作string类对象的修改操作strin…