如何解决移动端H5开发遇到的问题-创新互联

这篇文章主要介绍如何解决移动端H5开发遇到的问题，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

为海城等地区用户提供了全套网页设计制作服务，及海城网站建设行业解决方案。主营业务为成都网站建设、网站设计、海城网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

微信分享签名错误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,p 等默认无法点击的标签, IOS中监听click事件点击无效
解决办法，添加 cursor: pointer;

audio音频无法播放

audio.play() 方法在安卓设备可以正常播放，但是在IOS客户端不能播放，在设置了audio的src之后，我们需要加上这一行代码
audio.load() 去加载音频

可以通过监听loadeddata方法看音频是否可以开始播放了，安卓设置在音频加载好了之后就开始播放，但是iOS端可能稍微有延迟，这个时候我们可以通过audio.currentTime获取到音频是否开始播放,这个值大于0就说明已经开始播放了

IOS移动端click事件300ms的延迟响应

fixed问题

在ios8以下系统，当小键盘激活时，都会出现位置浮动问题，解决方法：只需要在中间部分外层p添加css样式
position:fixed;top:50px; bottom:50px;overflow:scroll;

以上是如何解决移动端H5开发遇到的问题的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章题目：如何解决移动端H5开发遇到的问题-创新互联
文章来源：http://cxhlcq.com/article/pjgpg.html