js中調(diào)用微信的掃描二維碼功能的實(shí)現(xiàn)代碼
關(guān)鍵代碼
<html> <head> <title> js調(diào)用微信掃一掃功能測試 </title> <!--引用微信JS庫--> <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <!--引用jQuery庫--> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> </head> <body> <input type="button" value="掃一掃" id="scanQRCode"> <script type="text/javascript"> //這里【url參數(shù)一定是去參的本網(wǎng)址】 $.get("獲取微信認(rèn)證參數(shù)的網(wǎng)址?url=當(dāng)前網(wǎng)頁的網(wǎng)址", function(data){ var jsondata=$.parseJSON(data); wx.config({ // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。 debug: false, // 必填,公眾號的唯一標(biāo)識 appId: jsondata.model.appId, // 必填,生成簽名的時間戳 timestamp: "" + jsondata.model.timestamp, // 必填,生成簽名的隨機(jī)串 nonceStr: jsondata.model.nonceStr, // 必填,簽名 signature: jsondata.model.signature, // 必填,需要使用的JS接口列表 jsApiList: ['checkJsApi', 'scanQRCode'] }); }); wx.error(function (res) { alert("出錯了:" + res.errMsg);//這個地方的好處就是wx.config配置錯誤,會彈出窗口哪里錯誤,然后根據(jù)微信文檔查詢即可。 }); wx.ready(function () { wx.checkJsApi({ jsApiList: ['scanQRCode'], success: function (res) { } }); //點(diǎn)擊按鈕掃描二維碼 document.querySelector('#scanQRCode').onclick = function () { wx.scanQRCode({ needResult: 1, // 默認(rèn)為0,掃描結(jié)果由微信處理,1則直接返回掃描結(jié)果, scanType: ["qrCode"], // 可以指定掃二維碼還是一維碼,默認(rèn)二者都有 success: function (res) { var result = res.resultStr; // 當(dāng)needResult 為 1 時,掃碼返回的結(jié)果 alert("掃描結(jié)果:"+result); window.location.href = result;//因?yàn)槲疫@邊是掃描后有個鏈接,然后跳轉(zhuǎn)到該頁面 } }); }; }); </script> </body> </html>
注意事項(xiàng):
“獲取微信認(rèn)證參數(shù)”
這個的前提是您能夠有自己的微信開發(fā)資質(zhì),并能獲取到正確的參數(shù)
- 公眾號的唯一標(biāo)識
- 簽名的時間戳
- 簽名隨機(jī)串
常見的錯誤
config:invalid signature
解決辦法
“當(dāng)前網(wǎng)頁的地址”-----哈哈,一定是你寫的不對,這里一定是去參的本網(wǎng)頁的地址
最好是在服務(wù)器下去測試
總結(jié)
到此這篇關(guān)于在js中調(diào)用微信的掃描二維碼功能的文章就介紹到這了,更多相關(guān)js 微信掃描二維碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript Math對象和調(diào)試程序的方法分析
這篇文章主要介紹了JavaScript Math對象和調(diào)試程序的方法,結(jié)合實(shí)例形式分析了javascript中Math對象生成隨機(jī)數(shù)以及使用alert()、console.log()函數(shù)進(jìn)行錯誤調(diào)試相關(guān)操作技巧,需要的朋友可以參考下2019-05-05require.js與bootstrap結(jié)合實(shí)現(xiàn)簡單的頁面登錄和頁面跳轉(zhuǎn)功能
這篇文章主要介紹了require.js與bootstrap結(jié)合實(shí)現(xiàn)簡單的頁面登錄和頁面跳轉(zhuǎn)功能,需要的朋友可以參考下2017-05-05使用watch在微信小程序中實(shí)現(xiàn)全局狀態(tài)共享
這篇文章主要給大家介紹了關(guān)于如何使用watch在小程序中實(shí)現(xiàn)全局狀態(tài)共享的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06手把手教你實(shí)現(xiàn)一個JavaScript時間軸組件
本文主要是給大家?guī)硪粋€時間軸的組件開發(fā)教程,其主要功能就是可以拖動時間軸來定位當(dāng)前時間,可以通過鼠標(biāo)滾輪來修改當(dāng)前時間分辨率,需要的可以參考一下2022-10-10