很久沒有寫文章了，最近項目是基於微信公衆號的Vue項目，有一個非常重要的分享功能，不搞不知道一搞不得了，發現vue-router和微信SDK配置有很大的兼容性問題，翻遍文檔，社區，博客，都沒有找到可以適合解決我這個問題的方法，最後是我們一起一個一個方法、一個一個api嘗試才找到解決辦法，現在和大家分享一下我們遇到的問題和解決方案。
先附上微信SDK文檔地址：https://mp.weixin.qq.com/wiki...
這裏只針對討論Vue腳手架搭建，vue-router跳轉的SPA單頁面項目！！
很多是Vue-router和微信JS-SDK之間的BUG
問題1.url在IOS端和Android端表現不同
當使用vue-router跳轉的SPA單頁面項目，在IOS端只要不刷新頁面，頁面URL永遠是第一次進來的url！
例如：
項目首頁地址爲：www.baidu.com/home
項目詳情頁地址爲：www.baidu.com/detail
當你在首頁點擊詳情頁跳轉按鈕觸發了this.$router.push('/detail')
且！頁面已經跳轉至詳情頁，但是你複製當前鏈接查看後
會驚訝的發現，url還是www.baidu.com/home
但！你強制刷新頁面後，url會變成www.baidu.com/detail有趣的是，Android端不會出現這種情況，url會隨着頁面跳轉而改變。
你要是問我爲什麼會出現這種情況，等我什麼時候進微信團隊了，我再給大家解答。。。
因爲在wx.config中配置需要使用當前url進行簽名，這種問題出現導致IOS端和Android端不可共用一個分享代碼，需要分開討論並分開配置。
解決方案：
//因爲問題1，所以我們要在IOS端進入項目時，記住第一次進來的url地址，供簽名使用
// 判斷瀏覽器是 Android端 or IOS端
let userAgent = navigator.userAgent;
let isAndroid =
userAgent.indexOf("Android") > -1 || userAgent.indexOf("Adr") > -1;
let isIOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isIOS) {
// 是IOS，這裏用Vuex進行儲存
this.$store.commit("isIosFun", true);
//記錄好第一次進項目的URL，供簽名使用
this.$store.commit("firstUrlFun", window.location.href.split("#")[0]);
} else if (isAndroid) {
// Android
this.$store.commit("isIosFun", false);
//安卓無需記錄，因爲url會隨着頁面跳轉而改變，簽名使用window.location.href即可
}問題2.微信分享配置在IOS端和Android端api不同
微信分享是微信生態很重要的一個功能，特別對於公衆號項目，有些靠這個恰飯的啊 😂😂😂
我們先看文檔，有什麼供我們使用
請注意，原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口，即將廢棄。請儘快遷移使用客戶端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口。上面是文檔的原話，即將廢棄是什麼意思？又不告訴我爲什麼廢棄，什麼時候廢棄，那我全部用updateAppMessageShareData、updateTimelineShareData這兩個是不是就可以了？
經過我們上百次的測試和試驗得出的結果是：
updateAppMessageShareData、updateTimelineShareData 接口 只能在IOS端使用！
onMenuShareTimeline、onMenuShareAppMessage 接口 只能在Android端使用！
你要是問我爲什麼會出現這種情況，等我什麼時候進微信團隊了，我再一併給大家解答。。。
問題3.進入Vue項目不可以使用定向
不可以在第一次進入項目使用定向！否則在ios端會導致首頁wx.config失敗！
{
path: '/',
redirect:"/home"
},問題4.微信分享地址不可以有端口號！
例如供簽名的url爲www.baidu.com:8080
會導致wx.config失敗！以上部分方案僅針對使用vue-router的SPA單頁面項目，如果使用a鏈接跳轉或者直接window.location.href跳轉的小夥伴，直接使用wx.onMenuShareTimeline、wx.onMenuShareAppMessage接口就可以完成分享配置。