移动端测试注意事项

1.兼容问题

  • 浏览器兼容:iOS/安卓点击唤醒浏览器事件
  • 界面兼容

2.点击事件click

参考博文【侵权删】https://www.cnblogs.com/xzybk/p/11906938.html

(1)触摸事件:touchstart、touchmove和touchend
  

  • touchstart事件:当在屏幕上按下手指时触发
  • touchmove事件:当在屏幕上移动手指时触发
  • touchend事件:当在屏幕上抬起手指时触发
  • touchcancel事件:当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作

(2)点击事件

  • 防抖:不管触发频率多大,都在停止触发之后的给定时间触发
  • 节流:不管触发频率多大,都以恒定频率触发

(3)常见问题:touch事件及click事件同时绑定在一个元素上

  • 点击事件click出现300毫秒延迟

    • 产生原因:双击缩放功能,双击缩放的原理是当用户click一次之后,浏览器会经过约300ms之后检测是否再有一次click,如果有的话,就会缩放页面,否则的话就是一个click事件。
    • touch, click事件的执行顺序: touchstart > touchmove > touchend > click,即touch事件执行完毕后才会到click事件,这就是300ms的延迟。
    • touchmove ,click事件互斥,即touchmove触发执行,click事件不再执行 ,事件的执行顺序就为touchstart > touchmove(可以多次执行) > touchend 。
  • 点透事件:A显示在B浮层之上,A发生touch(也可以是click)后立即消失,B事件绑定click

    • 短暂触摸(点)一下屏幕,touch事件及click事件的执行顺序:touchstart > touchend > click
    • 点透发生的原因: 当手指触摸到屏幕的时候,系统生成两个事件,一个是touch 一个是click,touch先执行,touch执行完成后,A从文档树上面消失了,而且由于移动端click还有延迟200-300ms的关系,当系统要触发click的时候,发现在用户点击的位置上面,目前离用户最近的元素是B,所以就直接把click事件作用在B元素上面了,因此元素B被莫名点击了
    • 解决方案:touch阶段取消掉 click 事件,即阻止触发touch事件完成后的click事件

3.授权头

  • 已登录:授权头
  • 未登录:虚拟授权头
  • 登录过期:过期授权头———服务端返回401

注意事项

  • 未登录切换至登录状态。未登录状态使用虚拟授权头,从未登录切换到登录状态时需使用真实用户授权头,若当前页面未重新请求,调用协议时虚拟授权头和真实授权头均会返回,若错误选择使用虚拟授权头,由于每次退出重登虚拟授权头都不同,对应的虚拟UID也不同,因此在将UID作为用户唯一性判断场景中,可能会导致薅羊毛事件发生;

  • 授权头过期,服务端一般会返回401,该场景一般不多见,但仍需要做一些预防措施,防止在该种场景下,用户无法操作;

4.优化

(1)懒加载:懒加载其实就是延时加载,即当对象需要用到的时候再去加载

  • 图片懒加载:当我们打开一个页面时,浏览器就会从上往下读取页面中的移动端测试注意事项标签src中的地址,并且开启线程来进行加载。当用户的网速不给力或者此页面中的图片太多时,就会发生每张图片都加载了一点但是都没有加载完成,导致最后没有一个图片能正常显示。此时需使用懒加载技术以降低资源耗用——即只加载可视窗口区域的图片,当用户向下拖动滚动条时再继续加载后面的图片(也是只加载目前可视窗口区域内的图片)

  • 轮播组件懒加载

移动端测试注意事项

上一篇:手机站微信登录代码分享,自己开发仅供学习


下一篇:微信小程序的正确开启方法,最新更新小程序附带详细图