微信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說明文檔