微信公眾號(hào)開(kāi)發(fā)紀(jì)要(4)-調(diào)用微信掃一掃功能

在微信公眾號(hào)頁(yè)面中調(diào)用微信掃一掃功能，就是調(diào)用微信JS-SDK。讓JS-SDK完成調(diào)用攝像頭掃描，然后我們將掃描結(jié)果進(jìn)行業(yè)務(wù)操作。微信JS-SDK是微信公眾平臺(tái)面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包。通過(guò)使用微信JS-SDK，網(wǎng)頁(yè)開(kāi)發(fā)者可借助微信高效地使用拍照、選圖、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力，同時(shí)可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶(hù)提供更優(yōu)質(zhì)的網(wǎng)頁(yè)體驗(yàn)。如何調(diào)用微信JS-SDK，在微信公眾平臺(tái)技術(shù)文檔中的微信網(wǎng)頁(yè)開(kāi)發(fā)——》微信JS-SDK說(shuō)明文檔中有詳細(xì)說(shuō)明。調(diào)用微信JS-SDK需要五個(gè)步驟。

創(chuàng)新互聯(lián)公司專(zhuān)業(yè)為企業(yè)提供柘城網(wǎng)站建設(shè)、柘城做網(wǎng)站、柘城網(wǎng)站設(shè)計(jì)、柘城網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、柘城企業(yè)網(wǎng)站模板建站服務(wù)，十年柘城做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

步驟一：綁定域名

步驟二：引入JS文件

步驟三：通過(guò)config接口注入權(quán)限驗(yàn)證配置

步驟四：通過(guò)ready接口處理成功驗(yàn)證

步驟五：通過(guò)error接口處理失敗驗(yàn)證

1、綁定域名

先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫(xiě)“JS接口安全域名”。

備注：登錄后可在“開(kāi)發(fā)者中心”查看對(duì)應(yīng)的接口權(quán)限。

微信公眾號(hào)開(kāi)發(fā)紀(jì)要(4)-調(diào)用微信掃一掃功能

點(diǎn)擊提交后，會(huì)彈出配置成功的提示。這里特別提醒注意：填寫(xiě)域名時(shí)，不要帶http:// 。 只要你帶了，步驟三的權(quán)限驗(yàn)證肯定報(bào)錯(cuò)。會(huì)報(bào)URL配置的錯(cuò)誤。

2、引入JS文件

在需要調(diào)用JS接口的頁(yè)面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

備注：支持使用 AMD/CMD 標(biāo)準(zhǔn)模塊加載方法加載

3、通過(guò)config接口注入權(quán)限驗(yàn)證配置

所有需要使用JS-SDK的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA的web app可在每次url變化時(shí)進(jìn)行調(diào)用,目前Android微信客戶(hù)端不支持pushState的H5新特性，所以使用pushState來(lái)實(shí)現(xiàn)web app的頁(yè)面會(huì)導(dǎo)致簽名失敗，此問(wèn)題會(huì)在Android6.2中修復(fù)）。

wx.config({
    debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶(hù)端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
    appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
    timestamp: , // 必填，生成簽名的時(shí)間戳
    nonceStr: '', // 必填，生成簽名的隨機(jī)串
    signature: '',// 必填，簽名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

這個(gè)配置信息可以寫(xiě)在一個(gè)ajax內(nèi)，在進(jìn)入頁(yè)面時(shí)首先執(zhí)行，在后臺(tái)將對(duì)應(yīng)的信息全部獲取，再返回給前端。

前端頁(yè)面代碼：

$.ajax({
    type:"post",
    url:"這里寫(xiě)你自己的請(qǐng)求地址”,
    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的頁(yè)面url，不能是以前的URL。因?yàn)槲液蠖耸怯胹pringmvc實(shí)現(xiàn)的，寫(xiě)的時(shí)候沒(méi)有重定向。雖然頁(yè)面到了調(diào)用頁(yè)面但URL還是原來(lái)的，所以總是報(bào)簽名錯(cuò)誤。測(cè)了很多次，才改過(guò)來(lái)。

4、通過(guò)ready接口處理成功驗(yàn)證

wx.ready(function(){
   // config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，
   //config是一個(gè)客戶(hù)端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，
    //  則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶(hù)觸發(fā)時(shí)才調(diào)用的接口，
   //則可以直接調(diào)用，不需要放在ready函數(shù)中。
});

 

因?yàn)槲沂羌虞d頁(yè)面就調(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é)果。這里寫(xiě)自己的業(yè)務(wù)操作代碼}
            });
        }
    });

5、通過(guò)error接口處理失敗驗(yàn)證

wx.error(function(res){
   // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，
   //具體錯(cuò)誤信息可以打開(kāi)config的debug模式查看，
     //也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
});

wx.error(function(res) {
    alert("出錯(cuò)了：" + res.errMsg);//這個(gè)地方的好處就是wx.config配置錯(cuò)誤，會(huì)彈出窗口哪里錯(cuò)誤，然后根據(jù)微信文檔查詢(xún)即可。
});

終于大功告成。最后附上微信公眾號(hào)關(guān)于JSSDK調(diào)用的示例DEMO。

DEMO頁(yè)面：http://demo.open.weixin.qq.com/jssdk

網(wǎng)頁(yè)題目：微信公眾號(hào)開(kāi)發(fā)紀(jì)要(4)-調(diào)用微信掃一掃功能
文章出自：http://muchs.cn/article26/ihjojg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、定制網(wǎng)站、定制開(kāi)發(fā)、網(wǎng)站制作、虛擬主機(jī)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站