[微信]使用微信JSSDK

  • 372
  • 0
  • 2016-03-05

要使用微信JSSDK,其實不難。只是一開始使用時,需要處理公眾平台的設定,以及一些較為繁瑣的步驟來進行驗證及授權,最後取得供JSSDK使用的憑證-signature。有了這個signature之後,就等於擁有叫用微信Native功能的鑰匙,可以用來叫用JSSDK的所有功能。

使用微信JSSDK

就如上一篇對微信的一點小感觸所述,微信JSSDK是讓使用微信公眾平台的開發者,可以在微信的Web App中,使用JavaScript叫用微信提供的手機平台原生功能。微信JSSDK提供的功能可以分為以下幾類,可以參考微信JS-SDK說明文檔

  • 微信分享設定
  • 使用相機及圖片
  • 使用麥克風
  • 語音辨識
  • 獲取網路狀態
  • 獲取地理位置
  • 控制操作介面
  • 使用微信掃一掃
  • 微信卡券
  • 微信支付

要使用微信JSSDK,其實不難。只是一開始使用時,需要處理公眾平台的設定,以及一些較為繁瑣的步驟來進行驗證及授權,最後取得供JSSDK使用的憑證-signature。有了這個signature之後,就等於擁有叫用微信Native功能的鑰匙,可以用來叫用JSSDK的所有功能。(當然,微信公眾平台也要認證過才行,否則部分的功能是無法使用的)

公眾平台設定

底下這兩樣東西,必須到微信公眾平台上進行設定。

設定JS接口安全域名

此安全域名是一級域名,不帶wwwhttp,基本上就是你的Web App站台的域名。如果站台是http://www.mywebsite.com的話,就填mywebsite.com即可。會有這個限制,是因為當微信發現此公眾號的服務被人舉報有惡意的行銷或不當的內容及行為時,可以很簡單的就以此安全域名封鎖所有相關的服務。而這也不能亂填,因為底下的驗證程序中會使用到。

圖-設定JS接口安全域名

取得AppID和AppSecret

另外,需要到公眾平台的管理介面中取得AppIDAppSecret。這兩個資訊在之後驗證的程序中會使用到。

圖-公眾平台AppID和AppSecret

進行驗證及授權

就跟所有公開在網路上的服務一樣,必須有嚴謹的認證及授權機制,才能使用微信的服務。這些程序,請參考參考微信的這份說明,這份文件說明的很詳細。

基本上,有底下這幾個步驟。其目的是進行呼叫端的驗證,以及授權使用JSSDK的功能,以讓呼叫API的程序更安全。要注意到的是,不要在Web Client端做這些處理,為了安全,請在Web Server端做。

  1. 取得access_token
  2. 取得jsapi_ticket
  3. 取得簽名(signature)

呼叫JSSDK

取得signature後,就可以用來呼叫JSSDK。

1.引入JSSDK

首先,需要在使用JSSDK的頁面中,引入微信JSSDK的js檔

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

2.呼叫wx.config()

必須先呼叫wx.config()以進行設定,否則無法使用其他功能,同一個URL只需叫用一次。

wx.config({
    debug: true, // 是否開啟debug模式。如果為true,則呼叫api的所有傳回值都會在Client端alert出來。
    appId: '', // 公眾平台上取得的appId
    timestamp: , // 產生signature時的timestamp
    nonceStr: '', // 產生signature時的隨機字串
    signature: '',// 上一個步驟產生的signature
    jsApiList: [] // 需要使用的function列表
});

3.呼叫wx.ready()

wx.config()執行完成且成功後,會繼續執行wx.ready()。該function中接受的參數是一個function物件,所以可以把頁面載入後要執行的程序寫在該function中,以確保可以被正確的執行到。

wx.ready(function(){
    //頁面載入後要執行的程序
    //例如:取得地理位置
    wx.getLocation({
    success: function (res) {
        //處理地理位置
    },
    cancel: function (res) {
        console.debug('用戶拒絕授權獲取地理位置');        
    }
    });
});

4.錯誤處理-呼叫wx.error()

微信SDK有提供統一的錯誤處理function:wx.error(),可以在這裡檢視及處理錯誤訊息。

wx.error(function(res){
    //錯誤處理function
});

參考