解决微信分享在红米等机型上，hash链接被截断

场景

• 微信中的 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
}