微信jssdkapi文檔

1. 如何在React中調用微信的jsSDK

1. 微信JSSDK使用步驟簡介

我們既然是在做基於微信的開發，當然就離不開微信的開發文檔了。開始之前希望大家能先去看下《微信JS-SDK說明文檔》。那麼我們怎麼樣才能用上微信的JSSDK呢？以下基本步驟就是基於該文檔的。

需要注意的是，如果本人下面的描述你看的有點雲里霧里的話，我建議你：

• 回頭看下本系列《小白學react》的歷史基礎文章，特別是《小白學react之altjs的Action和Store》以及《小白學react之打通React Component任督二脈》，或/和：

• 直接跳過我的描述，在文章後面下載最新的源碼，先閱讀源碼，碰到問題再反過來看文章的描述。

步驟一：綁定域名

先登錄微信公眾平台進入「公眾號設置」的「功能設置」里填寫「JS介面安全域名」。
備註：登錄後可在「開發者中心」查看對應的介面許可權。

這里綁定的時候需要注意不要帶前面的http協議頭。寫法跟上一篇《小白學react之網頁獲取微信用戶信息》中的網頁回調域名設置的寫法是一樣的。

步驟二：引入JS文件

在需要調用JS介面的頁面引入如下JS文件，（支持https）：

請注意，如果你的頁面啟用了https，務必引入 ：
，否則將無法在iOS9.0以上系統中成功使用JSSDK

因為我們的index.html是通過ejs模版生成的，所以我們只需要在我們的index.ejs中的body部分末尾加入相應的微信jssdk庫的引用就好了。

• <% for (var chunk in htmlWebpackPlugin.files.chunks) { %> <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>


• <script src="jweixin-1.0.0.js"></script>


• <% } %>



步驟三：通過config介面注入許可權驗證配置

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

• wx.config({


• debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。


• appId: '', // 必填，公眾號的唯一標識


• timestamp: , // 必填，生成簽名的時間戳


• nonceStr: '', // 必填，生成簽名的隨機串


• signature: '',// 必填，簽名，見附錄1


• jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2});



這一步的關鍵是如何生成正確的簽名。這里微信jssdk文檔中有給出不同語言版本的簽名演算法示例大家可以參考。往下我們也會就github上的一個簽名演算法的封裝進行學習。

在我們的實戰過程中，簽名會在伺服器端發生。

react客戶端會像之前的獲取微信用戶信息一樣，通過一個restfulApi調用伺服器端的api，然後由伺服器來生成對應的簽名，然後將簽名信息返回給客戶端。

客戶端獲取到上面wx.config示例代碼中的簽名相關信息後，就會調用一個Alt的Action，來觸發將獲取回來的信息保存到一個跟該Action綁定的jssdk狀態管理的Store裡面。然後就可以調用wx.config來配置我們需要用到的JS介面列表了。

注意這里的wx這個對象是通過上一步的JS文件引入進來的。我們在react的客戶端代碼中可以直接通過window.wx對其進行引用：

• window.wx.config({


• ...


• });



步驟四：通過ready介面處理成功驗證

