微信JS-SDK使用步驟(以微信掃一掃爲例)

概述:

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。

經過使用微信JS-SDK，網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，爲微信用戶提供更優質的網頁體驗。

 

JSSDK使用步驟:

1.先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。

備註：登陸後可在「開發者中心」查看對應的接口權限。

 

 2.引入js文件(必須)

在須要調用JS接口的頁面引入以下JS文件，http://res.wx.qq.com/open/js/jweixin-1.2.0.js (推薦使用: https://res.wx.qq.com/open/js/jweixin-1.0.0.js)

備註：支持使用 AMD/CMD 標準模塊加載方法加載.

 

3.經過config接口注入權限驗證配置

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）。

 window.wx.config({ debug: false, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
    appId: sign.appId, // 必填，公衆號的惟一標識
    timestamp: sign.timestamp, // 必填，生成簽名的時間戳
    nonceStr: sign.nonceStr, // 必填，生成簽名的隨機串
    signature: sign.signature, // 必填，簽名，見附錄1
 jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage', 'hideMenuItems', 'showMenuItems', 'showAllNonBaseMenuItem', 'hideAllNonBaseMenuItem', 'startRecord', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice', 'downloadVoice', 'playVoice', 'onVoicePlayEnd', 'pauseVoice', 'stopVoice', 'openLocation', 'getLocation', 'chooseWXPay', 'onMenuShareQQ', 'scanQRCode', ], // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
  });

注： sign須要請求後臺獲取，jsApiList可根據實際需求增減。

 

4.經過ready接口處理成功驗證

wx.ready(function(){ // config信息驗證後會執行ready方法，全部接口調用都必須在config接口
 得到結果以後，config是一個客戶端的異步操做，因此若是須要在頁面加載 時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。 對於用戶觸發時才調用的接口，則能夠直接調用，不須要放在ready函數中。 // 微信掃一掃屬於用戶觸發行爲，固不須要放在此處執行
});

注：不論config信息驗證是否成功，最終都會執行ready方法

 

5.經過error接口處理失敗驗證

wx.error(function(res){ // config信息驗證失敗會執行error函數，如簽名過時致使驗證失敗，具體
 錯誤信息能夠打開config的debug模式查看，也能夠在返回的res參數中查 看，對於SPA能夠在這裏更新簽名。 });

 

調用微信接口(以掃一掃爲例)

wx.scanQRCode({ needResult: 0, // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果，
  scanType: ["qrCode","barCode"], // 能夠指定掃二維碼仍是一維碼，默認兩者都有 success: function (res) { var result = res.resultStr; // 當needResult 爲 1 時，掃碼返回的結果
 } }); //如需對掃碼結果進行處理，可在此方法外層包裹一層函數，傳入回調，形如:
const scanQRCode = (fn) => { wx.scanQRCode({ // 默認爲0，掃描結果由微信處理，1則直接返回掃描結果
      needResult: 1, desc: 'scanQRCode desc', success(res) { fn(res.resultStr) }, }); },

 

介紹就到這裏了，若是想了解更多，請參考微信js-sdk說明文檔