Vue 專案實現微信分享的自定義分享連結問題解決

這篇文章可能把問題想複雜了，設定微信分享推薦閱讀這篇文章 >>  前端呼叫微信分享函式封裝（適用於原生頁面和其他框架專案）

前言：

　　前兩天在做微信公眾號裡的專案的時候有一個需求是在 vue 專案中實現微信分享，然後在自定義分享連結的時候出了一些問題，分享出去的自定義連結（連結中攜帶引數）總是會直接跳到專案首頁，而且是玄學跳轉，時而自定義連結正常，時而直接跳到首頁，答案在文章最後面。

正文：

　　1. 這裡不說微信分享中的配置微信 js-sdk ，請自行查閱微信公眾號開發文件

　　2. 闡述下 解決此問題的一些思路

解決這個問題需要知道這樣的資訊，微信公眾號中的專案在請求籤名和自定義分享連結的時候對於Vue 的#路由不太友好

1. 請求籤名時如果使用Vue的全路徑（包括#部分路由）請求時會報簽名失敗或者無效的簽名，因此我們需要使用以下方法來避免此問題

　　- 使用  location.href.split('#')[0] 獲取到url中#之前的部分，將獲取的url 傳給後臺請求籤名

　　- 請求使用post, 保證傳給後臺的url是不經過任何加工的

　　以上兩步確認無誤，如果簽名失敗就可以將鍋甩給後臺了

2. 自定義分享連結失敗，分享出去後總是跳到首頁，這個問題確實是困擾了我好一段時間，因為這個自定義連結是時而正常跳轉，時而跳到首頁的

附上我的自定義連結錯誤示例

link: `${location.origin}/***/inde.html#/sharepage?id=123456`

如上，因為分享出去的連結不是當前頁面的連結，所以需要拼接一下

當用戶從分享進來的連結進來的時候是需要先重定向獲取code 再進入這個連結，所以先判斷連結中是否有code並且code是否正常，分享出去的連結code肯定是不正常的，所以就有了如下程式碼

1 let url
2 if (location.href.includes('/sharepage)) { // 說明是分享的頁面
3     let id = location.href.split('?')[1].split('=')[1] // 這裡簡單獲取下引數id
4     url = `${location.origin}/***/index.html#/sharepage?id=${id}`       
5 } else {
6     url = `${location.origin}/***/index.html` // 正常的重定向連結  
7 }
8 
9 window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=******&redirect_uri=${url}?response_type=code&scope=snsapi_base&state=123`  // 重定向

如上程式碼，分享連結經常跳到首頁，而且機率很大

尋找問題，在 App.vue 中  created 周期函式中  alert(location.href) 檢視當前進入的連結地址是否正確，是否是自己安排好的地址，這裡  console.log(location.href)   然後用 vconsole 檢視日誌是沒有用的，因為重定向了，alert會在它重定向前截停並彈框從分享的連結進入的路徑，測試後發現，當跳轉到首頁的時候 alert 出來的也是首頁，然後判斷到不是分享的頁面也就直接重定向到首頁了，但也有機率是alert 出分享頁面的連結並能跳轉到正常的連結，google之後，網友有一些說法，說自定義的分享連結#後的部分會被擷取掉，可以使用 手動拼接的方式來定義分享的連結，如下

1 link: location.href.split('#')[0] + '#' + location.href.split('#')[1]

當然如果分享出去的連結不是當前頁面的話，後面的部分可以自定義，這個方法主要在於手動拼接#，而且有很多網友回覆成功，看了這個方法之後筆者

並沒有直接套用，因為這樣的做法分享出去的連結還是有 # 號的，而且筆者遇到的情況是個概率事件，也就是時靈時不靈，所以筆者放棄了這個方法，有興趣的可以試試這個方法，但是上面的方法是讓筆者想到了另一種思路，程式碼如下:

1 let noSharp = location.href.split('#')[0]
2 let url = noSharp.includes('?') : `${noSharp}&shareId=1234` : `${noSharp}?shareId=1234`
3 link: url     

以上標紅可以實際情況中使用。

可以看出，分享出去的連結並不是分享頁面的連結，而是首頁連結攜帶了一個引數  shareId ，而且連結中不會有 # 號，不用考慮 # 後面的內容被微信擷取掉，能這樣做是因為有一個前提：重定向的連結並不會對 # 有偏見，看下面程式碼

1 let url
2 if (location.href.includes('shareId')) { // 用是否有shareId 來判斷是不是分享出去的連結
3     let searchData = getUrlSearch()// 這裡需要一個獲取url中search 引數的方法,不詳述
4     let shareId = searchData.shareId
5     url = `${location.origin}/***/index.html#/sharepage?id=${shareId}`  
6 } else {
7     url = `${location.origin}/***/index.html`      
8 }
9 window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=*****&redirect_uri=${url}?response_type=code&scope=snsapi_base&state=123`

如上，我們可以在進入連結之後判斷有沒有分享的引數，如果有分享的引數，那就在這裡手動拼接分享的頁面並將分享連結中的引