公众号实现扫一扫_mui 公众号调用微信扫码-优快云博客

本文链接：https://blog.youkuaiyun.com/brake_lzk/article/details/81018363
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../assets/mui/css/mui.min.css">
      <script src="../assets/zepto/zepto.min.js"></script>
      <script src="../assets/mui/js/mui.min.js"></script>
    <script src="../assets/artTemplate/template-native.js"></script>
     <!-- 上边引用根据自己情况引用 -->
     <!-- 微信公众号接口的js -->
      <script src=" http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

</head>
<body>
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">标题</h1>
    </header>
    <div class="mui-content">
         <!-- 内容区 -->
        <div  id="scanQRCode" type="button">扫一扫</div>

    </div>
</body>
<script>
    $(function(){
            var urld = window.location.href.split('#')[0];//获取当前页面地址
            console.log(urld)



            var data=null;
            $.ajax({//获取公众号的唯一标识、生成签名的时间戳、生成签名的随机串
                    type:"post",
                    url:"/wx/jsapiTicket",//自己填写请求地址
                    contentType:'text/plain',
                    data:urld,
                    async:false,
                    success:function(result){
                            console.log('后台返回数据:',result);
                            data=result.data
                    }
            })

            console.log(data)
                   wx.config({//调用公众号接口
                        // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，
        //可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        debug: false,
                        // 必填，公众号的唯一标识
                        appId: data.appId,
                        // 必填，生成签名的时间戳
                        timestamp:data.timestamp,
                        // 必填，生成签名的随机串
                        nonceStr:data.noncestr,
                        // 必填，签名，见附录1
                        signature:data.signature,
                        // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        jsApiList : [ 'checkJsApi', 'scanQRCode' ]
                    });


            wx.error(function(res) {
                alert("出错了：" + res.errMsg);
                //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，
                // 然后根据微信文档查询即可。
            });
        

        wx.ready(function() {
                wx.checkJsApi({
                         jsApiList : ['scanQRCode'],//调用扫一扫
                         success : function(res) {
                         }
                });
    
            //点击按钮扫描二维码
            document.querySelector('#scanQRCode').onclick = function() {

                    wx.scanQRCode({
                            needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            // 可以指定扫二维码还是一维码，默认二者都有    
            scanType : [ "qrCode","barCode"], 
    
                            success : function(res) {
                                    console.log('扫码返回结果',res)
                                var keyword = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                                //因为我这边是扫描后有个链接，然后跳转到该页面
                window.location.href = "/view/scanCode?keyword="+keyword;

                            }
                    });
            };

        });


    })
</script>

</html>