隨著微信的升級,關于微信的一些jssdk接口需通過簽名之后才可以使用,今天主要與大家講解一下前端如何調用jssdk接口,以及如何來簽名實現的。以及還有一些接口配置。
首先與大家講解一下微信js-sdk的的一些基本介紹:
微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。
通過使用微信JS-SDK,網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力,同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力,為微信用戶提供更優質的網頁體驗。
本次主要講解的內容:如何自定義分享到朋友圈,朋友,屏蔽分享到qq,qq空間等功能。
JSSDK使用步驟:
一:綁定域名
首先登錄微信公眾平臺,進入"公眾號"里的功能設置,填寫"js接口安全域名"。主意:1.要查看自己的公眾號是否有您需要的相對的開發權限
2.js接口安全域名,就是你項目發布的地方,還有一定要把.txt文件放到你前端項目的根目錄。如果在配置過程中不清楚可以聯系我,cyh_nini
二、引入JS文件
在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.0.0.js
請注意,如果你的頁面啟用了https,務必引入https://res.wx.qq.com/open/js/jweixin-1.0.0.js,否則將無法在iOS9.0以上系統中成功使用JSSDK
三、通過config接口注入權限驗證配置
微信源碼配置介紹如下:
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函數中。
});
wx.error(function(res){
// config信息驗證失敗會執行error函數,如簽名過期導致驗證失敗,具體錯誤信息可以打開config的debug模式查看,也可以在返回的res參數中查看,對于SPA可以在這里更新簽名。
});
前端代碼就完了,但當你們寫上這些代碼的時候,你會發現一直報錯:
errMsg:config:invalid signature
按微信的說法是按照這幾種做法:
確認簽名算法正確,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign頁面工具進行校驗。
確認config中nonceStr(js中駝峰標準大寫S), timestamp與用以簽名中的對應noncestr, timestamp一致。
確認url是頁面完整的url(請在當前頁面alert(location.href.split('#')[0])確認),包括'http(s)://'部分,以及'?'后面的GET參數部分,但不包括'#'hash后面的部分。
確認 config 中的 appid 與用來獲取 jsapi_ticket 的 appid 一致。
確保一定緩存access_token和jsapi_ticket。
確保你獲取用來簽名的url是動態獲取的,動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到后臺簽名,前端需要用js獲取當前頁面除去'#'hash部分的鏈接(可用location.href.split('#')[0]獲取,而且需要encodeURIComponent),因為頁面一旦分享,微信客戶端會在你的鏈接末尾加入其它參數,如果不是動態獲取當前鏈接,將導致分享后的頁面簽名失敗。
可是我都是按步驟來的,簽名工具也驗證簽名沒問題,這6個都確認通過了,但一直不知道錯在哪里。
最后才知道,原來是通過url去獲取簽名,就是因為url沒有encode,因為js-sdk接口去驗證的你簽名是否正確時,它是把url進行encode了,真是坑呀,搞了一天才發現是這么這原因。不說了,直接上代碼:
這段代碼是通過把動態生成的url傳給后臺,讓后臺去生成處理相應的簽名算法。
重點提醒:
Token請求每天也是有上限的,每天請求最多2000次,超過了次數將無法在此請求,一旦超出,可以在公眾號管理后臺-開發-接口權限-獲取access_token的操作哪里重置,不過每個月只有10此機會
有一個網頁調試工具,來查看token的,地址: