日常爬坑
遇到的情況大致說明:
-
項目基於Vue2全家桶實現,
vue-router
控制前端路由,路由模式是History
(主要是領導追求太高,覺得hash帶#號太丑,然后遇到了小坑...),主要是服務於微信端,於是乎自然要使用jssdk。 -
目前實現的功能其實很簡單,只是點擊然后調用jssdk,上傳圖片至自己服務器,成功的情況下返回一個可以使用的圖片url
關於jssdk配置錯誤
好吧,其實最大的問題是,我在此之前根本沒有接觸過微信端相關,自然沒啥經驗,於是乎且行且努力吧。
要調用jssdk第一步,自然是引入jssdk文件后,配置jssdk然后注入頁面。按照文檔的需求,配置中需要的數據是后端進行運算后得到的,所以前端通過ajax將部分進行運算必要的數據傳給后端,然后返回進行配置所需要的數據就可以了。
進行實際配置時,由於在文檔看到了一段紅色的文字....尤其是我加粗的這段文字
所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調用(同一個url僅需調用一次,對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現web app的頁面會導致簽名失敗,此問題會在Android6.2中修復)。
我當時假裝思考了一下....既然文檔說在每次url變化時進行調用,那么我就想當然的在Vue-router
的鈎子router.beforeEach
中調用ajax,進行獲取數據,配置jssdk(以上操作封裝在函數內),這么不帶腦的做法導致的是刷新頁面時不會調用...於是改成在組件生命周期鈎子中調用,不再監聽路由變化。
理想是好的,計划也是完美的,進行測試時總是出錯,由外部鏈接直接進入,獲取本頁面刷新后jssdk都是正常使用的,然而一旦退出頁面,由微信公眾號入口重新進入,那么就會遭遇invalid signature
的錯誤,jssdk配置失敗。
經過數小時后,終於發現:
單頁面的情況下,ios(微信)的url永遠不變,簡單來說,就是單頁面應用,無論前端路由怎么進行變化,但是微信始終認為你的路由沒有變化....是最初進入網站時的url,所以進行配置單頁面應用進行配置jssdk時,只需要在初始化應用時,獲取到進入應用時的url,進行一次ajax請求,然后配置jssdk就可以了....只需要第一次....
重要的事情再強調一次,單頁面應用的情況下,微信會判斷最初進入應用的url作為整個單頁面應用的根url,進入應用后無論前端路由怎么修改,微信瀏覽器始終認為最初進入應用的url是當前的url。
以上的問題,暫時沒有在安卓中發現,然后如果不希望出現這樣的問題,可以采用比較丑的hash模式路由,因為在hash模式下,會忽略掉#號后面的內容。
關於通過jssdk圖片選擇接口,不經過微信臨時服務器,直接傳遞圖片至自己服務器。
目前采用的方法很簡單,但需要后端支持。
調用wx.chooseImage
獲取到 localIds
(注意:是數組)然后調用 wx.getLocalImgData
獲取到圖片的base64
數據,文檔上說可以直接用img
標簽顯示,於是乎,直接通過ajax
將base64
上傳至后端,后端進行2進制解碼就可以獲得圖片了。
其實之前一直在想,既然能夠由localIds直接獲取到圖片的base64數據,那么能不能直接上傳圖片...由於項目工期問題,一直還沒去測試...如果有大神看到,並且知道,請留言說一下哈,謝謝。