微信分享签名错误 invalid signature
vue 单页应用 history 模式下微信分享一直提示签名错误 invalid signature
按照微信官网文档,已经引入 jssdk,正确的配置 js 安全域名,后台开发人员生成的签名也通过微信签名工具验证,但是前端的自定义分享一直报签名错误,没有办法自定义分享,如果确保了哪些基本配置没有问题,并且签名也通过了微信签名工具验证,那么可能就是前端访问的 url 和后台生成签名的 url 不一致导致的签名错误
前端如果是通过 ajax 将 url 传到后端获取签名,那么我们需要将当前页面除去 ’#’hash 部分的链接,并且需要 encodeURIComponent
let url = location.href.split(‘#’)[0]
encodeURIComponent(url)
正常来说这样就可以实现微信自定义分享了,但是单页应用路由切换了之后 IOS 端还是提示签名错误,安卓端没有问题
这是因为 history 模式下视图是通过 pushState 来切换的,但是 IOS 微信客户端(安卓客户端已经修复了)不支持 pushState 的 H5 新特性,所以路由变化了但是微信浏览器获取到的 url 没有变化,右上角复制链接发现,微信记录的 url 还是第一次进入时的 url,除非你手动刷新,或者使用 window.location 等页面跳转方法刷新,才能获取到最新的 url
解决的办法是页面进入的时候记录 url,如果是 iOS 设备那么使用这个 url 获取微信签名
router.afterEach(to => {
sessionStorage.setItem(‘currentUrl’,window.location.href)
})
let url = encodeURIComponent(location.href.split(‘#’)[0])
if(system == “iOS” && sessionStorage.getItem(‘currentUrl’)) {
url = encodeURIComponent(sessionStorage.getItem(‘currentUrl’).split(‘#’)[0])
}
这个时候拿这个 url 去获取微信签名就是正确的了,该方法只适合 IOS 设备,只要获取签名的 url 和微信记录的 url 一致签名就是正确的
往返缓存问题
点击浏览器的前进和回退,有时候不会自动执行 js,特别是在 safari 中,这与往返缓存 (bfcache) 有关系。解决方法:window.onunload = function(){};
如果是 Vue 单页应用,并且使用了 keep-alive 的话,页面也不会刷新,这时候一些接口请求等可以放在 beforeRouteEnter 方法中
IOS 端不支持 new Date(“2019-01-01 00:00:00”) 这种格式
这种写法 new Date(“2019-01-01 00:00:00”)在安卓端是支持的,但是在 IOS 端不支持,会报 NAN 错误,所以需要把 new Date(“2019-01-01 00:00:00”)改成 new Date(“2019/01/01 00:00:00”)这种形式
let date = ‘2019-01-01 00:00:00’
date.replace(/\-/g, ‘/’)
微信二维码
一个页面可能有多个二维码,但是长按识别二维码只能识别最后一个二维码,这个时候我们需要控制页面可视区域内只能出现一个二维码
IOS 中无法点击
span,div 等默认无法点击的标签, IOS 中监听 click 事件点击无效解决办法,添加 cursor: pointer;
audio 音频无法播放
audio.play() 方法在安卓设备可以正常播放,但是在 IOS 客户端不能播放,在设置了 audio 的 src 之后,我们需要加上这一行代码 audio.load() 去加载音频
可以通过监听 loadeddata 方法看音频是否可以开始播放了,安卓设置在音频加载好了之后就开始播放,但是 iOS 端可能稍微有延迟,这个时候我们可以通过 audio.currentTime 获取到音频是否开始播放, 这个值大于 0 就说明已经开始播放了
IOS 移动端 click 事件 300ms 的延迟响应
fixed 问题
在 ios8 以下系统,当小键盘激活时,都会出现位置浮动问题,解决方法:只需要在中间部分外层 div 添加 css 样式 position:fixed;top:50px; bottom:50px;overflow:scroll;