微信分享功能給我們帶來了很大的便利，使得基于微信開發(fā)出來的 H5 頁面可以很好的通過微信平臺進行傳播。所以呢，基本上每個基于微信開發(fā)的 H5 都會集成微信分享功能。但是，前幾天在對接微信分享 API 的時候發(fā)現(xiàn)了一個大坑。使用 vue 框架開發(fā)的應用，分享出去的鏈接會被截斷：

正常鏈接：https://hxkj.vip/#/article?article_id=8
分享出去的鏈接被打開之后變成了：https://hxkj.vip/?from=singlemessage&isappinstalled=0
對，就是這么坑。不僅路由被切掉了，參數(shù)也沒了。。。。。。

針對以上問題，首先想到的就是網(wǎng)上找方法求救。其中找到一個方法：(本文待分享鏈接都使用 shareLink 作為變量名)

let shareLink = window.location.href.split("#")[0]+"#"+window.location.href.split("#")[1]; // 使用這種方法重新拼接一下當前連接

然而，并沒有什么用，該被切還是被切。于是，就誕生了以下三種有效的方法。

1、全局路由里攔截鏈接
2、前端頁面中轉，重定向
3、借助后端重定向

一、全局路由里攔截鏈接

1、在 # 號前面加上 ? 號

經(jīng)過試驗發(fā)現(xiàn)，只要在路由的 # 號前面加上 ？號，微信分隔鏈接的時候只會在域名與參數(shù)之間加上 ?from=singlemessage&isappinstalled=0，后面還是會攜帶原本的參數(shù)的，不會被完全切掉。所以，加上之后：

let shareLink = 'https://hxkj.vip/?#/article?article_id=8';
shareLink = shareLink.replace('/#/', '/?#/');

待分享的鏈接變成了：https://hxkj.vip/?#/article?article_id=8
分享出去之后，鏈接變成了這個：https://hxkj.vip/?from=singlemessage&isappinstalled=0#/article?article_id=8

發(fā)現(xiàn)區(qū)別了吧，這次雖然被插入了 ?from=singlemessage&isappinstalled=0 這一串東西，但是最起碼路由和參數(shù)還保留著，接下來我們就要對這一段鏈接進行處理了。

2、正則替換 ?from=singlemessage&isappinstalled=0

這一步需要在 vue 全局路由里完成，操作如下：

// router.js
router.beforeEach((to, from, next) => {
    let url = window.location.href;
    if (url.includes('?from=')) { // 判斷是否攜帶了 from 參數(shù)，這一步靈活變通，只要能判斷出是從微信分享鏈接進來的就 OK
        url = url.replace(/vip.+.#/, 'vip/#'); // 利用正則表達式去掉微信攜帶的 ?from=singlemessage&isappinstalled=0 這串參數(shù)，如果這串參數(shù)對于你當前的頁面有用處的話，可以重新拼接到你正常的鏈接后面去
        window.location.href = url; // 重定向到正常鏈接
    }
})

上面這段代碼的核心在于正則替換 url = url.replace(/vip.+.#/, 'vip/#')，這并不是吃飽了沒事干，非要寫正則。而是微信分享到每個渠道（微信單人聊天、微信群聊、朋友圈、QQ...）所攜帶的 from 參數(shù)是不一樣的，所以需要從域名后綴那里開始往后匹配，直到 # 號為止。替換之后，就相當于把微信添加上去的那一串參數(shù)給刪除了！

以上步驟操作正確的話：

待分享的鏈接為：https://hxkj.vip/?#/article?article_id=8
分享出去之后，再次打開分享鏈接。由于路由那里做了處理，鏈接變?yōu)闉檎顟B(tài)：https://hxkj.vip/#/article?article_id=8

二、前端頁面中轉，重定向

1、新建中轉頁

在 public 文件夾里新建一個 html 頁面（與項目中 index.html 同級），命名為 redirect.html，文件內(nèi)容如下：

<script>
    let url = location.href.split('?')
    let params = url[1].split('&')
    let data = {}
    params.forEach((n, i) => {
        let p = n.split('=')
        data[p[0]] = p[1]
    })
    if (!!data.shareRedirect) {
        window.location.href = decodeURIComponent(data.shareRedirect)
    }
</script>

因為只作為跳轉使用，所以不需要其他的東西，只需要寫 js 就可以了

2、組裝分享鏈接

把要分享的鏈接，設置為中間頁面的路徑

let shareLink = 'https://hxkj.vip/#/article?article_id=8';
shareLink = window.location.href.split('#')[0] + 'redirect.html?shareRedirect=' + encodeURIComponent(shareLink);

這個方法，比第一個方法多了個中間頁，總體來說，還是比較方便的。

以上步驟操作正確的話：

待分享的鏈接為：https://hxkj.vip/redirect.html?shareRedirect=https%3A%2F%2Fhxkj.vip%2F%3F%23%2Farticle%3Farticle_id%3D8
分享出去之后，再次打開分享鏈接。由于中間頁面做了重定向處理，鏈接變?yōu)闉檎顟B(tài)：https://hxkj.vip/#/article?article_id=8

三、借助后端重定向

let shareLink = 后端地址;

這種方法相對于第二種方法，沒有本質的區(qū)別。只是相當于把重定向那一步放到后端去處理了。頁面分享的鏈接為后端同事給出來的地址。

四、總結

At last，看完之后有什么不懂的，可以留言反饋。

轉載請注明出處：http://www.itdecent.cn/p/97729dd2c94d
作者：TSY
個人空間：https://hxkj.vip