1. 程式人生 > >iphone 上微信的“復制鏈接”功能復制出來的是修改前的鏈接

iphone 上微信的“復制鏈接”功能復制出來的是修改前的鏈接

粘貼 參數 解決方案 size 描述 第一條 -s 無限 his

問題描述:

在 iOS 系統中,用微信打開了 A 頁面的鏈接,然後由 A 頁面進入 B 頁面

在 B 頁面打開微信右上角菜單,使用“復制鏈接”功能

最後粘貼出來的鏈接是 A 頁面的鏈接

分析原因:

這個問題在微信 6.2 時代就已存在,GitHub 上有很多人到 weui 的主頁提 issue

https://github.com/Tencent/weui/issues/125

https://github.com/wuchangming/blog/issues/1

這兩個 issue 給了我很大的啟發

出現這個問題的原因,是因為微信內置瀏覽器對 history 的支持不夠全面

所以對於開啟了 History Mode 的 SPA 應用,只會保存第一條 url

只要每個頁面都刷新一次,嚴格的說不能是簡單的刷新,需要用 location.replace 刷新頁面,就能解決該問題

解決方案:

在使用了 vue-router 的項目中,添加路由守衛

在每次跳轉結束的時候,給 URL 添加一個隨機參數 wxr,然後執行 location.replace

當 URL 已經有了 wxr 這個參數,就直接加載頁面,避免無限刷新

function wxRefresh (to) {
    // 在鏈接後加一個隨機參數 wxr,以解決 ios 復制鏈接的問題
    let wxr = ‘wxr=‘ + new
Date().getTime(); let url = location.protocol + ‘//‘ + location.host + ‘/page/im‘ + to.fullPath; if (location.search) { url = url + ‘&‘ + wxr; } else { url = url + ‘?‘ + wxr; } window.location.replace(url); } // 跳轉結束後校驗 wxr 參數 app.router.afterEach((to, from) => {
!to.query.wxr && wxRefresh(to); });

iphone 上微信的“復制鏈接”功能復制出來的是修改前的鏈接