微信h5扫码接口范例：扫码后内容显示到输入框

原创已于 2024-03-31 18:37:17 修改 · 744 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #java #javascript #微信h5扫码

于 2023-09-08 20:43:56 首次发布

扫码接口使用专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在HTML文件中实现微信H5的扫码功能，用户扫描二维码或条形码后，内容会自动填充到网页的输入框中，主要涉及JavaScript和GET查询参数的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

免责声明：
本文中代码和资料主要用于教学和技术研究，任何直接或间接因使用我方的任何内容所导致的任何损失或损害与我方无关，若使用者无法对使用我方内容后的任何后果负责，请不要使用本文中的任何内容。若本文中的任何内容侵犯了您的法律权益请联系作者，作者会第一时间处理侵权内容。

测试方法： 将以下代码保存到htm文件放到服务器上。然后将这个html文件的URL发给微信上任意好友后点开访问。

测试效果： 测试效果为：点击页面上的扫码按钮，对准任意二维码或者条形码扫描后，内容会出现在网页的输入框里。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>微信h5扫码接口范例：扫码后内容显示到输入框</title>
</head>
 
<body>
<input type="text" id="erweima">
<a href="javascript:window.open('//996315.com/api/scan/?redirect_uri=' + encodeURIComponent(location.href), '_self');">Scan</a>

<script type="text/javascript">
var qr=GetQueryString("qrresult");
if(qr){
    document.all.erweima.value=qr;
}
 
function GetQueryString(name){
    var reg = new RegExp("\\b"+ name +"=([^&]*)");
    var r = location.href.match(reg);
    if (r!=null) return decodeURIComponent(r[1]);
}

</script>
</html>