• wx.ready(function(){ // config信息驗證後會執行ready方法，所有介面調用都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在頁面載入時就調用相關介面，則須把相關介面放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的介面，則可以直接調用，不需要放在ready函數中。});



隨後，react客戶端負責jssdk狀態管理的store會調用wx.ready來監聽config配置是否成功，如果成功的話，就會將該store的一個ready狀態設置成true。

這樣的話，通過AltContainer綁定了該store的相應的Component組件就能知道響應的jssdk的api是否已經准備就緒，可以進行調用了。

步驟五：通過error介面處理失敗驗證

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



同理，如果如果配置失敗的話，那麼就在wx.error這個監聽介面中將ready狀態設置成false。

2. 生成簽名

如前面所述，我們需要用到jssdk的頁面必須要要注入調用到的api的配置信息。

• wx.config({


• debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。


• appId: '', // 必填，公眾號的唯一標識


• timestamp: , // 必填，生成簽名的時間戳


• nonceStr: '', // 必填，生成簽名的隨機串


• signature: '',// 必填，簽名，見附錄1


• jsApiList: [] // 必填，需要使用的JS介面列表



而注入JS介面到頁面時，我們可以看到，還需要使用到其他一些信息。其中appId我們可以從公眾號管理後台獲得。signature是跟所訪問頁面的url關聯的一個簽名，它有專門的一套演算法來生成。另外兩個參數nonceStr和signature都是在簽名的過程中生成的。

這里通過wx.config傳進去這些參數，主要是為了讓微信去判斷我們生成的簽名和微信通過這些信息生成的簽名是否一致，如果不一致的話，那麼注入到該頁面的jsApiListj就失敗。

那麼我們在伺服器這邊的簽名演算法是如何的呢？根據微信開發文檔我們需要提供以下4個參數，然後通過sha1算發來生成對應的簽名：

• noncestr：一個隨機字元串，我們隨便填寫

• jsapi_ticket：jsapi_ticket是公眾號用於調用微信JS介面的臨時票據

• timestamp: 簽名時間戳。注意這個時間戳需要和上面傳入wx.config的時間戳一致

• 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格式的參數。主要是用來將生成的簽名信息等回傳給上層調用函數。

• const config = { grant_type: 'client_credential', appid: 'xxxx', secret: "xxxxx", noncestr:'Wm3WZYTPz0wzccnW', accessTokenUrlin.qq.com/cgi-bin/token', ticketUrl:'com/cgi-bin/ticket/getticket',


• }



• exports.sign = function (url,callback) { var noncestr = config.noncestr,


• timestamp = Math.floor(Date.now()/1000), //精確到秒


• ...


• request(config.accessTokenUrl + '?grant_type=' + config.grant_type + '&appid=' + config.appid + '&secret=' + config.secret ,function(error, response, body){ if (!error && response.statusCode == 200) { var tokenMap = JSON.parse(body);


• request(config.ticketUrl + '?access_token=' + tokenMap.access_token + '&type=jsapi', function(error, resp, json){ if (!error && response.statusCode == 200) { var ticketMap = JSON.parse(json);


• cache.put('ticket',ticketMap.ticket,config.cache_ration); //加入緩存


• callback({ noncestr:noncestr, timestamp:timestamp, url:url, jsapi_ticket:ticketMap.ticket, signature:sha1('jsapi_ticket=' + ticketMap.ticket + '&noncestr=' + noncestr + '&timestamp=' + timestamp + '&url=' + url)


• });


• }


• })


• }


• })


• }


• }



這里的流程和我們剛才描述的並無二致。首先是通過appId和secret獲得調用獲取jsapi_ticket的access_token，然後通過該access_token獲得我們簽名需要用到的jsapi_ticket。noncestr我們是提前隨便填寫好的。timestamp的演算法也比較簡單。

最後就是通過sha1這個庫提供的方法，將jsapi_ticket，noncestr，timestamp和頁面url進行sha1簽名，然後將以上這些信息通過callback返回給上層調用函數。

那麼我們往下看下我們的上層調用函數。其實就是我們的express路由:

• app.get("/api/signature", function(req,res) { const url = req.query.url.split('#')[0];



• signature.sign(url,function(signatureMap){


• signatureMap.appId = wechat_cfg.appid;


• res.send(signatureMap);


• });



• })



根據微信開發文檔需求，我們首先需要將傳進來的url的錨點後面的數據給去掉，保留前面的有效部分。

然後就是調用上面的sign方法來生成簽名。上面的簽名方法最後傳進來的json數據就是這里的signatureMap。我們最終會將這些數據發送回react客戶端。

同時，通過上面的wx.config的示例，我們知道還需要用到微信公眾號的appId。所以這里一並將其放到signatureMap中進行返回。

那麼到此為止，react客戶端調用服務端的"/api/signature"返回的數據示例如下:

• {


• noncestr: 'Wm3WZYTPz0wzccnW',


• timestamp: 1476873698,


• url: 'com/?code=&state=',


• jsapi_ticket: 'sM4AOVdWfPE4DxkXGEs8VBqyVbs-TKGYp4d_ZSQa0Q5WvvMUPNQ6XGpyEcgKOD_xID_GrMCaalSmIF9JbrGaOg',


• signature: ''


• }



3. 客戶端獲取簽名信息

3.1 獲取簽名信息並注入jssdk

和之前的獲取微信用戶信息一樣，我們這里會建立一個新的Source文件WechatSdkSource.js來調用遠程伺服器的"/api/signature"介面:

• var WechatSdkSource = {


• fetchSignatureMap() { return {


• remote(state,url) { return co(function *() { let signatureMap = null; const getSignatureMapUrl = `/api/signature`; try { let result = yield request.get(getSignatureMapUrl).query({url:url});


• signatureMap = result.body;


• } catch (e) {


• signatureMap = null;


• } //console.log("userInfo:", userInfo);


• return signatureMap;


• });


• },



• local() { // Never check locally, always fetch remotely.


• return null;


• }, success: WechatSdkActions.updateSignatureMap, error: WechatSdkActions.getSignatureMapFailed, loading: WechatSdkActions.getSignatureMap,


• }


• }


• };



這里傳進來的url由下面將要談及的上層函數所生成。整個流程就沒有什麼好說的了，說白了就是通過相應的庫發送一個帶有url的query參數的請求到伺服器端來請求簽名信息，相信有跟著這個系列文章的朋友都是很清楚的了。

最終請求成功返回的時候就會調用WechatSdkActions的updateSignatureMap這個Action。

• var alt = require('../alt');mole.exports = alt.generateActions( 'updateSignatureMap', 'getSignatureMap', 'getSignatureMapFailed',


• );



而這個action就會觸發所監聽的WechatSdkStore的onUpdateSignatureMap這個回調。

• class WechatSdkStore { constructor() { this.signatureMap = []; this.errorMessage = null; this.ready = false; this.bindActions(WechatSdkActions); this.exportAsync(WechatSdkSource);

2. 【求幫助】 微信JSSDK 分享介面，調用沒反應

你在wx.config時，打開調試模式，自己測試測試，在調試模式下，都會alert信息出來，看版看alert出來的是什麼信息。

3. 微信公眾號開發之如何使用JSSDK

微信開發交流群：148540125
歡迎留言、轉發、打賞

系列文章參考地址 極速開發微信公眾號
項目源碼參考地址 點我點我--歡迎Start

服務號、訂閱號可以通過登錄 微信公眾平台 查看 開發>介面許可權

使用JSSDK主要包括
1、判斷當前客戶端版本是否支持指定JS介面、
2、分享介面（微信認證）
3、圖像介面
4、音頻介面
5、智能介面（識別語音並返回結果）
6、設備信息（獲取網路狀態）
7、地理位置
8、界面操作
9、微信掃一掃
10、微信小店（服務號必須通過微信認證）
11、微信卡券 （微信認證）
12、微信支付（服務號必須通過微信認證）

官方參考文檔

步驟一：綁定域名

先登錄微信公眾平台進入 公眾號設置 的 功能設置 里填寫 JS介面安全域名 。

步驟二：引入JS文件
在需要調用JS介面的頁面引入如下JS文件，（支持https）： http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如需使用搖一搖周邊功能，請引入 http://res.wx.qq.com/open/js/jweixin-1.1.0.js
備註：支持使用 AMD/CMD 標准模塊載入方法載入

步驟三：通過config介面注入許可權驗證配置

簽名演算法生成規則

請 官方參考文檔

下面具體來講講 開源項目 weixin_guide 中的封裝。

使用的時候只要在Controller方法上添加一個攔截器 JSSDKInterceptor 來實現簽名驗證再將 wx.config 需要的參數設置對應的屬性在頁面上進行獲取。

攔截器實現如下：

在Controller中使用

JSP頁面上面使用

測試結果

在AppConfig 中添加路由 me.add("/jssdk", JSSDKController.class,"/view"); 手機中訪問 http://域名[/項目名稱]/jssdk ,如果設置了 debug= true 成功了就會彈出

如果出現 {"errorMsg":"config:invalid url domian"} 請檢查 步驟一：綁定域名 與你訪問的域名是否在安全域名列表當中

步驟四：通過ready介面處理成功驗證

步驟五：通過error介面處理失敗驗證

步驟六：介面調用

攔截器具體實現 參考地址 點這里
js 介面調用參考地址 點這里

以上就是JSSDK使用的介紹。
歡迎留言、轉發、打賞項目

源碼參考地址 點我點我--歡迎Start

4. 怎麼使用微信JSSDK的自定義分享功能

一，首先在公眾號管理後台「公眾號設置」的「功能設置」里填寫JS介面安全域名，域名需要通過ICP備案，沒有備案域名可以用SAE、BAE等平台。此外，自定義分享功能需要通過微信認證才能使用，沒有認證的可以跟關系好的朋友借用許可權，在他的JS介面安全域名設置這里填上你的域名和共享同一個開發者ID。

二，在需要調用JS介面的頁面引入微信JSSDK的JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js，這個文件在需要分享的頁面是必須要引用的，單獨特別重申一下，其他方面請閱讀官方文檔http://mp.weixin.qq.com/wiki/7/.html

引用方法：在網頁title標題下面加上：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

三，下載官方示例代碼：

http://www.huceo.com/zb_users/upload/2015/07/201507081436362390123294.zip

解壓之後在例如PHP文件夾中看到以下文件：

5. 微信朋友圈JSSDK分享自定義圖片文字

1、在微信公眾號添加安全域名（製作的H5頁面的主域名）；

測試階段，本人是通過修改hosts文件，將對應域名解析為127.0.0.1 ； 然後將電腦和手機連接至同個區域網下。修改手機代理為電腦在區域網內的IP地址；這樣手機就能正常進行測試；

2、引入jssdk   script    src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'

3、配置jssdk，成功後方可使用相關功能，方式如下

wx.config({

debug: false, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。

appId: 'XX', // 必填，公眾號的唯一標識

timestamp: XX, // 必填，生成簽名的時間戳

nonceStr: xx, // 必填，生成簽名的隨機串

signature: xx, // 必填，簽名，見附錄1  

jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2

});

第一次接觸時看到網上的文章在此對signature沒有過多的說明，這里我自己大概說一下，此參數是通過獲取公眾號的id及secret獲取 access _token,然後通過 access _token獲取jsapi_ticket，然後通過時間戳，隨機串，當前頁面url，通過sha1加密生成；（這里做下說明，此步驟由後台處理後返回給前端即可）；

剛接觸的時候領導認為純前端可實現，這。。。確實可以實現，這里就不做過多說明了；至於要後端處理的原因大致為兩點1、公眾號id和secret在前端實現不安全  2、 access _token和jsapi_ticket每日有請求次數的限制，過期時間兩小時，所以需要後台在伺服器緩存，每兩小時獲取一次；

4、wx.config配置正確即可通過wx.ready來調用相應功能

wx.ready(function() {

wx.onMenuShareTimeline({   //分享朋友圈

title: 'X', // 分享標題

link: window.location.href, // 分享鏈接

imgUrl: url, // 分享圖標

success: function() {

// 用戶確認分享後執行的回調函數

console.log('分享成功了喲喲喲')

},

cancel: function() {

// 用戶取消分享後執行的回調函數

}

});

wx.onMenuShareAppMessage({  // 好友分享

title: '', // 分享標題

desc: '', // 分享描述

link: window.location.href, // 分享鏈接

imgUrl: '', // 分享圖標

success: function () {

// 用戶確認分享後執行的回調函數

},

cancel: function () {

// 用戶取消分享後執行的回調函數

}

});

});

總結：其實對於前端要處理的很少，只要從後台獲取signature簽名，調用方法即可實現；具體可看官方文檔；首次接觸的小夥伴不要被嚇到，就是如此簡單；

6. 在vuejs中引入微信JS SDK的最佳方式是怎麼樣的

關鍵在於你調用wx.onMenuShareAppMessage的時機，如果是非SPA的vue.js應用，wx.config放到ready鉤子里執行，然後將wx.onMenuShareAppMessage包在wx.ready方法內，以保證其在微信JSSDK獲取到此介面許可權時再注冊事件。在此之前可以通過一些過渡效果延緩頁面載入。
var example1 = new Vue({ el: '#example-1', data: {

}, ready: function() { this.$http.get({ url: 'api/wx/tokenSignature', data: { url: mui.os.ios === true? window.url : (location.protocol + '//' + location.host + '/wx' + url)
}, success: function(json) {
wx.config({ debug: false, appId: json.appId, timestamp: parseInt(json.timestamp), nonceStr: json.nonce, signature: json.signature, jsApiList: [ 'onMenuShareAppMessage'
]
});
wx.ready(function () {
wx.onMenuShareAppMessage({ success: function () {
// 用戶確認分享後執行的回調函數
}, cancel: function () {
// 用戶取消分享後執行的回調函數
}
});
});
}
})
}
})

如果你用到了vue-router，那麼JSSDK時好時壞的的情況在Android下是肯定會發生的，wx.config也需要在適當的鉤子函數里執行，重點在於vue-router切換view時url的變化。