背景:需要在公众号里面切入扫码功能
前端代码:
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>
<style>
style>
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');
div.onclick=function(){
getWxConfig();
}
function getWxConfig(){
$.ajax({
"type" : "POST",
"url" :"http://wx-proxy-feima.feima666.com/rest/auth/sign",
"data" : {
"url" : location.href.split('#')[0]
},
"dataType" : "json",
"success" : function(result) {
console.log('result',result)
var timestamp = result.timestamp;;
var noncestr = result.nonceStr;
var signature = result.signature;
var appId=result.appId;
wx.config({
debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
// debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId : appId, // 必填,公众号的唯一标识
timestamp : timestamp, // 必填,生成签名的时间戳
nonceStr : noncestr, // 必填,生成签名的随机串
signature :signature,// 必填,签名,见附录1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'hideMenuItems',
'showMenuItems',
'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem',
'translateVoice',
'startRecord',
'stopRecord',
'onRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'uploadVoice',
'downloadVoice',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getNetworkType',
'openLocation',
'getLocation',
'hideOptionMenu',
'showOptionMenu',
'closeWindow',//关闭窗口
'scanQRCode',
'chooseWXPay',
'openProductSpecificView',
'addCard',
'chooseCard',
'openCard'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function() {
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
console.log('res=========>',res);
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
alert(result)
sessionStorage.setItem('saomiao_result',result);
//其它网页调用二维码扫描结果:
//var result=sessionStorage.getItem('saomiao_result');
}
});
});
}
});
}
script>
<script src="js/jquery-1.11.3.js">script>
<script src="js/jquery.form.js" type="text/javascript">script>
html>
在运行中存在的问题:
1.config:invalid url domain
这个需要在微信的公众号后台把你要访问的url权限加上
解决网址:https://blog.csdn.net/u010575112/article/details/52661936
2.config:invalid siginature
签名失败这个需要后端配合前端可以用个网址去测试后端给的签名
网址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
有什么问题可以咨询Q:1246259028