Vue微信公衆號兼容微信JS-SDK，使用分享等功能

好久沒有寫文章了，最近項目是基於微信公衆號的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端不可共用一個wx.config分享代碼，須要分開討論並分開配置。

解決方案：

//由於問題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接口就能夠完成分享配置。

以上就是咱們開發微信公衆號項目遇到的一些問題，分享給你們，但願能幫助到被這些問題困擾的小夥伴，有其餘問題歡迎留言詢問。