1,开发时碰到了哪些技术问题
1)低版本手机不支持es6,使用babel
2)引入百度地图js api时,需要使用https协议,否则不能正常使用API。在iOS 10中,苹果对webkit定位权限进行了修改,所有定位请求的页面必须是https协议的
3)<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;加上这一句input获取焦点时页面不会放大
4)在微信公众号中,input获取焦点时,页面上方会提示就会提示“防欺诈盗号,请勿支付或输入QQ密码”。在公众平台的管理后台设置业务域名即可解决
5)<form action="#" @submit="doSearch"><input type="search"/></form>
//点击键盘的搜索按钮即可触发form的submit事件 e.preventDefault();//阻止表单默认事件
移动端的键盘右下角显示“搜索”(安卓)或“Search"(苹果)按钮,点击该按钮即可提交表单
6)页面列表上拉加载,实现分页,缩短请求时间
监听页面滚动事件,判断滚动条离页面底部的距离,然后距离达到一定的值,向服务端发请求。将请求的结果拼接在原有的列表后面,即可实现上拉加载分页。
7)移动端html5拖拽
当按下手指时,触发ontouchstart;当移动手指时,连续地触发ontouchmove(在这个事件发生期间,调用preventDefault()事件可以阻止滚动);当移走手指时,触发ontouchend。
onclick只在你快速点击并放开才会被执行,如果你点击一个区域,很迟才放开,那么onclick是不会执行的(touchstart->...->touchend)
执行顺序是ontouchstart > ontouchend > onclick
个人观点:移动端不能使用HTML5拖放实现拖拽效果(ondragstart...),可以使用touch事件
8)ios上页面滚动不流畅
-webkit-overflow-scrolling: touch;
9)ios上背景图片闪烁加载问题(原因暂时不详)
var cvs = document.createElement('canvas');
cvs.width = 5; cvs.height = 2;cvs.toDataURL();
这句话放在浏览器执行一下,就得出了base64的字符串。
<img class="blur-bg" :style="{backgroundImage: 'url('+picUrl+item.merLogo+')'}" src="https://img-blog.csdnimg.cn/2022010623292110857.png"/>
10)兼容低版本手机系统(ios 9和ios 8)
10.1)不支持es6,如箭头函数和let
10.2)var App = new Vue({ router:router //不兼容缩写 });
10.3)兼容css3,如flex布局(ios浏览器是webkit内核)
加上-webkit-前缀;display: flex; display: -webkit-flex; flex: 1;-webkit-flex: 1;
10.4)autoprefixer+postcss-loader:根据当前浏览器给css加上必要的前缀以兼容该浏览器,同时移除不必要的css前缀
2,移动端提高用户的体验度
1)通过上拉加载分页,缩短请求时间
2)减少等待,反馈及时
当不可避免的出现了加载和等待的时候,需要予以及时的反馈以舒缓用户等待的不良情绪。如:向服务端发请求时显示“加载中”弹框,请求完成关闭该弹框;当请求的数据为空时,在页面上提示查询无记录等,避免出现空白页面,让用户以为应用卡死。
3)明确直观的的结果提示,如报错
除了在用户等待的过程中需予以及时反馈外,对操作的结果也需要予以明确反馈。弹出式提示(Toast)适用于轻量级的成功提示,1.5秒后自动消失,并不打断流程,对用户影响较小,适用于不需要强调的操作提醒,例如成功提示。特别注意该形式不适用于错误提示,因为错误提示需明确告知用户,因而不适合使用一闪而过的弹出式提示。对于操作结果已经是当前流程的终结的情况,可使用操作结果页来反馈。这种方式最为强烈和明确的告知用户操作已经完成,并可根据实际情况给出下一步操作的指引。
4)减少 HTTP 资源请求次数&减小 HTTP 请求大小
使用构建工具如webpack来合并JavaScript 或 CSS 代码,压缩静态图片资源以及移除代码中的注释并压缩;
5)把 CSS 资源引用放到 HTML 文件顶部;JavaScript 资源引用放到 HTML 文件底部
一般推荐将所有 CSS 资源尽早指定在 HTML 文档 <head> 中,这样浏览器可以优先下载 CSS 并尽早完成页面渲染。
JavaScript 资源放到 HTML 文档底部可以防止 JavaScript 的加载和解析执行对页面渲染造成阻塞。由于 JavaScript 资源默认是解析阻塞的,除非被标记为异步或者通过其他的异步方式加载,否则会阻塞 HTML DOM 解析和 CSS 渲染的过程。
6)相对于桌面端浏览器,移动端 Web 浏览器上有一些较为明显的特点:设备屏幕较小、新特性兼容性较好、支持一些较新的 HTML5 和 CSS3 特性、需要与 Native 应用交互等。但移动端浏览器可用的 CPU 计算资源和网络资源极为有限,因此要做好移动端 Web 上的优化往往需要做更多的事情。首先,在移动端 Web 的前端页面渲染中,桌面浏览器端上的优化规则同样适用,此外针对移动端也要做一些极致的优化来达到更好的效果。
7)首屏加载和按需加载,非首屏内容滚屏加载,保证首屏内容最小化
由于移动端网络速度相对较慢,网络资源有限,因此为了尽快完成页面内容的加载,需要保证首屏加载资源最小化,非首屏内容使用滚动的方式异步加载。一般推荐移动端页面首屏数据展示延时最长不超过3秒。
8)图片压缩处理
在移动端,通常要保证页面中一切用到的图片都是经过压缩优化处理的,而不是以原图的形式直接使用的,因为那样很消耗流量,而且加载时间更长。
9)使用 touchstart 代替 click
由于移动端屏幕的设计, touchstart 事件和 click 事件触发时间之间存在 300 毫秒的延时,所以在页面中没有实现 touchmove 滚动处理的情况下,可以使用 touchstart 事件来代替元素的 click 事件,加快页面点击的响应速度,提高用户体验。但同时我们也要注意页面重叠元素 touch 动作的点击穿透问题。