miui10 安卓9 webview下touchend问题

这个问题要从2018年末说起，当时客户反馈我们提供的验证码在小米9中使用异常，拖拽结束后卡住没有响应。并且不是所有小米9都有这个问题。

我们测试发现是在miui10 安卓9的版本中touchend事件没有触发，当时的解决方式是加入touchcancel来替代touchend，生效了。而且客户那边测试也没有问题。

但是最近两个月客户一直反馈说在该机型下，拖拽验证码滑块到指定位置后一直提示验证失败。在testin上，基于客户提供的app，我们也复现了这个问题。查日志发现是拖拽结束的位置不对，每次都要比预期位置大30像素左右。

image.png

因为客户是在app中调用h5，来加载验证码，所以我们采取的排查思路是

1. 先在我们的app中直接加载客户h5页面，排除h5的问题
2. 发现上一步没问题，我们就获取用户的webview设置，在自己的app中会不会复现，发现还是没有，但是这一步还不能排除是webview设置的问题，因为webview相关设置太多，用户给出的是一些基本项。
3. 让用户直接在他们的app中加载我们的h5验证码演示页面，复现来这个问题。由此断定是客户webview环境的问题。
4. 接下来客户排查到了一个参数webview宽度设置，只要加上那个宽度设置webview.layoutParams，就会有问题。我们在自己的app中加上这个设置后确实复现了，但是用户有场景，不能修改这个参数，所以还是得js来适配这个问题。
5. 但是现在已经能够在我们的app中复现了，就可以打包特定的log版本，方便地在testin上打log进行调试(一开始不给客户提供有log的版本是因为这样双方沟通成本太高，作为最后解决方案)。
6. 最后的结论是在webview宽度小于屏幕宽度时，在touchcancel中获取到的event.changedtouches中的pageX就会有问题。我们的解决方法是记录每次touchmove的坐标，将最后一次touchmove的坐标作为滑动结束的坐标。

总结

上一次用户反馈在小米9中拖拽结束后无响应的问题，我们用了将近一周的时间来解决，一直在摸索解决问题的思路。这次问题解决用了一天不到，因为有了之前的经验：先复现，再在testin中打log调试。

如果这次用户没有发现是webview宽度设置的问题，在一定时间内没有头绪的话，我们也能够直接拿到用户能复现的apk，在testin中打log来调试。不过这样就需要用户配合了。对了，webpack压缩插件会删掉console.log，所以我们用的window["console"]["log"]来打印关键信息

关键工具

1. testin
2. window["console"]["log"]