微信公眾號開發紀要(4)-調用微信掃一掃功能
步驟一：綁定域名
步驟二：引入JS文件
步驟三：通過config接口註入權限驗證配置
步驟四：通過ready接口處理成功驗證
步驟五：通過error接口處理失敗驗證
1、綁定域名
先登錄微信公眾平臺進入“公眾號設置”的“功能設置”裏填寫“JS接口安全域名”。
備註：登錄後可在“開發者中心”查看對應的接口權限。
點擊提交後，會彈出配置成功的提示。這裏特別提醒註意：填寫域名時，不要帶http:// 。 只要你帶了，步驟三的權限驗證肯定報錯。會報URL配置的錯誤。
2、引入JS文件
在需要調用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
備註：支持使用 AMD/CMD 標準模塊加載方法加載
3、通過config接口註入權限驗證配置
所有需要使用JS-SDK的頁面必須先註入配置信息，否則將無法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
wx.config({
debug: true, //
開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名
jsApiList: [] // 必填，需要使用的JS接口列表
});
這個配置信息可以寫在一個ajax內，在進入頁面時首先執行，在後臺將對應的信息全部獲取，再返回給前端。
前端頁面代碼：
$.ajax({
type:"post",
url:"這裏寫你自己的請求地址”,
data:{},
success:function(data){
var result = $.parseJSON(data);
wx.config({
debug: true,
appId:
result.appId, //公眾號的唯一標識
timestamp:
""+result.timestamp, //生成簽名的時間戳
nonceStr:result.noncestr, //生成簽名的隨機串
signature:result.signature, //簽名
jsApiList : [
'scanQRCode' ] //需要使用的JS接口列表(我只需要調用掃一掃的接口，如有多個接口用逗號分隔)
});
}
});
後端代碼就是生成簽名。如何生成簽名，微信公眾號已經給出了官方例子。照著官方例子打一遍代碼就行了。下載地址：http://demo.open.weixin.qq.com/jssdk/sample.zip。
這裏特別強調的事情：生成簽名的url一定是你調用JSSDK的頁面url，不能是以前的URL。因為我後端是用springmvc實現的，寫的時候沒有重定向。雖然頁面到了調用頁面但URL還是原來的，所以總是報簽名錯誤。測了很多次，才改過來。
4、通過ready接口處理成功驗證
wx.ready(function(){
// config信息驗證後會執行ready方法，所有接口調用都必須在config接口獲得結果之後，
//config是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口， // 則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口，
//則可以直接調用，不需要放在ready函數中。
});
因為我是加載頁面就調用微信掃一掃，所以將相關接口就放在了ready函數中。
wx.ready(function() {
document.querySelector('#scan').onclick =
function() {
wx.scanQRCode({
needResult: 1,
// 默認為0，掃描結果由微信處理，1則直接返回掃描結果，
scanType: ["qrCode","barCode"],
// 可以指定掃二維碼還是一維碼，默認二者都有
success: function(res) {
//res.resultStr可以獲得掃描結果。這裏寫自己的業務操作代碼}
});
}
});
5、通過error接口處理失敗驗證
wx.error(function(res){
// config信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，
//具體錯誤信息可以打開config的debug模式查看， //也可以在返回的res參數中查看，對於SPA可以在這裏更新簽名。
});wx.error(function(res) {
alert("出錯了：" +
res.errMsg);//這個地方的好處就是wx.config配置錯誤，會彈出窗口哪裏錯誤，然後根據微信文檔查詢即可。
});
終於大功告成。最後附上微信公眾號關於JSSDK調用的示例DEMO。
DEMO頁面：http://demo.open.weixin.qq.com/jssdk
微信公眾號開發紀要(4)-調用微信掃一掃功能