微信QQ支付宝三合一收款二维码实现原理

美奇开发工作室

已于 2023-08-09 17:05:41 修改

阅读量10w+

点赞数 2

分类专栏： # HTML 文章标签：微信前端

于 2020-03-29 17:21:47 首次发布

本文链接：https://blog.csdn.net/qq15577969/article/details/105181958

版权

HTML 专栏收录该内容

14 篇文章

订阅专栏

收款码三合一大致原理如下：

第一步、解析用户上传的微信支付、QQ钱包、支付宝收款二维码，获取收款链接地址。

第二步、用自己的网站程序生成一张二维码的图片，二维码链接大概如下：

http://接口域名/qr/KpZPaiLR.html

这个链接的意思就是传一个加密字符串（唯一的键）到后端控制器，然后就开始判断扫描二维码的用户是微信访问，还是QQ，或者支付宝，根据用户访问性质的不同，跳转到相应的收款链接上。也就是说，你是微信扫的，我就跳转到微信的页面！

生成二维码的页面代码：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>微信QQ支付宝三合一收款码合成</title>
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: Microsoft yahei;
			}
			
			body {
				background-color: #fff;
			}
			
			.code-item {
				width: 100%;
				max-width: 400px;
				margin: 0 auto;
				padding-bottom: 1px;
				display: none;
				background-color: #5c92ef;
			}
			
			.code-title {
				height: 100px;
				background-color: #f2f2f2;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 50%;
			}
			
			.code-area {
				text-align: center;
			}
			
			.code-area>img {
				margin: 80px 0;
				width: 60%;
				min-width: 100px;
			}
			
			.code-footer {
				height: 80px;
				text-align: center;
				background-color: #fff;
				color: #666;
				line-height: 80px;
				font-size: 20px;
				margin: -2px 2px 2px 2px;
			}
			
			.code-title {
				background-image: url("https://z3.ax1x.com/2021/07/02/R6wMUs.png");
			}
			
			#code-qq {
				background-color: #54b4ef;
			}
			
			#code-wechat {
				background-color: #54bc6e;
			}
		</style>
		<script>
			var setting = {
				// 在以下双引号中粘贴【QQ钱包】收款链接
				qqUrl: "https://i.qianbao.qq.com/wallet/sqrcode.htm?m=tenpay&a=1&u=15577969&ac=CAEQ8ea2Bxjy_7f5BQ%3D%3D_xxx_sign&n=AHer.&f=wallet",

				// 在以下双引号中粘贴【微信】收款链接
				wechatUrl: "wxp://f2f0-UmkL9Q03rD7k4_WpACEuNpw9hwG4jWs",

				// 在以下双引号中粘贴【支付宝】收款链接
				aliUrl: "https://qr.alipay.com/fkx1184170x01edfokwqd3e",

				// 用于动态生成二维码的API，如果api链接失效，请自行更换
				qrcodeApi: "https://api.pwmqr.com/qrcode/create/?url="
				/*
				备用二维码api：
				https://api.pwmqr.com/qrcode/create/?url=
				https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=
				https://my.tv.sohu.com/user/a/wvideo/getQRCode.do?text=
				*/
			}
		</script>
	</head>

	<body>
		<!-- 万能收款码展示区域 -->
		<div class="code-item" id="code-all">
			<div class="code-title"></div>
			<div class="code-area">
				<img id="page-url" src="" title="三合一收款码">
			</div>
			<div class="code-footer">扫描以上二维码向我付款</div>
		</div>

		<!-- QQ钱包二维码展示区域 -->
		<div class="code-item" id="code-qq">
			<div class="code-title"></div>
			<div class="code-area">
				<img id="qq-url" src="" title="QQ钱包二维码">
			</div>
			<div class="code-footer">长按以上二维码向我付款</div>
		</div>

		<!-- 微信二维码展示区域 -->
		<div class="code-item" id="code-wechat">
			<div class="code-title"></div>
			<div class="code-area">
				<img id="wechat-url" src="" title="微信支付二维码">
			</div>
			<div class="code-footer">长按以上二维码向我付款</div>
		</div>

		<script>
			if(navigator.userAgent.match(/Alipay/i)) {
				// 支付宝
				window.location.href = setting.aliUrl;
			} else if(navigator.userAgent.match(/MicroMessenger\//i)) {
				// 微信
				console.log(setting.qrcodeApi + urlEncode(setting.wechatUrl));
				document.getElementById("wechat-url").src = setting.qrcodeApi + urlEncode(setting.wechatUrl);
				document.getElementById("code-wechat").style.display = "block";
			} else if(navigator.userAgent.match(/QQ\//i)) {
				// QQ
				document.getElementById("qq-url").src = setting.qrcodeApi + urlEncode(setting.qqUrl);
				document.getElementById("code-qq").style.display = "block";
			} else {
				// 其它，显示“万能码”
				document.getElementById("page-url").src = setting.qrcodeApi + urlEncode(window.location.href);
				document.getElementById("code-all").style.display = "block";
			}

			/*****************************************
			 * url编码函数
			 * 输入参数：待编码的字符串
			 * 输出参数：编码好的
			 ****************************************/
			function urlEncode(String) {
				return encodeURIComponent(String).replace(/'/g, "%27").replace(/"/g, "%22");
			}
		</script>

	</body>

</html>