美文网首页
网页调用微信Jssdk实现扫一扫功能

网页调用微信Jssdk实现扫一扫功能

作者: 多走走多看看 | 来源:发表于2018-08-03 20:19 被阅读0次

    1.微信公众号配置

    第一步,JS接口安全域设置

    image

    第二步,配置ip白名单。

        换服务器的时候被坑了。。。一直报config:invalid signature,之前都是弄好的。后面忘了。
    
    1533296873(1).jpg

    2. 导入相关JS

    在需要调用JS接口的页面引入如下JS文件,(支持https):[http://res.wx.qq.com/open/js/jweixin-1.2.0.js](http://res.wx.qq.com/open/js/jweixin-1.2.0.js)
    

    3.通过config接口注入权限验证配置

    var _data = {
    
      tokenUrl:location.href,
    
      t:Math.random()
    
    };
    
    var _getWechatSignUrl = HTTP_AUTH_HOST_SERVER+'czj/wx/XSign';
    
    // 获取微信签名
    
    $.ajax({
    
      url:_getWechatSignUrl,
    
      data:_data,
    
      dataType:"jsonp",
    
      success:function (o) {
    
            //alert('获取数据:timestamp:'+o.value.timestamp+'nonceStr:'+o.value.nonceStr+'signature:'+o.value.signature);
    
         console.log("获取微信签名:"+o);
    
      if (o.result ==true) {
    
        wxConfig(o.value.timestamp, o.value.nonceStr, o.value.signature,o.value.appId);
    
        console.log("appid:"+o.value.appId)
    
    }
    
    },err:function (err) {
    
          alert("----"+err);
    
    }
    
    });
    
    function wxConfig(_timestamp, _nonceStr, _signature,_appId) {
    
         //alert('获取数据:'+_timestamp+'\n'+_nonceStr+'\n'+_signature);
    
        console.log('获取数据:' + _timestamp +'\n' + _nonceStr +'\n' + _signature);
    
      wx.config({
    
      debug:false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    
            appId: _appId,// 必填,公众号的唯一标识
    
            timestamp: _timestamp,// 必填,生成签名的时间戳
    
            nonceStr: _nonceStr,// 必填,生成签名的随机串
    
            signature: _signature,// 必填,签名,见附录1
    
            jsApiList: ['checkJsApi','scanQRCode']
    
    // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
    
        });
    
    }     
    

    4.调起扫一扫接口

    function scanCode(callback) {
    
      wx.scanQRCode({
    
      needResult:1,
    
      scanType: ["qrCode","barCode"],
    
      success:function (res) {
    
            console.log(res)
    
      //alert(JSON.stringify(res));
    
            var result = res.resultStr;
    
            setTimeout(callback(result),500);
    
       },
    
      error:function(res){
    
            alert(JSON.stringify(res))
    
            if(res.errMsg.indexOf('function_not_exist') >0){
    
            alert('版本过低请升级')
    
          }
    
        }
    
      });
    
    }
    

    相关文章

      网友评论

          本文标题:网页调用微信Jssdk实现扫一扫功能

          本文链接:https://www.haomeiwen.com/subject/usmuvftx.html