微信扫一扫，扫条形码，扫二维码，防抖

最新推荐文章于 2024-09-18 16:24:30 发布
月光小提琴
最新推荐文章于 2024-09-18 16:24:30 发布
阅读量609
点赞数 1
文章标签：微信 html css
本文链接：https://blog.csdn.net/qiaojun148/article/details/122361771
版权
<!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>	
	<script src="../script/thirdlib/jquery-1.8.2.min.js"></script>
	<link rel="icon" href="../style/image/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="../style/bootstrap/bootstrap.css" />
	<link rel="stylesheet" href="../style/css/board.css" />
	<script type="text/javascript" src="../script/main/stcommon.js"></script>	 
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.9.0/vconsole.min.js"></script>
	<style>
		.table-tx-right{
			text-align: center!important;
		}
        .btnScan{
            padding: 10px!important;
            color: white;
            border-radius: 5px;
            background-color: #337AB7;
            border-width: 0;
        }
        .btnConfig{
            position:absolute;
            left:10px;
            bottom: 10px;
            width: 24px;
            height: 24px;
            
        }
	</style>
  </head>
  <body>
	<div class="app-master"> 
		<div class="row" style="height: 40vh;padding: 10px!important;">
            <div style="border:solid 1px #708090;padding: 5px!important;">
                <span>扫描结果：</span>
                <span id="divResult"></span>
            </div>			 
		</div>
        <div class="row" style="height: 40vh;flex-flow: row wrap;padding: 10px!important;" id="divMessage">
            &nbsp;
       </div>
        <div class="row" style="height: auto;padding: 10px!important;">
            <button class="btnScan" id="btnScanQRCode">扫一扫</button>
       </div>
       <img src="../style/image/config.png" class="btnConfig" id="btnConfig" />
	</div>

    <script  type="text/javascript">
        var vConsole = new VConsole();
        var SCAN_DATA = null;
        function LoadScanConfig(){
            ajaxUtilNone(
            {
                url:  reqUrl + "WeixinMiniOauth/GetQRCodeSignPackage",
                method:'GET'     
            }, function(res)
            {
                console.log('ReceiveData'); 
                console.log(res);     
                SCAN_DATA = res;      
                if(res){
                    var html = '';
                    for(var key of Object.keys(res)){
                        html += key+' = '+res[key]+' ; <br>'                        
                    }
                    $('#divMessage').html(html);
                }
            })
        }
        LoadScanConfig();    
        var StartDateTime = new Date().getTime();
       
        $(function(){
            $('#btnScanQRCode').click(function(){
                if(new Date().getTime() - StartDateTime < 5000){
                    return $('#divMessage').html("操作过于频繁" );
                }                
                if(!SCAN_DATA){
                    return $('#divMessage').html("出错了：扫一扫参数未配置" );
                }
                StartDateTime = new Date().getTime();
                //由后台输出过来参数
                //1、获取token 2、获取GetWeiXinJsapi_Ticket 3、必须绑定https的url
                wx.config({
                    //由vConsole来输出测试信息
                    debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId:SCAN_DATA.appId,// 必填，公众号的唯一标识
                    timestamp:SCAN_DATA.timestamp,// 必填，生成签名的时间戳
                    nonceStr:SCAN_DATA.nonceStr,// 必填，生成签名的随机串
                    signature:SCAN_DATA.signature,// 必填，签名，见附录1
                    jsApiList : [ 'checkJsApi', 'scanQRCode' ]
                });//end_config
                console.log(wx); 
                wx.error(function(res) {
                    $('#divMessage').html("出错了：" + res.errMsg);
                    console.log('error:'+res);
                });
                wx.checkJsApi({
                    jsApiList : ['scanQRCode'],
                    success : function(res) {
                        console.log('success:'+res);
                    }
                });                
                wx.scanQRCode({
                    needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
                    success : function(res) {
                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        document.getElementById("divResult").innerHTML = result;//将扫描的结果赋予到jsp对应值上
                        $('#divMessage').html("扫描成功::扫描码=" + result);
                        console.log("扫描成功::扫描码=" + result);
                        SCAN_DATA = null;
                        LoadScanConfig();
                    },error:function(res){
                        console.log("扫描::error=" + result);
                    }
                });
            });
            $('#btnConfig').click(function(){
                $('#divMessage').html("重新加载扫一扫参数" );
                LoadScanConfig();
            });
        });
    </script>
  </body>
</html>