微信 JS-SDK 開發

前言：微信幾乎存在每臺移動設備上，是一個不可忽視的流量入口，微信js-sdk的出現，讓廣大開發者能夠調用微信原生功能，在微信上開發本身的應用。可是配置微信js-sdk開發環境對於前端初學者或者不太熟悉後臺開發的開發者來講，是比較麻煩的，你須要獲取簽名，首先須要獲取jsspi_ticket，獲取jsspi_ticket，你又須要獲取access_token,然而jsspi_ticket和access_token都是2小時內有效的，過時須要從新獲取，你也不能頻繁得獲取，會出發頻率限制致使不可用。除此以外，你還須要有一個安全域名，配置到公衆號後臺。

————————————————————————————————————

脫離了煎熬的等待以後，微信給出了微信JS-SDK說明文檔 的開發文檔，着實給我們帶了便利啊。

話很少說，跟着文檔咱作起開發來。

其實在文檔中說的是比較明白的了，我呢只是將本身處理的方法貼出來，一是讓你們參考，二是咱也不是什麼大神，若有問題還望各位不吝指教哦。

根據文檔說明，我們總共須要作至少五個步驟的事情：

步驟一：綁定域名
步驟二：引入JS文件
步驟三：經過config接口注入權限驗證配置
步驟四：經過ready接口處理成功驗證
步驟五：經過error接口處理失敗驗證

接下來咱就循序漸進的搞起。

對了，關於下面的全部操做都是要在後臺進行的，js也能夠單獨獲取/產生相應的數據，可是不安全，不方便。我的以爲後臺操做高大上:)

步驟1、步驟二咱就不將了，直接點擊上面的連接到微信文檔就能輕鬆解決。

關鍵是對於第三步的處理，注入權限驗證配置

整個配置以下：

 

wx.config({
    debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要pc端打開時能夠查看傳入的參數，以log打出。
    appId: '', // 必填，公衆號的惟一標識
    timestamp: , // 必填，生成簽名的時間戳
    nonceStr: '', // 必填，生成簽名的隨機串
    signature: '',// 必填，簽名，見附錄1
    jsApiList: [] // 必填，須要使用的JS接口列表，全部JS接口列表見附錄2
});

咱們看到這裏邊一堆的參數，不過其實都是比較簡單的進行設置便可，只不過也有存在必定的關聯性。

 

接下來咱們具體看之：

 

 

debug

 

這個就很少說了，通常在開發時都是 true，在這個模式下基本上執行的每一個 js 調用都會給顯示出來，不須要本身在寫什麼 alert 了，比較方便。不過真實使用時就算你不打算改爲 false，也絕對會有人打電話給你讓你改爲 false :)

 

appId

在微信後臺的開發者中心就可以直接看到，和 appSecret在一堆兒的。固然這個既能夠 hard coding,也能夠動態獲取，若是此模塊開發出來不是隻給一個公衆號使用。

 

 

timestamp/nonceStr/signature

這三個東東就要咱們本身來弄了，這個在下文着重介紹了。總之呢，timestamp/nonceStr 是由咱們本身生成的，而後再參與到 signature 的生成中。

 

 

jsApiList

 

列出當前頁面中咱要使用到的JS接口，可點擊上文連接的附錄2查看。

 

好，接下來就是關鍵部分咯(對於權限簽名算法的原版介紹請點擊上文連接的附錄1進行查看)

 

一個完整的鏈條以下圖所示：

 

appId/appSecret  --->  access_token --->  jsapi_ticket  ---->  signature  --->  config 配置

 

其中對於 access_token/jsapi_ticket 因爲訪問數量的限制(貌似是1000,可自行查看)，須要進行相應的緩存處理，而每次獲取後的有效時間目前爲 7200s。

 

好，我們能夠繼續接下來的步驟了。

咱們來獲取 access_token 吧(點咱看官版介紹)：

只須要採用 GET 方式的獲取便可，

 

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

 

只須要將上述 APPID/APPSECRET 替換爲咱自個兒的就行，就像上文所說若是是作多個公衆號的配置，確定是要作相應的動態處理的，下文或有所介紹。

正確返回是這個樣兒的，

 

{"access_token":"ACCESS_TOKEN","expires_in":7200}

錯誤的大概是這個樣兒的，

 

 

{"errcode":40013,"errmsg":"invalid appid"}

 

 

可能還有其它的錯誤哦。。

jsapi_ticket 目前也就不是問題了：

也只需 GET 方式便可，

 

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

 

 

將其中的 ACCESS_TOKEN 替換爲自個兒的就行。

正確的是這個樣兒的，

 

{
    "errcode":0,
    "errmsg":"ok",
    "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
    "expires_in":7200
}

額，官方沒說錯誤是啥樣兒的(咱也沒碰到。。)

 

好，接下來咱就上 簽名算法 了：

其實官方說了一堆兒，就是這個樣子的，

先拼成這樣兒就行了，

 

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com

而後，在這個字符串中 key 相對位置是固定的，且全是小謝的， noncestr/timestamp 也就是我們本身生成的，這倆也會放到界面上的 config 參數中。而後對於最後的 url 值的定義是：當前持有 config 配置頁面的完整 url 連接，不過不包含 # 號及其後邊的字符串，且不要作任何的URL轉義。

 

完了咱們就將生成的串兒用 sha1 進行加密，ok， 就獲得我們要的 signature 了。

打完手工。。

對的，不過關於咱真正的處理方式其實尚未講喲。。

 

關於那倆特嬌氣的 東西咱還的作緩存不是，因而我就把它倆扔數據庫去了：

咱的表結構，

 

CREATE TABLE `CRM_APP_WECHAT` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `eId` int(11) NOT NULL,
    `token` varchar(100) NOT NULL,
    `app_id` varchar(100) NOT NULL COMMENT '應用id',
    `app_secret` varchar(100) NOT NULL COMMENT '應用密鑰',
    `access_token` varchar(200) NOT NULL,
    `jsapi_ticket` varchar(200) NOT NULL,
    `get_time_access_token` timestamp NULL DEFAULT NULL COMMENT '更新 access_token 時間',
    `expires_in_access_token` int(11) NOT NULL DEFAULT '7200' COMMENT 'access_token 失效時間',
    `get_time_jsapi_ticket` timestamp NULL DEFAULT NULL COMMENT '獲取 jsapi_ticket 時間',
    `expires_in_jsapi_ticket` int(11) NOT NULL DEFAULT '7200' COMMENT 'jsapi_ticket 失效時間',
    `create_user` int(11) NOT NULL DEFAULT '-1',
    `create_time` timestamp NULL DEFAULT NULL,
    `modify_user` int(11) NOT NULL DEFAULT '-1',
    `modify_time` timestamp NULL DEFAULT NULL,
    PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8 COMMENT='微信敏感信息記錄表';

 

處理邏輯大概以下(自頂向下)：