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

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('版本过低请升级')

      }

    }

  });

}