最近又在vue中搗鼓了下微信公眾號api的接入，不得不說這里邊水是真的深啊，上次分享了微信授權登錄和js-sdk簽名的部分，其中很多朋友私信我表示了疑惑，今天我就再次嘗試理順一下這里邊的坑吧：

微信JS-SDK是微信公眾平臺面向網頁開發者提供的基于微信內的網頁開發工具包。
通過使用微信JS-SDK，網頁開發者可借助微信高效地使用拍照、選圖、語音、位置等手機系統的能力，同時可以直接使用微信分享、掃一掃、卡券、支付等微信特有的能力，為微信用戶提供更優質的網頁體驗。

分享頁面到朋友圈

上文是從官方文檔中摘出來的，由此可見，我們如果要實現在公眾號的內嵌h5中實現微信分享，支付等功能，就得引入js-sdk。
使用js-sdk有一個關鍵的環節，那就是通過config接口注入權限驗證配置，而配置中有個signature參數是需要借助服務端獲取的，這里就不過多探討了，大家通過官方文檔可以深入了解。

Hash or History?

上篇文章，我推薦大家在vue中配置vue-router使用hash模式，那么hash模式和history模式到底有什么差別呢？我舉個栗子，假設我們都通過http://domain.com進入，然后跳轉到路由為/jssdk的頁面需要用到jssdk，那么實際js-sdk進行簽名校驗時所獲取的當前頁面url在ios和andrioid是不同的，這里我通過表格展示出來：

真相都在表格里，我表達能力不好恕我偷個懶23333333。

如果閣下沒有接入分享指定頁面的需求的話，hash模式很方便，但是無奈筆者需要接微信分享，如果使用hash模式，分享出去的地址，微信會自動處理掉#后邊的部分，那么我就沒法分享指定頁面到朋友圈或者給朋友了。

怎么辦呢，只能硬著腦子解決history問題咯，其實也好解決，就是iOS需要使用第一次進入頁面的URL獲取簽名，安卓每次路由切換都重新配置簽名。我這里羅列兩個方案：

1.入口文件中記錄頁面URL，在頁面組件創建完成后，ios獲取記錄的url進行簽名，android獲取當前路由（window.location.href.split('#')[0]），請移步我的上一篇博客

2.入口文件中直接進行簽名和注入配置，僅針對android在每次切換路由時再重新簽名和配置。該方案適合所有頁面都需要用到js-sdk的情況

問題記錄

現列出我在搗鼓過程中遇到的一個個bug：

1.安卓設備能分享ios設備不能分享；
出現該問題的原因就是因為采用了history模式，且沒有考慮到ios校驗簽名獲取的url是第一次訪問的url而使用了切換后的url。

2.ios設備進入頁面時不能分享，手動刷新頁面后才能分享；