教育改变生活,科泰成就梦想!
免费热线:400-696-8028

教学课堂CLASSROOM

开班信息
热门话题
web开发
目前所在位置: 首页 > web开发

移动端H5开发遇到的问题及解决方法

来源:北大青鸟科泰校区时间:2019-04-09

内容提要: 北大青鸟科泰IT培训学院为大家提供移动端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;

联系我们

扫码关注科泰

免费咨询:400-696-8028

报名电话:0731-88122069

咨询QQ: 783463085

学校地址:长沙市开福区湘江北路与开顺路交汇处(金霞跨境产贸城)

在线报名

长沙北大青鸟科泰IT梦想学院·长沙科泰电子商务有限公司·版权所有__湘ICP备19001789号-1