16.VUE微信分享

先引入JS 文件


this.wxShare()? 在created里調用


首先登陸微信公眾號??


點擊分享朋友圈
當前頁面下拉有步驟

JSSDK使用步驟

步驟一:綁定域名

先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注:登錄后可在“開發者中心”查看對應的接口權限。

步驟二:引入JS文件

在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

備注:支持使用 AMD/CMD 標準模塊加載方法加載

步驟三:通過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: '',// 必填,簽名

jsApiList: [] // 必填,需要使用的JS接口列表

});

簽名算法見文末的附錄1,所有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,其值格式如下:

調用成功時:"xxx:ok" ,其中xxx為調用的接口名

用戶取消時:"xxx:cancel",其中xxx為調用的接口名

調用失敗時:其值為具體錯誤信息

基礎接口

判斷當前客戶端版本是否支持指定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: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致

imgUrl: '', // 分享圖標

success: function () {

// 用戶點擊了分享后執行的回調函數

},

獲取“分享給朋友”按鈕點擊狀態及自定義分享內容接口(即將廢棄)

wx.onMenuShareAppMessage({

title: '', // 分享標題

desc: '', // 分享描述

link: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致

imgUrl: '', // 分享圖標

type: '', // 分享類型,music、video或link,不填默認為link

dataUrl: '', // 如果type是music或video,則要提供數據鏈接,默認為空

success: 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。

下載圖片接口

wx.downloadImage({

serverId: '', // 需要下載的圖片的服務器端ID,由uploadImage接口獲得

isShowProgressTips: 1, // 默認為1,顯示進度提示

success: function (res) {

var localId = res.localId; // 返回圖片下載后的本地ID

}

});

獲取本地圖片接口

wx.getLocalImgData({

localId: '', // 圖片的localID

success: function (res) {

var localData = res.localData; // localData是圖片的base64數據,可以用img標簽顯示

}

});

備注:此接口僅在 iOS WKWebview 下提供,用于兼容 iOS WKWebview 不支持 localId 直接顯示圖片的問題。具體可參考《iOS網頁開發適配指南

音頻接口

開始錄音接口

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,參考文檔 .目前多媒體文件下載接口的頻率限制為10000次/天,如需要調高頻率,請登錄微信公眾平臺,在開發 - 接口權限的列表中,申請提高臨時上限。

下載語音接口

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.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錯誤信息

ticketapi_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,開發者若調用接口報簽名錯誤、已領完等異常情況可以參照:卡券簽名錯誤排查方法

查看微信卡包中的卡券接口

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

快速輸入

共享收貨地址接口

wx.openAddress({

success: function (res) {

var userName = res.userName; // 收貨人姓名

var postalCode = res.postalCode; // 郵編

var provinceName = res.provinceName; // 國標收貨地址第一級地址(省)

var cityName = res.cityName; // 國標收貨地址第二級地址(市)

var countryName = res.countryName; // 國標收貨地址第三級地址(國家)

var detailInfo = res.detailInfo; // 詳細收貨地址信息

var nationalCode = res.nationalCode; // 收貨地址國家碼

var telNumber = res.telNumber; // 收貨人手機號碼

}

});

備注:

微信地址共享使用的數據字段包括:

收貨人姓名

地區,省市區三級

詳細地址

郵編

聯系電話

其中,地區對應是國標三級地區碼,如“廣東省-廣州市-天河區”,對應的郵編是是510630。詳情參考鏈接:http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201401/t20140116_501070.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×tamp=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碼,只能被領一次。自定義code模式的卡券必須填寫,非自定義code和預存code模式的卡券不必填寫。詳情見: 是否自定義code碼

openid否是指定領取者的openid,只有該用戶能領取。bind_openid字段為true的卡券必須填寫,bind_openid字段為false不必填寫。

timestamp是是時間戳,商戶生成從1970年1月1日00:00:00至今的秒數,即當前的時間,且最終需要轉換為字符串形式;由商戶生成后傳入,不同添加請求的時間戳須動態生成,若重復將會導致領取失敗!。

nonce_str否是隨機字符串,由開發者設置傳入, 加強安全性(若不填寫可能被重放請求) 。隨機字符串,不長于32位。推薦使用大小寫字母和數字,不同添加請求的nonce須動態生成,若重復將會導致領取失敗。

fixed_begintimestamp否否卡券在第三方系統的實際領取時間,為東八區時間戳(UTC+8,精確到秒)。當卡券的有效期類型為 DAT E_TYPE_FIX_TERM時專用,標識卡券的實際生效時間,用于解決商戶系統內起始時間和領取時間不同步的問題。

outer_str否否領取渠道參數,用于標識本次領取的渠道值。

signature是-簽名,商戶將接口列表中的參數按照指定方式進行簽名,簽名方式使用SHA1,具體簽名方案參見下文;由商戶按照規范簽名后傳入。

簽名說明

1.將 api_ticket、timestamp、card_id、code、openid、nonce_str的value值進行字符串的字典序排序。

2.將所有參數字符串拼接成一個字符串進行sha1加密,得到signature。

3.signature中的timestamp,nonce字段和card_ext中的timestamp,nonce_str字段必須保持一致。

4.code=1434008071,timestamp=1404896688,card_id=pjZ8Yt1XGILfi-FUsewpnnolGgZk, api_ticket=ojZ8YtyVyr30HheH3CM73y7h4jJE ,nonce_str=123 則signature=sha1(12314048966881434008071ojZ8YtyVyr30HheH3CM73y7h4jJEpjZ8Yt1XGILfi-FUsewpnnolGgZk)=f137ab68b7f8112d20ee528ab6074564e2796250。

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

卡券簽名cardSign說明

1.將 api_ticket、appid、location_id、timestamp、nonce_str、card_id、card_type的value值進行字符串的字典序排序。

2.將所有參數字符串拼接成一個字符串進行sha1加密,得到cardSign。

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

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

1.invalid url domain當前頁面所在域名與使用的appid沒有綁定,請確認正確填寫綁定的域名,僅支持80(http)和443(https)兩個端口,因此不需要填寫端口號(一個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備案數據同步有一天延遲,所以請在第二日綁定

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、下載weixin-js-sdk 的依賴 cnpm install weixin-js-sdk --save 2...
    fangzy0723閱讀 953評論 0 1
  • 微信公眾號開發 ?前面做過 HG 項目的微信端,里面用到微信掃碼、支付、圖片選取、拍照、分享的功能。用到 weix...
    Ghnhxg閱讀 545評論 1 1
  • 久違的新文章發布。。我的鍋這篇文章是在寫的太長,可以慢慢看一下,偽代碼,畢竟簡書上面,望大家見諒!!!先看官方文檔...
    wyatt_plus閱讀 1,654評論 0 2
  • 微信服務號開發 整體流程 域名報備,服務器搭建 Python開發環境和項目的初始化搭建; 微信公眾號注冊及開發模式...
    飛行員suke閱讀 4,593評論 0 14
  • ???????? ????????????????????????????????...
    用綠小草閱讀 193評論 1 0