这个问题要从2018年末说起,当时客户反馈我们提供的验证码在小米9中使用异常,拖拽结束后卡住没有响应。并且不是所有小米9都有这个问题。
我们测试发现是在miui10 安卓9的版本中touchend事件没有触发,当时的解决方式是加入touchcancel来替代touchend,生效了。而且客户那边测试也没有问题。
但是最近两个月客户一直反馈说在该机型下,拖拽验证码滑块到指定位置后一直提示验证失败。在testin上,基于客户提供的app,我们也复现了这个问题。查日志发现是拖拽结束的位置不对,每次都要比预期位置大30像素左右。
image.png
因为客户是在app
中调用h5
,来加载验证码,所以我们采取的排查思路是
- 先在我们的
app
中直接加载客户h5
页面,排除h5
的问题 - 发现上一步没问题,我们就获取用户的
webview
设置,在自己的app
中会不会复现,发现还是没有,但是这一步还不能排除是webview
设置的问题,因为webview
相关设置太多,用户给出的是一些基本项。 - 让用户直接在他们的
app
中加载我们的h5
验证码演示页面,复现来这个问题。由此断定是客户webview
环境的问题。 - 接下来客户排查到了一个参数
webview
宽度设置,只要加上那个宽度设置webview.layoutParams
,就会有问题。我们在自己的app
中加上这个设置后确实复现了,但是用户有场景,不能修改这个参数,所以还是得js
来适配这个问题。 - 但是现在已经能够在我们的
app
中复现了,就可以打包特定的log
版本,方便地在testin
上打log
进行调试(一开始不给客户提供有log
的版本是因为这样双方沟通成本太高,作为最后解决方案)。 - 最后的结论是在
webview
宽度小于屏幕宽度时,在touchcancel
中获取到的event.changedtouches
中的pageX
就会有问题。我们的解决方法是记录每次touchmove
的坐标,将最后一次touchmove
的坐标作为滑动结束的坐标。
总结
上一次用户反馈在小米9
中拖拽结束后无响应的问题,我们用了将近一周的时间来解决,一直在摸索解决问题的思路。这次问题解决用了一天不到,因为有了之前的经验:先复现,再在testin
中打log
调试。
如果这次用户没有发现是webview
宽度设置的问题,在一定时间内没有头绪的话,我们也能够直接拿到用户能复现的apk
,在testin
中打log
来调试。不过这样就需要用户配合了。对了,webpack
压缩插件会删掉console.log
,所以我们用的window["console"]["log"]
来打印关键信息
关键工具
- testin
window["console"]["log"]
网友评论