场景
- 微信中的 SPA 分享链接
问题
- 在红米等机型，存在微信分享链接的hash字段被截断的问题
解决方案
- 将 hash 参数拼接为 search参数，进行分享
- 打开分享链接时，立即解析 search 参数，拼接为 hash 参数
方案代码
在 html 的 head 标签中加入如下 jvascript 脚本
- 将分享链接中的 search 参数解析，拼接为 hash 参数
-
更新于2017-11-30，主要受我在另一个项目中的启发，用正则解决，要简单很多。
(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)
})();
在微信分享初始化分享链接前，对SPA链接进行如下处理：
- 将分享链接中的 hash 参数解析，拼接为 search 参数
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
}
