前端工做平常爬坑之——單頁面微信開發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標籤顯示，因而乎，直接經過ajax將base64上傳至後端，後端進行2進制解碼就能夠得到圖片了。

其實以前一直在想，既然可以由localIds直接獲取到圖片的base64數據，那麼能不能直接上傳圖片...因爲項目工期問題，一直還沒去測試...若是有大神看到，而且知道，請留言說一下哈，謝謝。