微信JS-SDK說明文檔

目錄

概述

微信JS-SDK是微信公衆平臺面向網頁開發者提供的基於微信內的網頁開發工具包。php

經過使用微信JS-SDK,網頁開發者可藉助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時能夠直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,爲微信用戶提供更優質的網頁體驗。html

此文檔面向網頁開發者介紹微信JS-SDK如何使用及相關注意事項。前端

JSSDK使用步驟

步驟一:綁定域名

先登陸微信公衆平臺進入「公衆號設置」的「功能設置」裏填寫「JS接口安全域名」。java

備註:登陸後可在「開發者中心」查看對應的接口權限。node

步驟二:引入JS文件

在須要調用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

步驟三:經過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
});

步驟四:經過ready接口處理成功驗證

wx.ready(function(){

    // config信息驗證後會執行ready方法,全部接口調用都必須在config接口得到結果以後,config是一個客戶端的異步操做,因此若是須要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則能夠直接調用,不須要放在ready函數中。
});

 

步驟五:經過error接口處理失敗驗證

wx.error(function(res){

    // config信息驗證失敗會執行error函數,如簽名過時致使驗證失敗,具體錯誤信息能夠打開config的debug模式查看,也能夠在返回的res參數中查看,對於SPA能夠在這裏更新簽名。

});

接口調用說明

全部接口經過wx對象(也可以使用jWeixin對象)來調用,參數是一個對象,除了每一個接口自己須要傳的參數以外,還有如下通用參數:

  1. success:接口調用成功時執行的回調函數。
  2. fail:接口調用失敗時執行的回調函數。
  3. complete:接口調用完成時執行的回調函數,不管成功或失敗都會執行。
  4. cancel:用戶點擊取消時的回調函數,僅部分有用戶取消操做的api纔會用到。
  5. trigger: 監聽Menu中的按鈕點擊時觸發的方法,該方法僅支持Menu中的相關接口。

備註:不要嘗試在trigger中使用ajax異步請求修改本次分享的內容,由於客戶端分享操做是一個同步操做,這時候使用ajax的回包會尚未返回。


以上幾個函數都帶有一個參數,類型爲對象,其中除了每一個接口自己返回的數據以外,還有一個通用屬性errMsg,其值格式以下:

  1. 調用成功時:"xxx:ok" ,其中xxx爲調用的接口名
  2. 用戶取消時:"xxx:cancel",其中xxx爲調用的接口名
  3. 調用失敗時:其值爲具體錯誤信息

基礎接口

判斷當前客戶端版本是否支持指定JS接口

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 () { 
        // 用戶取消分享後執行的回調函數
    }
});

獲取「分享到QQ」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareQQ({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連接
    imgUrl: '', // 分享圖標
    success: function () { 
       // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
       // 用戶取消分享後執行的回調函數
    }
});

獲取「分享到騰訊微博」按鈕點擊狀態及自定義分享內容接口

wx.onMenuShareWeibo({
    title: '', // 分享標題
    desc: '', // 分享描述
    link: '', // 分享連接
    imgUrl: '', // 分享圖標
    success: function () { 
       // 用戶確認分享後執行的回調函數
    },
    cancel: function () { 
        // 用戶取消分享後執行的回調函數
    }
});

獲取「分享到QQ空間」按鈕點擊狀態及自定義分享內容接口

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; // 位置精度
    }
});

 

搖一搖周邊

開啓查找周邊ibeacon設備接口

wx.startSearchBeacons({
	ticket:"",  //搖周邊的業務ticket, 系統自動添加在搖出來的頁面連接後面
	complete:function(argv){
		//開啓查找完成後的回調函數
	}
});

備註:如需接入搖一搖周邊功能,請參考:申請開通搖一搖周邊

關閉查找周邊ibeacon設備接口

wx.stopSearchBeacons({
	complete:function(res){
		//關閉查找完成後的回調函數
	}
});

監聽周邊ibeacon設備接口

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

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

附錄1-JS-SDK使用權限簽名算法

jsapi_ticket

生成簽名以前必須先了解一下jsapi_ticket,jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常狀況下,jsapi_ticket的有效期爲7200秒,經過access_token來獲取。因爲獲取jsapi_ticket的api調用次數很是有限,頻繁刷新jsapi_ticket會致使api調用受限,影響自身業務,開發者必須在本身的服務全局緩存jsapi_ticket 。

  1. 參考如下文檔獲取access_token(有效期7200秒,開發者必須在本身的服務全局緩存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
  2. 用第一步拿到的access_token 採用http GET方式請求得到jsapi_ticket(有效期7200秒,開發者必須在本身的服務全局緩存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

成功返回以下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)。 示例:

  • noncestr=Wm3WZYTPz0wzccnW
  • jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg
  • timestamp=1414587457
  • url=http://mp.weixin.qq.com?params=value


步驟1. 對全部待簽名參數按照字段名的ASCII 碼從小到大排序(字典序)後,使用URL鍵值對的格式(即key1=value1&key2=value2…)拼接成字符串string1:

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


步驟2. 對string1進行sha1簽名,獲得signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

注意事項

  1. 簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
  2. 簽名用的url必須是調用JS接口頁面的完整URL。
  3. 出於安全考慮,開發者必須在服務器端實現簽名的邏輯。


如出現invalid signature 等錯誤詳見附錄5常見錯誤及解決辦法。

附錄2-全部JS接口列表

版本1.0.0接口

  • onMenuShareTimeline
  • onMenuShareAppMessage
  • onMenuShareQQ
  • onMenuShareWeibo
  • onMenuShareQZone
  • startRecord
  • stopRecord
  • onVoiceRecordEnd
  • playVoice
  • pauseVoice
  • stopVoice
  • onVoicePlayEnd
  • uploadVoice
  • downloadVoice
  • chooseImage
  • previewImage
  • uploadImage
  • downloadImage
  • translateVoice
  • getNetworkType
  • openLocation
  • getLocation
  • hideOptionMenu
  • showOptionMenu
  • hideMenuItems
  • showMenuItems
  • hideAllNonBaseMenuItem
  • showAllNonBaseMenuItem
  • closeWindow
  • scanQRCode
  • chooseWXPay
  • openProductSpecificView
  • addCard
  • chooseCard
  • openCard

附錄3-全部菜單項列表

基本類

  • 舉報: "menuItem:exposeArticle"
  • 調整字體: "menuItem:setFont"
  • 日間模式: "menuItem:dayMode"
  • 夜間模式: "menuItem:nightMode"
  • 刷新: "menuItem:refresh"
  • 查看公衆號(已添加): "menuItem:profile"
  • 查看公衆號(未添加): "menuItem:addContact"

傳播類

  • 發送給朋友: "menuItem:share:appMessage"
  • 分享到朋友圈: "menuItem:share:timeline"
  • 分享到QQ: "menuItem:share:qq"
  • 分享到Weibo: "menuItem:share:weiboApp"
  • 收藏: "menuItem:favorite"
  • 分享到FB: "menuItem:share:facebook"
  • 分享到 QQ 空間/menuItem:share:QZone

保護類

  • 編輯標籤: "menuItem:editTag"
  • 刪除: "menuItem:delete"
  • 複製連接: "menuItem:copyUrl"
  • 原網頁: "menuItem:originPage"
  • 閱讀模式: "menuItem:readMode"
  • 在QQ瀏覽器中打開: "menuItem:openWithQQBrowser"
  • 在Safari中打開: "menuItem:openWithSafari"
  • 郵件: "menuItem:share:email"
  • 一些特殊公衆號: "menuItem:share:brand"

附錄4-卡券擴展字段及簽名生成算法

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 。

  1. 參考如下文檔獲取access_token(有效期7200秒,開發者必須在本身的服務全局緩存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html
  2. 用第一步拿到的access_token 採用http GET方式請求得到卡券 api_ticket(有效期7200秒,開發者必須在本身的服務全局緩存卡券 api_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card

 

卡券擴展字段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,具體簽名方案參見下文;由商戶按照規範簽名後傳入。

簽名說明

  1. 將 api_ticket(特別說明:api_ticket 相較 appsecret 安全性更高,同時兼容老版本文檔中使用的 appsecret 做爲簽名憑證。)、timestamp、card_id、code、openid、nonce_str的value值進行字符串的字典序排序。
  2. 將全部參數字符串拼接成一個字符串進行sha1加密,獲得signature。
  3. signature中的timestamp,nonce字段和card_ext中的timestamp,nonce_str字段必須保持一致。
  4. code=jonyqin_1434008071,timestamp=1404896688,card_id=pjZ8Yt1XGILfi-FUsewpnnolGgZk, api_ticket=ojZ8YtyVyr30HheH3CM73y7h4jJE ,nonce_str=jonyqin 則signature=sha1(1404896688jonyqinjonyqin_1434008071ojZ8YtyVyr30HheH3CM73y7h4jJE pjZ8Yt1XGILfi-FUsewpnnolGgZk)=6b81fbf6af16e856334153b39737556063c82689。

強烈建議開發者使用卡券資料包中的簽名工具SDK進行簽名或使用debug工具進行校驗:http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign

卡券簽名cardSign說明

  1. 將 api_ticket(特別說明:api_ticket 相較 appsecret 安全性更高,同時兼容老版本文檔中使用的 appsecret 做爲簽名憑證。)、app_id、location_id、timestamp、nonce_str、card_id、card_type的value值進行字符串的字典序排序。
  2. 將全部參數字符串拼接成一個字符串進行sha1加密,獲得cardSign。

附錄5-常見錯誤及解決方法

調用config 接口的時候傳入參數 debug: true 能夠開啓debug模式,頁面會alert出錯誤信息。如下爲常見錯誤及解決方法:

  1. invalid url domain當前頁面所在域名與使用的appid沒有綁定,請確認正確填寫綁定的域名,若是使用了端口號,則配置的綁定域名也要加上端口號(一個appid能夠綁定三個有效域名,見 目錄1.1.1)。
  2. invalid signature簽名錯誤。建議按以下順序檢查:
    1. 確認簽名算法正確,可用 http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 頁面工具進行校驗。
    2. 確認config中nonceStr(js中駝峯標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致。
    3. 確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認),包括'http(s)://'部分,以及'?'後面的GET參數部分,但不包括'#'hash後面的部分。
    4. 確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
    5. 確保必定緩存access_token和jsapi_ticket。
    6. 確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。若是是html的靜態頁面在前端經過ajax將url傳到後臺簽名,前端須要用js獲取當前頁面除去'#'hash部分的連接(可用location.href.split('#')[0]獲取,並且須要encodeURIComponent),由於頁面一旦分享,微信客戶端會在你的連接末尾加入其它參數,若是不是動態獲取當前連接,將致使分享後的頁面簽名失敗。
  3. the permission value is offline verifying這個錯誤是由於config沒有正確執行,或者是調用的JSAPI沒有傳入config的jsApiList參數中。建議按以下順序檢查:
    1. 確認config正確經過。
    2. 若是是在頁面加載好時就調用了JSAPI,則必須寫在wx.ready的回調中。
    3. 確認config的jsApiList參數包含了這個JSAPI。
  4. permission denied該公衆號沒有權限使用這個JSAPI,或者是調用的JSAPI沒有傳入config的jsApiList參數中(部分接口須要認證以後才能使用)。
  5. function not exist當前客戶端版本不支持該接口,請升級到新版體驗。
  6. 爲何6.0.1版本config:ok,可是6.0.2版本以後不ok(由於6.0.2版本以前沒有作權限驗證,因此config都是ok,但這並不意味着你config中的簽名是OK的,請在6.0.2檢驗是否生成正確的簽名以保證config在高版本中也ok。)
  7. 在iOS和Android都沒法分享(請確認公衆號已經認證,只有認證的公衆號才具備分享相關接口權限,若是確實已經認證,則要檢查監聽接口是否在wx.ready回調函數中觸發)
  8. 服務上線以後沒法獲取jsapi_ticket,本身測試時沒問題。(由於access_token和jsapi_ticket必需要在本身的服務器緩存,不然上線後會觸發頻率限制。請確保必定對token和ticket作緩存以減小2次服務器請求,不只能夠避免觸發頻率限制,還加快大家本身的服務速度。目前爲了方便測試提供了1w的獲取量,超過閥值後,服務將再也不可用,請確保在服務上線前必定全局緩存access_token和jsapi_ticket,二者有效期均爲7200秒,不然一旦上線觸發頻率限制,服務將再也不可用)。
  9. uploadImage怎麼傳多圖(目前只支持一次上傳一張,多張圖片需等前一張圖片上傳以後再調用該接口)
  10. 無法對本地選擇的圖片進行預覽(chooseImage接口自己就支持預覽,不須要額外支持)
  11. 經過a連接(例如先經過微信受權登陸)跳轉到b連接,invalid signature簽名失敗(後臺生成簽名的連接爲使用jssdk的當前連接,也就是跳轉後的b連接,請不要用微信登陸的受權連接進行簽名計算,後臺簽名的url必定是使用jssdk的當前頁面的完整url除去'#'部分)
  12. 出現config:fail錯誤(這是因爲傳入的config參數不全致使,請確保傳入正確的appId、timestamp、nonceStr、signature和須要使用的jsApiList)
  13. 如何把jsapi上傳到微信的多媒體資源下載到本身的服務器(請參見文檔中uploadVoice和uploadImage接口的備註說明)
  14. Android經過jssdk上傳到微信服務器,第三方再從微信下載到本身的服務器,會出現雜音(微信團隊已經修復此問題,目先後臺已優化上線)
  15. 綁定父級域名,是否其子域名也是可用的(是的,合法的子域名在綁定父域名以後是徹底支持的)
  16. 在iOS微信6.1版本中,分享的圖片外鏈不顯示,只能顯示公衆號頁面內鏈的圖片或者微信服務器的圖片,已在6.2中修復
  17. 是否須要對低版本本身作兼容(jssdk都是兼容低版本的,不須要第三方本身額外作更多工做,但有的接口是6.0.2新引入的,只有新版纔可調用)
  18. 該公衆號支付簽名無效,沒法發起該筆交易(請確保你使用的jweixin.js是官方線上版本,不只能夠減小用戶流量,還有可能對某些bug進行修復,拷貝到第三方服務器中使用,官方將不對其出現的任何問題提供保障,具體支付簽名算法可參考 JSSDK微信支付一欄
  19. 目前Android微信客戶端不支持pushState的H5新特性,因此使用pushState來實現web app的頁面會致使簽名失敗,此問題已在Android6.2中修復
  20. uploadImage在chooseImage的回調中有時候Android會不執行,Android6.2會解決此問題,若需支持低版本能夠把調用uploadImage放在setTimeout中延遲100ms解決
  21. require subscribe錯誤說明你沒有訂閱該測試號,該錯誤僅測試號會出現
  22. getLocation返回的座標在openLocation有誤差,由於getLocation返回的是gps座標,openLocation打開的騰訊地圖爲火星座標,須要第三方本身作轉換,6.2版本開始已經支持直接獲取火星座標
  23. 查看公衆號(未添加): "menuItem:addContact"不顯示,目前僅有從公衆號傳播出去的連接才能顯示,來源必須是公衆號
  24. ICP備案數據同步有一天延遲,因此請在第二日綁定

附錄6-DEMO頁面和示例代碼

DEMO頁面:

http://demo.open.weixin.qq.com/jssdk

示例代碼:

http://demo.open.weixin.qq.com/jssdk/sample.zip

備註:連接中包含php、java、nodejs以及python的示例代碼供第三方參考,第三方切記要對獲取的accesstoken以及jsapi_ticket進行緩存以確保不會觸發頻率限制。

相關文章
相關標籤/搜索