vue 微信自定義分享連接拼接參數實現分享功能

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`

 

如上，咱們能夠在進入連接以後判斷有沒有分享的參數，若是有分享的參數，那就在這裏手動拼接分享的頁面並將分享連接中的參數拼接在後面。