場(chǎng)景
- 微信中的 SPA 分享鏈接
問(wèn)題
- 在紅米等機(jī)型鬓催，存在微信分享鏈接的hash字段被截?cái)嗟膯?wèn)題
解決方案
- 將 hash 參數(shù)拼接為 search參數(shù)恨锚，進(jìn)行分享
- 打開(kāi)分享鏈接時(shí)，立即解析 search 參數(shù)课舍，拼接為 hash 參數(shù)
方案代碼
在 html 的 head 標(biāo)簽中加入如下 jvascript 腳本
- 將分享鏈接中的 search 參數(shù)解析他挎，拼接為 hash 參數(shù)
-
更新于2017-11-30，主要受我在另一個(gè)項(xiàng)目中的啟發(fā)筹淫，用正則解決呢撞，要簡(jiǎn)單很多。
(function() {
// http://test.wx.papamama.me/public/financeshop/?date=123&spaurl=%2Ffinancial-planner-info%26hashSearch%3Duuid%253D81161
var reg = /spaurl=([^&$?]{1,})(&|$)/
var regTestResult = reg.test(location.search)
if (!reg.test(location.search)) return undefined
var newHash = decodeURIComponent(RegExp.$1)
var newSearch = location.search.replace(reg, '').replace(/&$|\?$/, '')
var targetUrl = location.origin + location.pathname + newSearch + '#' + newHash
location.replace(targetUrl)
})();
在微信分享初始化分享鏈接前摧阅，對(duì)SPA鏈接進(jìn)行如下處理：
- 將分享鏈接中的 hash 參數(shù)解析绷蹲，拼接為 search 參數(shù)
function magicLink(link) {
// var link = 'http://test.wx.papamama.me/public/financeshop/?date=12321#/financial-planner-info?uuid=81161'
var hashIndex = link.indexOf('#/')
var nativeUrl = link.substring(0, hashIndex)
var spaUrl = link.substring(hashIndex + 1, link.length)
var targetUrl = ''
if (/\?/.test(nativeUrl)) {
targetUrl = nativeUrl + '&spaurl=' + encodeURIComponent(spaUrl)
} else {
targetUrl = nativeUrl + '?spaurl=' + encodeURIComponent(spaUrl)
}
return targetUrl
}
