建站
咨詢
售后
建站咨詢
新聞中心
在微信公眾號(hào)頁面中調(diào)用微信掃一掃功能，就是調(diào)用微信JS-SDK。讓JS-SDK完成調(diào)用攝像頭掃描，然后我們將掃描結(jié)果進(jìn)行業(yè)務(wù)操作。微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁開發(fā)者提供的基于微信內(nèi)的網(wǎng)頁開發(fā)工具包。通過使用微信JS-SDK，網(wǎng)頁開發(fā)者可借助微信高效地使用拍照、選圖、語音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優(yōu)質(zhì)的網(wǎng)頁體驗(yàn)。如何調(diào)用微信JS-SDK，在微信公眾平臺(tái)技術(shù)文檔中的微信網(wǎng)頁開發(fā)——》微信JS-SDK說明文檔中有詳細(xì)說明。調(diào)用微信JS-SDK需要五個(gè)步驟。
創(chuàng)新互聯(lián)公司專業(yè)為企業(yè)提供柘城網(wǎng)站建設(shè)、柘城做網(wǎng)站、柘城網(wǎng)站設(shè)計(jì)、柘城網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、柘城企業(yè)網(wǎng)站模板建站服務(wù)，十年柘城做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。
步驟一：綁定域名
步驟二：引入JS文件
步驟三：通過config接口注入權(quán)限驗(yàn)證配置
步驟四：通過ready接口處理成功驗(yàn)證
步驟五：通過error接口處理失敗驗(yàn)證
1、綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發(fā)者中心”查看對應(yīng)的接口權(quán)限。
點(diǎn)擊提交后，會(huì)彈出配置成功的提示。這里特別提醒注意：填寫域名時(shí)，不要帶http:// 。 只要你帶了，步驟三的權(quán)限驗(yàn)證肯定報(bào)錯(cuò)。會(huì)報(bào)URL配置的錯(cuò)誤。
2、引入JS文件
在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載
3、通過config接口注入權(quán)限驗(yàn)證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次，對于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實(shí)現(xiàn)web app的頁面會(huì)導(dǎo)致簽名失敗，此問題會(huì)在Android6.2中修復(fù)）。
wx.config({
debug: true, //
開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: , // 必填，生成簽名的時(shí)間戳
nonceStr:
'', // 必填，生成簽名的隨機(jī)串
signature: '',// 必填，簽名
jsApiList: [] //
必填，需要使用的JS接口列表
});
這個(gè)配置信息可以寫在一個(gè)ajax內(nèi)，在進(jìn)入頁面時(shí)首先執(zhí)行，在后臺(tái)將對應(yīng)的信息全部獲取，再返回給前端。
前端頁面代碼：
$.ajax({
type:"post",
url:"這里寫你自己的請求地址”,
data:{},
success:function(data){
var result = $.parseJSON(data);
wx.config({
debug: true,
appId:
result.appId, //公眾號(hào)的唯一標(biāo)識(shí)
timestamp:
""+result.timestamp, //生成簽名的時(shí)間戳
nonceStr:result.noncestr, //生成簽名的隨機(jī)串
signature:result.signature, //簽名
jsApiList : [
'scanQRCode' ] //需要使用的JS接口列表(我只需要調(diào)用掃一掃的接口，如有多個(gè)接口用逗號(hào)分隔)
});
}
});
后端代碼就是生成簽名。如何生成簽名，微信公眾號(hào)已經(jīng)給出了官方例子。照著官方例子打一遍代碼就行了。下載地址：http://demo.open.weixin.qq.com/jssdk/sample.zip。
這里特別強(qiáng)調(diào)的事情：生成簽名的url一定是你調(diào)用JSSDK的頁面url，不能是以前的URL。因?yàn)槲液蠖耸怯胹pringmvc實(shí)現(xiàn)的，寫的時(shí)候沒有重定向。雖然頁面到了調(diào)用頁面但URL還是原來的，所以總是報(bào)簽名錯(cuò)誤。測了很多次，才改過來。
4、通過ready接口處理成功驗(yàn)證
wx.ready(function(){
// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，
//config是一個(gè)客戶端的異步操作，所以如果需要在頁面加載時(shí)就調(diào)用相關(guān)接口， // 則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行。對于用戶觸發(fā)時(shí)才調(diào)用的接口，
//則可以直接調(diào)用，不需要放在ready函數(shù)中。
});
因?yàn)槲沂羌虞d頁面就調(diào)用微信掃一掃，所以將相關(guān)接口就放在了ready函數(shù)中。
wx.ready(function() {
document.querySelector('#scan').onclick =
function() {
wx.scanQRCode({
needResult: 1,
// 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
scanType: ["qrCode","barCode"],
// 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
success: function(res) {
//res.resultStr可以獲得掃描結(jié)果。這里寫自己的業(yè)務(wù)操作代碼}
});
}
});
5、通過error接口處理失敗驗(yàn)證
wx.error(function(res){
// config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，
//具體錯(cuò)誤信息可以打開config的debug模式查看， //也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});wx.error(function(res) {
alert("出錯(cuò)了：" +
res.errMsg);//這個(gè)地方的好處就是wx.config配置錯(cuò)誤，會(huì)彈出窗口哪里錯(cuò)誤，然后根據(jù)微信文檔查詢即可。
});
終于大功告成。最后附上微信公眾號(hào)關(guān)于JSSDK調(diào)用的示例DEMO。
DEMO頁面：http://demo.open.weixin.qq.com/jssdk
網(wǎng)站題目：微信公眾號(hào)開發(fā)紀(jì)要(4)-調(diào)用微信掃一掃功能
網(wǎng)頁URL：http://fisionsoft.com.cn/article/ihjojg.html
