zoukankan      html  css  js  c++  java
  • 微信公众号调用扫一扫

    现在我们有个需求,识别二位码,并将扫码结果保存,传递到另外的网页。下面是方法。

    另外注意!这是微信公众号调用。需要微信配置信息。需要引入前置JS。http协议网站引入“http://res.wx.qq.com/open/js/jweixin-1.0.0.js”,https协议网站引入“https://res.wx.qq.com/open/js/jweixin-1.0.0.js”.

    有错误跟我说一声。

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <title>调用扫一扫</title>
    </head>
    <body>
        <div>点我调用扫一扫</div>
    </body>
    <script src='https://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
    <script>
        var div=document.querySelector('div');
        var data;//接受配置信息,后台给的
        var getWxConfig=function(){
            var xhr=null;
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            } else if(window.ActiveXObject){
                xhr=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xhr.open('post','getWxConfig.php');
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    data=(xhr.responseText);
                }
            };
            xhr.send(openID); 
        }
        getWxConfig();
        div.onclick=function(){
            wx.config({
                debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId : data.appId, // 必填,公众号的唯一标识
                timestamp : data.timestamp, // 必填,生成签名的时间戳
                nonceStr : data.noncestr, // 必填,生成签名的随机串
                signature : data.signature,// 必填,签名,见附录1
                jsApiList : ['checkJsApi', 'scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
            wx.ready(function() {
                wx.scanQRCode({   
                    needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
                    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
                    success: function (res) {
                    var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                        console.log(res);
                        alert(res);
                        var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
                        sessionStorage.setItem('saomiao_result',result);
                        //其它网页调用二维码扫描结果: 
                        //var result=sessionStorage.getItem('saomiao_result');
                    }
                });
            });
        }
        
    </script>
    </html>
  • 相关阅读:
    【译】可扩展前端2  —  常见模式
    【译】可扩展前端1  —  架构基础
    【译】The Clean Architecture
    获取页面元素位置
    vue高价组件的使用
    gif动态图片转精灵图
    消除 transition 闪屏
    移动端 -- 如何去掉元素被触摸时产生的半透明灰色遮罩?
    解决手机移动端触屏版web页面长时间按住页面出现闪退的问题
    移动端滑动慢,卡顿
  • 原文地址:https://www.cnblogs.com/liaozhenting/p/6848364.html
Copyright © 2011-2022 走看看