移动端H5开发遇到的坑

Eirunye 发布于2019-08-26 13:39 / 1646人阅读

摘要：微信分享签名错误单页应用模式下微信分享一直提示签名错误按照微信官网文档，已经引入，正确的配置安全域名，后台开发人员生成的签名也通过微信签名工具验证，但是前端的自定义分享一直报签名错误，没有办法自定义分享，如果确保了哪些基本配置没有问题，并且

微信分享签名错误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;

私有云专线服务移动端webrtc h5 H5移动端上传图片移动端开发 web移动端开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109236.html

分享一些遇到的好文章

摘要：移动端布局总结移动端全兼容的移动端知识涵盖伪类等全移动端不得不讲的头标签移动端自适应方案移动端适配总结布局新旧混合写法详解兼容微信使用实现手淘页面的终端适配淘宝弹性布局方案实践理解所需的知识产生的小数像素问题高性能动画动画的性能优化处理和动移动端rem布局总结移动端全兼容的flexbox 移动端知识(涵盖、css、伪类等)【全】移动端不得不讲的头标签移动端自适应方案移动端适...

Tikitoo 2019-08-20 14:49 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
2016年终工作总结

摘要：由于初版需求及开发工作都没有参与，在接手项目后过了遍前端结构发现所有交互及组件都是现撸，并未使用市面上已有的优秀前端框架从我个人角度理解上出发，后续需求变更中当需要实现某些常用组件样式或交互时，基本上都需要现撸或者寻找合适的组件。 2016悄无声息的过去了，再过不久便是农历新年这几天相对清闲梳理了一下去年所做的工作，希望在新的一年能发展的更好今年一共研发或升级了五款产品：合伙人、夺...

hoohack 2019-06-27 15:14 评论0 收藏0
微信端H5开发整体解决方案

用一周的时间上线了一个基于微信端的H5，把微信内置浏览器的坑几乎都踩了一遍，稍做总结，希望我所遇到的问题，各位同学都不在遇到视频禁止视频全屏您的浏览器不支持 video 标签图片不得不说，图片一直都是H5中流量占用的大头，大于500kb的图片在无线端的加载几乎慢成了翔，优化H5的第一步就是，优化图片的显示，目前我用了了两种方式来优化图片在线压缩对jgp和png的格式...

zhaofeihao 2019-08-05 18:17 评论0 收藏0
前端开发：那些我遇到的bug (持续更新)

摘要：暂未找到完美的解决方法，各位看官发现了记得评论提醒一下安卓移动端浏览器设置无效，无法多选图片问题该问题同样暂未找到完美的解决方案别的现在一下子想不起来了。。。从事前端开发将满一年了，期间遇到不少问题，最坑的是一些自己不知道的坑。所以写出来警示后人。 1. ios端的sort方法无效描述：之前做一个小程序的聊天列表的时候需要用到sort进行列表排序。嗯，后来有用户反应最新回复不置顶。。...

曹金海 2019-08-30 14:02 评论0 收藏0