微信公眾號開發呼叫掃碼功能
阿新 • • 發佈：2018-10-31
背景：需要在公眾號裡面切入掃碼功能
前端程式碼：
<!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