市面上很多个人收款码都是需要二次扫码的，也就是先通过ua判断，再展示对应的二维码，再次长按。
本次我这个方案无需二次长按。
直接上代码
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>收款</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #f7f7f7;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"PingFang SC",
"Microsoft YaHei",
Arial,
sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: calc(100% - 40px);
max-width: 420px;
padding: 40px 25px;
background: #fff;
border-radius: 16px;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 0, 0, .06);
}
.icon {
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #f1f1f1;
font-size: 30px;
}
.title {
font-size: 20px;
font-weight: 600;
color: #222;
margin-bottom: 12px;
}
.desc {
font-size: 14px;
color: #999;
line-height: 1.7;
}
.loading {
width: 28px;
height: 28px;
margin: 22px auto 0;
border: 3px solid #eee;
border-top-color: #999;
border-radius: 50%;
animation: rotate .8s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
.button {
display: none;
margin-top: 22px;
width: 100%;
height: 46px;
border: 0;
border-radius: 8px;
background: #1677ff;
color: #fff;
font-size: 15px;
}
</style>
</head>
<body>
<div class="box">
<div class="icon" id="icon">💳</div>
<div class="title" id="title">
正在跳转收款页面
</div>
<div class="desc" id="desc">
请稍候...
</div>
<div class="loading" id="loading"></div>
<button class="button" id="button">
点击继续
</button>
</div>
<script>
(function () {
// ==============================
// 收款地址
// ==============================
const PAY_URL = {
wechat: "https://payapp.wechatpay.cn/sjt/qr/AQHcRjMZMLHpYnXkgZnw4jtU#",
alipay: "https://qr.alipay.com/2m618208kwnpfxzl24zfbfb"
};
// ==============================
// 获取 URL 参数
// ==============================
function getParam(name) {
const params = new URLSearchParams(window.location.search);
return params.get(name);
}
// ==============================
// 判断当前环境
// ==============================
function detectPayType() {
// 第一优先级：URL 参数
//
// ?type=wechat
// ?type=alipay
const type = (getParam("type") || "").toLowerCase();
if (type === "wechat" || type === "wx") {
return "wechat";
}
if (type === "alipay" || type === "ali" || type === "zfb") {
return "alipay";
}
// 第二优先级：UA 判断
const ua = navigator.userAgent.toLowerCase();
// 微信
if (
ua.indexOf("micromessenger") !== -1 ||
ua.indexOf("wechat") !== -1
) {
return "wechat";
}
// 支付宝
if (
ua.indexOf("alipayclient") !== -1 ||
ua.indexOf("aliapp") !== -1
) {
return "alipay";
}
// 无法判断
return null;
}
// ==============================
// 更新页面
// ==============================
function showPayType(type) {
const icon = document.getElementById("icon");
const title = document.getElementById("title");
const desc = document.getElementById("desc");
const loading = document.getElementById("loading");
const button = document.getElementById("button");
if (type === "wechat") {
icon.innerHTML = "💚";
title.innerHTML = "正在打开微信支付";
desc.innerHTML = "即将跳转到微信收款页面，请稍候...";
setTimeout(function () {
window.location.replace(PAY_URL.wechat);
}, 300);
return;
}
if (type === "alipay") {
icon.innerHTML = "💙";
title.innerHTML = "正在打开支付宝";
desc.innerHTML = "即将跳转到支付宝收款页面，请稍候...";
setTimeout(function () {
window.location.replace(PAY_URL.alipay);
}, 300);
return;
}
// ==============================
// 无法判断
// ==============================
icon.innerHTML = "💳";
title.innerHTML = "选择支付方式";
desc.innerHTML = "请选择您要使用的支付方式";
loading.style.display = "none";
button.style.display = "block";
button.innerHTML = "打开微信支付";
button.onclick = function () {
window.location.href = PAY_URL.wechat;
};
const aliButton = document.createElement("button");
aliButton.className = "button";
aliButton.style.display = "block";
aliButton.style.marginTop = "10px";
aliButton.innerHTML = "打开支付宝";
aliButton.onclick = function () {
window.location.href = PAY_URL.alipay;
};
button.parentNode.appendChild(aliButton);
}
// ==============================
// 开始检测
// ==============================
const payType = detectPayType();
showPayType(payType);
})();
</script>
</body>
</html>
代码其实没有技术含量，就是一个思路而已，本质上还是UA，但微信上有一个重点。
微信二维码不能用个人收款码，而是要申请微信官方的【经营码】，申请下来，用解码器解出URL
支付宝可以用个人收款码，解出URL
然后替换到源码中就可以了。
这样，一条链接就可以生成一个二维码，根据UA判断，自动跳转到对应的付款页面了。 | 
发表于 2026-8-28 11:01
