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

2022-05-21 12:27:11 字數 1838 閱讀 7600

前言:分享出去的自定義鏈結(鏈結中攜帶引數)總是會直接跳到專案首頁,而且是玄學跳轉,時而自定義鏈結正常,時而直接跳到首頁,

答案在文章最後面。

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

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

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

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

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

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

link: `$/*

**/inde.html#/sharepage?id=123456`

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

當使用者從分享進來的鏈結進來的時候是需要先重定向獲取code 再進入這個鏈結,所以先判斷鏈結中是否有code並且code是否正常,分享出去的鏈結

code肯定是不正常的,所以就有了如下**

1

let url

2if (location.href.includes('/sharepage)) /***/index.html#/sharepage?id=$`

5} else /***/index.html` // 正常的重定向鏈結 7}

8如上**,分享鏈結經常跳到首頁,而且機率很大

然後用 vconsole 檢視日誌是沒有用的,因為重定向了,alert會在它重定向前截停並彈框從分享的鏈結進入的路徑,測試後發現,當跳轉到

首頁的時候 alert 出來的也是首頁,然後判斷到不是分享的頁面也就直接重定向到首頁了,但也有機率是alert 出分享頁面的鏈結並能跳轉到正常的鏈結,

google之後,網友有一些說法,說自定義的分享鏈結#後的部分會被擷取掉,可以使用 手動拼接的方式來定義分享的鏈結,如下

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

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

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

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

然後重定向到它該去的地方,經筆者測試,可行。

如果各位看官有更好的想法的話請多多指教,互相學習。

以上

vue 微信分享自定義

指定頁面分享進入自己本頁面,其他頁面分享進入首頁 created router.js router.beforeeach to,from,next else router.aftereach to,from else function configwechat to wx.config store....

微信自定義分享

1 先獲取 access token 的值,並將 access token 值儲存到資料庫的,也可以利用快取等,看個人習慣 public function getaccesstoken else if res else return data new else return error else r...

微信自定義分享

1 先獲取 access token 的值,並將 access token 值儲存到資料庫的,也可以利用快取等,看個人習慣 public function getaccesstoken else if res else return data new else return error else r...