DoKit：一机多控WebView无侵入注入JS｜滴滴开源

将滴滴技术设为“星标⭐️”

第一时间收到文章更新

导读

自2018年正式对外开源以来，DoKit经历了五年的打磨，已经发展成一个相对完整的生态，支持六大平台（Android、iOS、Web、小程序、Flutter和PC），是滴滴开源委员会的精品孵化项目。在外部被众多头部企业广泛使用并获得了良好的口碑。

在滴滴内部，DoKit已经在所有业务线和App中落地使用，基本覆盖所有日常开发和测试场景，提升了研发和质量同学的日常工作效率。但是随着滴滴内部跨端研发方案的普及，在显著提升研发效率的同时，也给质量团队带来了较大压力。因此，DoKit作为跨端研发方案的孪生兄弟，在2023年将继续聚焦测试效率领域，如UI自动化测试、一机多控等技术。同时，我们也将一机多控研发过程中遇到的技术难点和解决方案分享给开发者们。

本篇文章分为：

1.一机多控遇到的两大问题

2.有哪些常规JS注入方式？

• 使用loadUrl注入

• 使用evaluateJavascript注入

• 修改html插入<script>标签注入

3.为什么需要首行执行？

• 失败的经历

• 需要首行之行

• html插入<script>标签注入

4.如何实现HTML插入<script>标签注入？

• 为什么通过插入<script>标签能够实现首行执行？

• 如何拦截HTML文件加载？

• 如何在HTML文件中插入<script>标签？

5.如何实现代码无侵入？

• 无侵入设置WebViewClientProxy

• 插入代码的时机

• 设置WebViewClientProxy

• 兼容问题处理

6.总结

在移动端开发过程中，开发者经常会遇到三个问题：

1、开发过程中需要临时开发很多便于调试和测试的开发工具；

2、开发工具入口众多，经常找不到想要的功能在哪；

3、设计同学在UI验收时，需要繁琐操作步骤后才能看清UI是否符合设计稿要求……

为了解决日常困扰大家的这三个问题，DoKit团队开发了30多个基础研发效率的工具（包含很多测试和视觉效率工具），并全部收拢在了一个入口中，所有工具功能都清晰可见、便于寻找。同时，为了解决日常开发过程中工具入口分散杂乱、工具开发成本过高等问题，DoKit还开发了高度可定制化能力，集成业务强相关的自定义扩展工具等，希望做好广大开发者在移动端的研发效率工具。

1. 一机多控遇到的两大问题

DoKit一机多控，简单来说是可以通过操作一部手机，同时控制多部手机同步执行操作的功能，旨在提升质量团队的测试效率，尤其是在多设备兼容性测试方面。在过去一年里我们对它进行了持续的研发和改进，功能已经比较完善和稳定。在分别完成了原生侧的一机多控功能和H5一机多控功能后，发现使用H5一机多控功能需要在测试环境发布H5页面时引入dokit-for-web.js文件，才能拥有一机多控功能。

虽然在原生侧，一机多控同样也是通过引入DoKit依赖包进行编译并初始化的，但是当App业务流程中存在H5页面时，如果不能同时开启原生和H5的一机多控功能，测试流程就会因为遇到H5页面而使一机多控控制流程中断从而导致无法正常同步操作。

（DoKit一机多控演示截图）

要让H5支持一机多控其实并不难，只需要在H5代码中结成dokit-for-web.js即可，但是H5一机多控一般只允许在测试环境下运行，不会把一机多控代码带到线上正式环境运行。

而原生App在Debug包中，可以随时通过开关切换不同运行环境（测试/正式环境），这会使得当App切到正式环境后，H5一机多控功能就不可用了。

为了保证顺畅的用户体验，使H5一机多控可以同时在测试和正式环境下运行，需要让H5一机多控可以和原生侧一样可以通过同一个环境切换开关来控制。但是，Web前端研发体系和客户端存在差异，虽然也有测试环境部署服务，但一键切换H5到测试环境存在较多困难，如H5页面众多且分散、团队协调成本高等。

因此，通过客户端来实现dokit-for-web.js代码的注入就变成了较为理想的选择，既能解决环境同步切换的问题，也能解决H5正式环境服务不能够集成一机多控代码的问题。

我们通过在WebView中注入JavaScript代码的不断探索和尝试，沉淀出了一套符合DoKit设计理念的实现方式来完成JavaScript代码的注入。

下面我们一起来看一下DoKit在Android端WebView中注入JavaScript的探索实践过程。

2. 有哪些常规JS注入方式？

搜索查询资料，常用的注入方案是在WebView中设置WebViewClient，通过WebViewClient回调在onPageFinished()中，最早可以再onPageStart()之后，通过loadUrl()或evaluateJavascript() 去加载需要注入的JS代码，或者直接修改html文件插入<script>标签来注入JS代码。

使用loadUrl注入

使用WebView提供的loadUrl注入JS代码，这个API是Android系统最早支持的，在Android各版本中均可使用，需要打开WebView的js运行支持开关。

示例代码：

//打开js运行支持开关
webView.getSettings().setJavaScriptEnabled(true)