目錄 |
微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。php
經過使用微信JS-SDK,網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,爲微信用戶提供更優質的網頁體驗。html
此文檔面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。前端
先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。java
備註:登陸後可在「開發者中心」查看對應的接口權限。node
在須要調用JS接口的頁面引入以下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.jspython
請注意,若是你的頁面啓用了https,務必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ,不然將沒法在iOS9.0以上系統中成功使用JSSDKgit
如需使用搖一搖周邊功能,請引入 jweixin-1.1.0.jsweb
備註:支持使用 AMD/CMD 標準模塊加載方法加載ajax
全部須要使用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 });
wx.ready(function(){ // config信息驗證後會執行ready方法,全部接口調用都必須在config接口得到結果以後,config是一個客戶端的異步操做,因此若是須要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則能夠直接調用,不須要放在ready函數中。 });
wx.error(function(res){ // config信息驗證失敗會執行error函數,如簽名過時致使驗證失敗,具體錯誤信息能夠打開config的debug模式查看,也能夠在返回的res參數中查看,對於SPA能夠在這裏更新簽名。 });
全部接口經過wx對象(也可以使用jWeixin對象)來調用,參數是一個對象,除了每一個接口自己須要傳的參數以外,還有如下通用參數:
備註:不要嘗試在trigger中使用ajax異步請求修改本次分享的內容,由於客戶端分享操做是一個同步操做,這時候使用ajax的回包會尚未返回。
以上幾個函數都帶有一個參數,類型爲對象,其中除了每一個接口自己返回的數據以外,還有一個通用屬性errMsg,其值格式以下:
wx.checkJsApi({ jsApiList: ['chooseImage'], // 須要檢測的JS接口列表,全部JS接口列表見附錄2, success: function(res) { // 以鍵值對的形式返回,可用的api值true,不可用爲false // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} } });
備註:checkJsApi接口是客戶端6.0.2新引入的一個預留接口,第一期開放的接口都可不使用checkJsApi來檢測。
請注意不要有誘導分享等違規行爲,對於誘導分享行爲將永久回收公衆號接口權限,詳細規則請查看:朋友圈管理常見問題 。
wx.onMenuShareTimeline({ title: '', // 分享標題 link: '', // 分享連接 imgUrl: '', // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
wx.onMenuShareAppMessage({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連接 imgUrl: '', // 分享圖標 type: '', // 分享類型,music、video或link,不填默認爲link dataUrl: '', // 若是type是music或video,則要提供數據連接,默認爲空 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
wx.onMenuShareQQ({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連接 imgUrl: '', // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
wx.onMenuShareWeibo({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連接 imgUrl: '', // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
wx.onMenuShareQZone({ title: '', // 分享標題 desc: '', // 分享描述 link: '', // 分享連接 imgUrl: '', // 分享圖標 success: function () { // 用戶確認分享後執行的回調函數 }, cancel: function () { // 用戶取消分享後執行的回調函數 } });
wx.chooseImage({ count: 1, // 默認9 sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖,默認兩者都有 sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機,默認兩者都有 success: function (res) { var localIds = res.localIds; // 返回選定照片的本地ID列表,localId能夠做爲img標籤的src屬性顯示圖片 } });
wx.previewImage({ current: '', // 當前顯示圖片的http連接 urls: [] // 須要預覽的圖片http連接列表 });
wx.uploadImage({ localId: '', // 須要上傳的圖片的本地ID,由chooseImage接口得到 isShowProgressTips: 1, // 默認爲1,顯示進度提示 success: function (res) { var serverId = res.serverId; // 返回圖片的服務器端ID } });
備註:上傳圖片有效期3天,可用微信多媒體接口下載圖片到本身的服務器,此處得到的 serverId 即 media_id,參考文檔 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html 目前多媒體文件下載接口的頻率限制爲10000次/天,如須要調高頻率,請郵件weixin-open@qq.com,郵件主題爲【申請多媒體接口調用量】,請對你的項目進行簡單描述,附上產品體驗連接,並對用戶量和使用量進行說明。
wx.downloadImage({ serverId: '', // 須要下載的圖片的服務器端ID,由uploadImage接口得到 isShowProgressTips: 1, // 默認爲1,顯示進度提示 success: function (res) { var localId = res.localId; // 返回圖片下載後的本地ID } });
wx.startRecord();
wx.stopRecord({ success: function (res) { var localId = res.localId; } });
wx.onVoiceRecordEnd({ // 錄音時間超過一分鐘沒有中止的時候會執行 complete 回調 complete: function (res) { var localId = res.localId; } });
wx.playVoice({ localId: '' // 須要播放的音頻的本地ID,由stopRecord接口得到 });
wx.pauseVoice({ localId: '' // 須要暫停的音頻的本地ID,由stopRecord接口得到 });
wx.stopVoice({ localId: '' // 須要中止的音頻的本地ID,由stopRecord接口得到 });
wx.onVoicePlayEnd({ success: function (res) { var localId = res.localId; // 返回音頻的本地ID } });
wx.uploadVoice({ localId: '', // 須要上傳的音頻的本地ID,由stopRecord接口得到 isShowProgressTips: 1, // 默認爲1,顯示進度提示 success: function (res) { var serverId = res.serverId; // 返回音頻的服務器端ID } });
備註:上傳語音有效期3天,可用微信多媒體接口下載語音到本身的服務器,此處得到的 serverId 即 media_id,參考文檔 ../12/58bfcfabbd501c7cd77c19bd9cfa8354.html 目前多媒體文件下載接口的頻率限制爲10000次/天,如須要調高頻率,請郵件weixin-open@qq.com,郵件主題爲【申請多媒體接口調用量】,請對你的項目進行簡單描述,附上產品體驗連接,並對用戶量和使用量進行說明。
wx.downloadVoice({ serverId: '', // 須要下載的音頻的服務器端ID,由uploadVoice接口得到 isShowProgressTips: 1, // 默認爲1,顯示進度提示 success: function (res) { var localId = res.localId; // 返回音頻的本地ID } });
wx.translateVoice({ localId: '', // 須要識別的音頻的本地Id,由錄音相關接口得到 isShowProgressTips: 1, // 默認爲1,顯示進度提示 success: function (res) { alert(res.translateResult); // 語音識別的結果 } });
wx.getNetworkType({ success: function (res) { var networkType = res.networkType; // 返回網絡類型2g,3g,4g,wifi } });
wx.openLocation({ latitude: 0, // 緯度,浮點數,範圍爲90 ~ -90 longitude: 0, // 經度,浮點數,範圍爲180 ~ -180。 name: '', // 位置名 address: '', // 地址詳情說明 scale: 1, // 地圖縮放級別,整形值,範圍從1~28。默認爲最大 infoUrl: '' // 在查看位置界面底部顯示的超連接,可點擊跳轉 });
wx.getLocation({ type: 'wgs84', // 默認爲wgs84的gps座標,若是要返回直接給openLocation用的火星座標,可傳入'gcj02' success: function (res) { var latitude = res.latitude; // 緯度,浮點數,範圍爲90 ~ -90 var longitude = res.longitude; // 經度,浮點數,範圍爲180 ~ -180。 var speed = res.speed; // 速度,以米/每秒計 var accuracy = res.accuracy; // 位置精度 } });
wx.startSearchBeacons({ ticket:"", //搖周邊的業務ticket, 系統自動添加在搖出來的頁面連接後面 complete:function(argv){ //開啓查找完成後的回調函數 } });
備註:如需接入搖一搖周邊功能,請參考:申請開通搖一搖周邊
wx.stopSearchBeacons({ complete:function(res){ //關閉查找完成後的回調函數 } });
wx.onSearchBeacons({ complete:function(argv){ //回調函數,能夠數組形式取得該商家註冊的在周邊的相關設備列表 } });
備註:上述搖一搖周邊接口使用注意事項及更多返回結果說明,請參考:搖一搖周邊獲取設備信息
wx.hideOptionMenu();
wx.showOptionMenu();
wx.closeWindow();
wx.hideMenuItems({ menuList: [] // 要隱藏的菜單項,只能隱藏「傳播類」和「保護類」按鈕,全部menu項見附錄3 });
wx.showMenuItems({ menuList: [] // 要顯示的菜單項,全部menu項見附錄3 });
wx.hideAllNonBaseMenuItem(); // 「基本類」按鈕詳見附錄3
wx.showAllNonBaseMenuItem();
wx.scanQRCode({ needResult: 0, // 默認爲0,掃描結果由微信處理,1則直接返回掃描結果, scanType: ["qrCode","barCode"], // 能夠指定掃二維碼仍是一維碼,默認兩者都有 success: function (res) { var result = res.resultStr; // 當needResult 爲 1 時,掃碼返回的結果 } });
wx.openProductSpecificView({ productId: '', // 商品id viewType: '' // 0.默認值,普通商品詳情頁1.掃一掃商品詳情頁2.小店商品詳情頁 });
微信卡券接口中使用的簽名憑證api_ticket,與步驟三中config使用的簽名憑證jsapi_ticket不一樣,開發者在調用微信卡券JS-SDK的過程當中需依次完成兩次不一樣的簽名,並確保憑證的緩存。
api_ticket 是用於調用微信卡券JS API的臨時票據,有效期爲7200 秒,經過access_token 來獲取。
開發者注意事項:
1.此用於卡券接口簽名的api_ticket與步驟三中經過config接口注入權限驗證配置使用的jsapi_ticket不一樣。
2.因爲獲取api_ticket 的api 調用次數很是有限,頻繁刷新api_ticket 會致使api調用受限,影響自身業務,開發者需在本身的服務存儲與更新api_ticket。
接口調用請求說明
http請求方式: GET https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card
參數說明
參數 | 是否必須 | 說明 |
---|---|---|
access_token | 是 | 調用接口憑證 |
返回數據
數據示例:
{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKdvsdshFKA", "expires_in":7200 }
參數名 | 描述 |
---|---|
errcode | 錯誤碼 |
errmsg | 錯誤信息 |
ticket | api_ticket,卡券接口中籤名所需憑證 |
expires_in | 有效時間 |
wx.chooseCard({ shopId: '', // 門店Id cardType: '', // 卡券類型 cardId: '', // 卡券Id timestamp: 0, // 卡券簽名時間戳 nonceStr: '', // 卡券簽名隨機串 signType: '', // 簽名方式,默認'SHA1' cardSign: '', // 卡券簽名 success: function (res) { var cardList= res.cardList; // 用戶選中的卡券列表信息 } });
參數名 | 必填 | 類型 | 示例值 | 描述 |
---|---|---|---|---|
shopId | 否 | string(24) | 1234 | 門店ID。shopID用於篩選出拉起帶有指定location_list(shopID)的卡券列表,非必填。 |
cardType | 否 | string(24) | GROUPON | 卡券類型,用於拉起指定卡券類型的卡券列表。當cardType爲空時,默認拉起全部卡券的列表,非必填。 |
cardId | 否 | string(32) | p1Pj9jr90_SQRaVqYI239Ka1erk | 卡券ID,用於拉起指定cardId的卡券列表,當cardId爲空時,默認拉起全部卡券的列表,非必填。 |
timestamp | 是 | string(32) | 14300000000 | 時間戳。 |
nonceStr | 是 | string(32) | sduhi123 | 隨機字符串。 |
signType | 是 | string(32) | SHA1 | 簽名方式,目前僅支持SHA1 |
cardSign | 是 | string(64) | abcsdijcous123 | 簽名。 |
cardSign詳見附錄4。開發者特別注意:簽名錯誤會致使拉取卡券列表異常爲空,請仔細檢查參與簽名的參數有效性。
特別提醒
拉取列表僅與用戶本地卡券有關,拉起列表異常爲空的狀況一般有三種:簽名錯誤、時間戳無效、篩選機制有誤。請開發者依次排查定位緣由。
wx.addCard({ cardList: [{ cardId: '', cardExt: '' }], // 須要添加的卡券列表 success: function (res) { var cardList = res.cardList; // 添加的卡券列表信息 } });
cardExt詳見附錄4,值得注意的是,這裏的card_ext參數必須與參與簽名的參數一致,格式爲字符串而不是Object,不然會報簽名錯誤。
wx.openCard({ cardList: [{ cardId: '', code: '' }]// 須要打開的卡券列表 });
wx.chooseWXPay({ timestamp: 0, // 支付簽名時間戳,注意微信jssdk中的全部使用timestamp字段均爲小寫。但最新版的支付後臺生成簽名使用的timeStamp字段名需大寫其中的S字符 nonceStr: '', // 支付簽名隨機串,不長於 32 位 package: '', // 統一支付接口返回的prepay_id參數值,提交格式如:prepay_id=***) signType: '', // 簽名方式,默認爲'SHA1',使用新版支付需傳入'MD5' paySign: '', // 支付簽名 success: function (res) { // 支付成功後的回調函數 } });
備註:prepay_id 經過微信支付統一下單接口拿到,paySign 採用統一的微信支付 Sign 簽名生成方法,注意這裏 appId 也要參與簽名,appId 與 config 中傳入的 appId 一致,即最後參與簽名的參數有appId, timeStamp, nonceStr, package, signType。
微信支付開發文檔:https://pay.weixin.qq.com/wiki/doc/api/index.html
jsapi_ticket
生成簽名以前必須先了解一下jsapi_ticket,jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常狀況下,jsapi_ticket的有效期爲7200秒,經過access_token來獲取。因爲獲取jsapi_ticket的api調用次數很是有限,頻繁刷新jsapi_ticket會致使api調用受限,影響自身業務,開發者必須在本身的服務全局緩存jsapi_ticket 。
成功返回以下JSON:
{ "errcode":0, "errmsg":"ok", "ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA", "expires_in":7200 }
得到jsapi_ticket以後,就能夠生成JS-SDK權限驗證的簽名了。
簽名算法
簽名生成規則以下:參與簽名的字段包括noncestr(隨機字符串), 有效的jsapi_ticket, timestamp(時間戳), url(當前網頁的URL,不包含#及其後面部分) 。對全部待簽名參數按照字段名的ASCII 碼從小到大排序(字典序)後,使用URL鍵值對的格式(即key1=value1&key2=value2…)拼接成字符串string1。這裏須要注意的是全部參數名均爲小寫字符。對string1做sha1加密,字段名和字段值都採用原始值,不進行URL 轉義。
即signature=sha1(string1)。 示例:
步驟1. 對全部待簽名參數按照字段名的ASCII 碼從小到大排序(字典序)後,使用URL鍵值對的格式(即key1=value1&key2=value2…)拼接成字符串string1:
jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value
步驟2. 對string1進行sha1簽名,獲得signature:
0f9de62fce790f9a083d5c99e95740ceb90c27ed
注意事項
如出現invalid signature 等錯誤詳見附錄5常見錯誤及解決辦法。
版本1.0.0接口
基本類
傳播類
保護類
JSSDK使用者請讀這裏,JSAPI用戶能夠跳過
卡券簽名和JSSDK的簽名徹底獨立,二者的算法和意義徹底不一樣,請不要混淆。JSSDK的簽名是使用全部JS接口都須要走的一層鑑權,用以標識調用者的身份,和卡券自己並沒有關係。其次,卡券的簽名考慮到協議的擴展性和簡單的防數據擅改,設計了一套獨立的簽名協議。另外因爲歷史緣由,卡券的JS接口先於JSSDK出現,當時的JSAPI並無鑑權體系,因此在卡券的簽名裏也加上了appsecret/api_ticket這些身份信息,但願開發者理解。
卡券 api_ticket
卡券 api_ticket 是用於調用卡券相關接口的臨時票據,有效期爲 7200 秒,經過 access_token 來獲取。這裏要注意與 jsapi_ticket 區分開來。因爲獲取卡券 api_ticket 的 api 調用次數很是有限,頻繁刷新卡券 api_ticket 會致使 api 調用受限,影響自身業務,開發者必須在本身的服務全局緩存卡券 api_ticket 。
卡券擴展字段cardExt說明
cardExt自己是一個JSON字符串,是商戶爲該張卡券分配的惟一性信息,包含如下字段:
字段 | 是否必填 | 說明 |
---|---|---|
code | 否 | 指定的卡券code碼,只能被領一次。use_custom_code字段爲true的卡券必須填寫,非自定義code沒必要填寫。 |
openid | 否 | 指定領取者的openid,只有該用戶能領取。bind_openid字段爲true的卡券必須填寫,bind_openid字段爲false沒必要填寫。 |
timestamp | 是 | 時間戳,商戶生成從1970年1月1日00:00:00至今的秒數,即當前的時間,且最終須要轉換爲字符串形式;由商戶生成後傳入,不一樣添加請求的時間戳須動態生成,若重複將會致使領取失敗!。 |
nonce_str | 否 | 隨機字符串,由開發者設置傳入,增強簽名的安全性。隨機字符串,不長於32位。推薦使用大小寫字母和數字,不一樣添加請求的nonce須動態生成,若重複將會致使領取失敗!。 |
signature | 是 | 簽名,商戶將接口列表中的參數按照指定方式進行簽名,簽名方式使用SHA1,具體簽名方案參見下文;由商戶按照規範簽名後傳入。 |
簽名說明
強烈建議開發者使用卡券資料包中的簽名工具SDK進行簽名或使用debug工具進行校驗:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign
卡券簽名cardSign說明
調用config 接口的時候傳入參數 debug: true 能夠開啓debug模式,頁面會alert出錯誤信息。如下爲常見錯誤及解決方法:
DEMO頁面:
http://demo.open.weixin.qq.com/jssdk
示例代碼:
http://demo.open.weixin.qq.com/jssdk/sample.zip
備註:連接中包含php、java、nodejs以及python的示例代碼供第三方參考,第三方切記要對獲取的accesstoken以及jsapi_ticket進行緩存以確保不會觸發頻率限制。