JQ—h5页面上实现微信扫一扫功能
1.引用jq和微信配置相关文件
<script src="../js/jquery.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2.在js中,请求后台的接口
$(document).ready(function () {
getCode()//调用接口
})
function getCode(){//获取二维码
let url = document.location.href;
$.ajax({
url:urlLink+'c=sjd&a=index&do=wxconfig',
method:'post',
dataType: "json",
data:{
url:url
},
success:function(res){
var jsondata= res.data;
console.log('微信信息--',jsondata)
wx.config({
// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
debug: false,
// 必填,公众号的唯一标识
appId: jsondata.appId,
// 必填,生成签名的时间戳"" +
timestamp: jsondata.timestamp,
// 必填,生成签名的随机串
nonceStr: jsondata.nonceStr,
// 必填,签名
signature: jsondata.signature,
// 必填,需要使用的JS接口列表
jsApiList: ['scanQRCode']
});
}
})
}
//在一个循环中的调用
// 获取微信扫一扫
$('.bao_qrcode1').each(function(){
$(this).click(function(){
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['scanQRCode'],
success: function (res) {}
})
// wx.error(function(res) {
// alert("出错了:" + res.errMsg);//提示wx.config配置错误。
// });
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
// alert("扫描结果:"+result);
window.location.href = result;//因为我这边是扫描后有个链接,然后跳转到该页面
}
});
});
});
})