最近一段時間由於業務需要在搞微信公眾號開發,業務里面涉及到了微信公眾號開發JS-SDK開發中掃一掃功能,由於沒有之前沒有這方面經驗,首先肯定先仔細閱讀微信開發文檔了。
首先先說一下JS-SDK微信掃一掃功能接入方法:
開始時接入步驟,這里略帶提一下,微信開發文檔里面講的很詳細可以參考着寫:
這里我重點說一下實現過程:
首先是頁面上要引入相應的js文件,一行代碼就足夠了:
(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
然后通過config接口注入權限驗證配置:
首先看微信開發官方文檔上介紹的:
這里需要從服務器端網頁面傳遞的參數有timestamp、nonceStr和signature而appId和jsApiList都是固定的,這里直接寫后台方法中寫。首先,編寫服務器端代碼,生成timestamp、nonceStr和signature。
在生成timestamp、nonceStr和signature的時候有兩個參數需要獲取 一個是access_token,另一個是jsapi_ticket。
access_token的獲取需要AppId和AppSecret,獲取位置如下:
獲取地址如下,發送GET請求
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
獲取到access_token的方法在這里就不說了 這個網上案例很多 一般是不會出什么大錯的 只要appId和appsercret正確,地址正確就OK。
重點說一下jsapi_ticket的獲取(這里我只說一下我自己的獲取方法:):
在通用工具類CommonUtil里面寫個獲取jsapi_ticket的方法:
其的的JSAPI_TICKET是我定義的獲取jsapi_ticket的地址:
public final static String JSAPI_TICKET = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
方法:
然后根據獲取到的access_token 調用此方法可獲取到jsapi_ticket。
但是:
確保一定緩存access_token和jsapi_ticket。
access_token是公眾號的全局唯一票據,公眾號調用各接口時都需使用access_token。開發者需要進行妥善保存。
access_token和jsapi_ticket必須要在自己的服務器緩存,否則上線后會觸發頻率限制。請確保一定對token和ticket做緩存以減少2次服務器請求,不僅可以避免觸發頻率限制,請確保在服務上線前一定全局緩存access_token和jsapi_ticket,兩者有效期均為7200秒,否則一旦上線觸發頻率限制,服務將不再可用。
詳細的請仔細閱讀文檔。
獲得jsapi_ticket之后,就可以生成JS-SDK權限驗證的簽名了。
上面的是微信開發文檔中的簽名生成規則:
具體生成過程代碼可以不用自己寫,微信開發文檔提供的有demo示例:
是什么語言直接拿過來用就可以了!可以一邊寫一邊琢磨簽名算法的實現!
具體代碼我就不貼出來了,基本上和上面的demo寫的一樣。
然后是Controller層的代碼:
其中的JsApiTicketUtil.getJsApiTicket();是我從緩存中拿到的jsapi_ticket的鍵值對。
JsSignUtil.sign(jsapi_ticket,url); 就是demo中的獲取簽名的方法。
后台方法基本上完成了,接下來就是頁面上的了:
在config中進行配置:
由於后台中生成的簽名時間隨機字符串什么的都是我在前台頁面上用ajax獲取到的,所有我寫的配置為:
這個示例是我寫微信掃一掃的示例。其中的jsApiList可以有很多值,微信開發文檔上都用。
然后寫一個簡單的掃一掃按鈕 寫個觸發事件:
接下來就是對自己寫的進行測試了:
頁面上功能按部就班的寫完點擊掃一掃沒反應???只好把配置文件config的debug打開了。
發現每次打開頁面總是會提示簽名無效:
幾乎整整一兩天時間都再整這個bug,現在已經解決了,接下來我說說解決過程:
首先肯定是先看微信開發文檔上給出的解決辦法,這個也是一般非常常用的解決辦法:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
截圖:
如果出現簽名無效 首先請按照官網文檔上的方法一步步去排查,當然,排查過N次的同學就不用看了。
如果測試N次總是出現簽名無效 ,那肯定是簽名參數有問題。
如果用簽名頁面工具校驗校驗簽名確實無誤的話 ,那就是url的問題了。
微信開發文檔常見錯誤報錯上有這樣一句話:
所以url要動態獲取:可用location.href.split('#')[0]獲取,而且需要encodeURIComponent,例如我寫的:
然后后台獲得還需要轉換回來:
這是url的問題。一般這樣寫的話基本不會出什么錯誤了,要是還是出現簽名無效,請繼續往下看;
請確認你的AppId和AppSecret正確性;
確定通過AppId和AppSecret獲取到的access_token全局緩存了並且有效。
確認獲取到的jsapi_ticket是有效的 用到的access_token和appid是正確的。
確認獲取access_token和jsapi_ticket的地址為:
請一定要仔細檢查這個地址url,最好和官網文檔上的對着一遍,看清楚是獲取什么的地址欄!
最后再補充一點:
在查找錯誤的時候,我在百度上看到有人這樣說:
上面的兩個方法:是簽名算法中的隨機數和時間戳,首先請注意時間單位是秒 不是毫秒,其次是上面的隨機數,官網文檔上用的UUID獲取的隨機數,但是網上有人說必須是16位的,我這里寫的也是16位的,如果經過上面的還報錯的話
可以試試是不是這個的問題。
給個微信開發文檔的路徑:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1445241432