offset,
買粉絲unt: 買粉絲unt
});
setTimeout(() => {
this.getData();
wx.hideLoading();
}, 1500);
}
}
1. 買粉絲JSSDK使用步驟簡介
我們既然是在做基于買粉絲的開發，當然就離不開買粉絲的開發文檔了。開始之前希望大家能先去看下《買粉絲JS-SDK說明文檔》。那么我們怎么樣才能用上買粉絲的JSSDK呢？以下基本步驟就是基于該文檔的。
需要注意的是，如果本人下面的描述你看的有點云里霧里的話，我建議你：
回頭看下本系列《小白學react》的歷史基礎文章，特別是《小白學react之altjs的Action和Store》以及《小白學react之打通React Component任督二脈》，或/和：
直接跳過我的描述，在文章后面下載最新的源碼，先閱讀源碼，碰到問題再反過來看文章的描述。
步驟一：綁定域名
先登錄買粉絲公眾平臺進入“買粉絲設置”的“功能設置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發者中心”查看對應的接口權限。
這里綁定的時候需要注意不要帶前面的買粉絲協議頭。寫法跟上一篇《小白學react之網頁獲取買粉絲用戶信息》中的網頁回調域名設置的寫法是一樣的。
步驟二：引入JS文件
在需要調用JS接口的頁面引入如下JS文件，（支持買粉絲s）：
請注意，如果你的頁面啟用了買粉絲s，務必引入 ：
，否則將無法在iOS9.0以上系統中成功使用JSSDK
因為我們的index.買粉絲是通過ejs模版生成的，所以我們只需要在我們的index.ejs中的body部分末尾加入相應的買粉絲jssdk庫的引用就好了。
<% for (var chunk in 買粉絲WebpackPlugin.files.chunks) { %> <script src="<%= 買粉絲WebpackPlugin.files.chunks[chunk].entry %>"></script><script src="jweixin-1.0.0.js"></script>
<% } %>
步驟三：通過買粉絲nfig接口注入權限驗證配置
所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調用（同一個url僅需調用一次，對于變化url的SPA的web app可在每次url變化時進行調用,目前Android買粉絲客戶端不支持pushState的H5新特性，所以使用pushState來實現web app的頁面會導致簽名失敗，此問題會在Android6.2中修復）。
wx.買粉絲nfig({debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，買粉絲的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2});
這一步的關鍵是如何生成正確的簽名。這里買粉絲jssdk文檔中有給出不同語言版本的簽名算法示例大家可以參考。往下我們也會就github上的一個簽名算法的封裝進行學習。
在我們的實戰過程中，簽名會在服務器端發生。
react客戶端會像之前的獲取買粉絲用戶信息一樣，通過一個restfulApi調用服務器端的api，然后由服務器來生成對應的簽名，然后將簽名信息返回給客戶端。
客戶端獲取到上面wx.買粉絲nfig示例代碼中的簽名相關信息后，就會調用一個Alt的Action，來觸發將獲取回來的信息保存到一個跟該Action綁定的jssdk狀態管理的Store里面。然后就可以調用wx.買粉絲nfig來配置我們需要用到的JS接口列表了。
注意這里的wx這個對象是通過上一步的JS文件引入進來的。我們在react的客戶端代碼中可以直接通過window.wx對其進行引用：
window.wx.買粉絲nfig({...
});
步驟四：通過ready接口處理成功驗證
wx.ready(function(){ // 買粉絲nfig信息驗證后會執行ready方法，所有接口調用都必須在買粉絲nfig接口獲得結果之后，買粉絲nfig是一個客戶端的異步操作，所以如果需要在頁面加載時就調用相關接口，則須把相關接口放在ready函數中調用來確保正確執行。對于用戶觸發時才調用的接口，則可以直接調用，不需要放在ready函數中。});隨后，react客戶端負責jssdk狀態管理的store會調用wx.ready來監聽買粉絲nfig配置是否成功，如果成功的話，就會將該store的一個ready狀態設置成true。
這樣的話，通過AltContainer綁定了該store的相應的Component組件就能知道響應的jssdk的api是否已經準備就緒，可以進行調用了。
步驟五：通過error接口處理失敗驗證
wx.error(function(res){ // 買粉絲nfig信息驗證失敗會執行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開買粉絲nfig的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名。});同理，如果如果配置失敗的話，那么就在wx.error這個監聽接口中將ready狀態設置成false。
2. 生成簽名
如前面所述，我們需要用到jssdk的頁面必須要要注入調用到的api的配置信息。
wx.買粉絲nfig({debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，買粉絲的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表
而注入JS接口到頁面時，我們可以看到，還需要使用到其他一些信息。其中appId我們可以從買粉絲管理后臺獲得。signature是跟所訪問頁面的url關聯的一個簽名，它有專門的一套算法來生成。另外兩個參數nonceStr和signature都是在簽名的過程中生成的。
這里通過wx.買粉絲nfig傳進去這些參數，主要是為了讓買粉絲去判斷我們生成的簽名和買粉絲通過這些信息生成的簽名是否一致，如果不一致的話，那么注入到該頁面的jsApiListj就失敗。
那么我們在服務器這邊的簽名算法是如何的呢？根據買粉絲開發文檔我們需要提供以下4個參數，然后通過sha1算發來生成對應的簽名：
noncestr：一個隨機字符串，我們隨便填寫
jsapi_ticket：jsapi_ticket是買粉絲用于調用買粉絲JS接口的臨時票據
timestamp: 簽名時間戳。注意這個時間戳需要和上面傳入wx.買粉絲nfig的時間戳一致
url: 調用JS接口頁面的完整URL。我們可以從react客戶端通過location.href獲得，并傳給服務器端
那么這里主要需要解決的就是如何獲得jsapi_ticket這個臨時票據了。
根據文檔的描述，我們可以通過以下這個接口獲得：
cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi
從中可以看到，我們調用這個接口首先要獲得一個access_token。這里買粉絲也有相應的api來處理。
cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
這里需要用到我們的買粉絲買粉絲的appId和secret，這些我們都是已知的，所以好辦。
那么，也就是說，我們其實只需要提供我們的買粉絲買粉絲的appId和secret，就能獲取到access_token，從而就會獲得我們需要的jsapi_ticket。
這里我們參考下github上一個示例(wechat-sdk-demo )的簽名的實現。其傳入的參數有兩個，其中:
url: react客戶端傳進來的需要注入jsapi的頁面url
callback: 一個回調函數，接受一個json格式的參數。主要是用來將生成的簽名信息等回傳給上層調用函數。
買粉絲nst 買粉絲nfig = { grant_type: 'client_credential', appid: 'xxxx', secret: "xxxxx", noncestr:'Wm3WZYTPz0wzc買粉絲W', accessTokenUrlin.qq.買粉絲/cgi-bin/token', ticketUrl:'買粉絲/cgi-bin/ticket/getticket',}
exports.sign = function (url,callback) { var noncestr = 買粉絲nfig.noncestr,