前端工作日常爬坑之——單頁面微信開發Jssdk相關,以及jssdk圖片直傳自己服務器的實現。


日常爬坑

遇到的情況大致說明:

  • 項目基於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標簽顯示,於是乎,直接通過ajaxbase64上傳至后端,后端進行2進制解碼就可以獲得圖片了。

其實之前一直在想,既然能夠由localIds直接獲取到圖片的base64數據,那么能不能直接上傳圖片...由於項目工期問題,一直還沒去測試...如果有大神看到,並且知道,請留言說一下哈,謝謝。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM