Android : 关于Tencent vConsole 添加入webView 总结

官方地址：

https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md

上面文档中提供了两种常见的引入H5工程思路，简单易懂！

今天这篇文章要说明的是，不同于官方文档的接入方式。

先说背景：H5工程方，因框架原因不愿意或者不方便引入，这样就导致问题定位模糊，容易产生相互推诿的情况，那么作为app 客户端的我们又该如何应对呢？

思路：了解官方文档明白，本质就是引入一段js代码。那么为何不通过webView 直接注入。

不考虑兼容性的情况下（4.4以下），通过webVIew.evaluateJavascript的方法就可实现注入js。

实践1：网络cdn 引用 注入。

代码如下：

String injectScript = "(function() {" +
        "function loadVConsole() {" +
        "    if (!window.vConsoleLoaded) {" +
        "        var script = document.createElement('script');" +
        "        script.type = 'text/javascript';" +
        "        script.src = 'https://unpkg.com/vconsole/dist/vconsole.min.js';" +
        "        script.onload = function() {" +
        "            window.vConsoleLoaded = true;" +
        "            if (window.vConsoleLoaded && window.vConsoleInstance == null) {" +
        "                window.vConsoleInstance = new VConsole();" +
        "            }" +
        "        };" +
        "        document.head.appendChild(script);" +
        "    }" +
        "}" +
        "loadVConsole();" + // 调用函数来加载VConsole
        "})();";

binding.dwebVIew.evaluateJavascript(injectScript, null);

至此vConsole 就可以使用了。

然后又突发奇想，如果放到本地会不会更快？

所以出现了

实践2：本地assets 文件中的js 引用 注入。

try {
    if(TextUtils.isEmpty(vConsoleScript)) {
        // 读取assets文件夹中的vconsole.min.js文件
        InputStream inputStream = getAssets().open("jsbrg/vconsole.min.js");
        int size = inputStream.available();
        byte[] buffer = new byte[size];
        inputStream.read(buffer);
        inputStream.close();
        vConsoleScript = new String(buffer, "UTF-8");
    }
    // 构造注入到WebView中的JavaScript代码
    if(TextUtils.isEmpty(injectScript)) {
        injectScript = "(function() {" +
                "function loadVConsole() {" +
                "    if (!window.vConsoleLoaded) {" +
                "        var script = document.createElement('script');" +
                "        script.type = 'text/javascript';" +
                "        script.textContent = '" + escapeJavaScriptString(vConsoleScript) + "';" +
                "        document.head.appendChild(script);" +
                "        window.vConsoleLoaded = true;" +
                "        if (window.vConsoleLoaded && !window.vConsoleInstance) {" +
                "            window.vConsoleInstance = new VConsole();" +
                "        }" +
                "    }" +
                "}" +
                "loadVConsole();" +
                "})();";
    }
    // 注入JavaScript代码到WebView中
    binding.dwebVIew.evaluateJavascript(injectScript, null);

} catch (IOException e) {
    e.printStackTrace();
}

其中遇到两个坑：

1、从assets文件夹中读取，注意路径一定得有，否则会io异常

2、上述方法有个关键方法，字符转义方法，加载的字符串无法直接注入，所以没这个方法无法注入成功，如下：

public static String escapeJavaScriptString(String input) {
    if (input == null || input.isEmpty()) {
        return "";
    }
    StringBuilder sb = new StringBuilder(input.length());
    for (int i = 0; i < input.length(); i++) {
        char c = input.charAt(i);
        switch (c) {
            case '\\':
                sb.append("\\\\");
                break;
            case '\'':
                sb.append("\\'");
                break;
            case '\"':
                sb.append("\\\"");
                break;
            case '\r':
                sb.append("\\r");
                break;
            case '\n':
                sb.append("\\n");
                break;
            case '\f':
                sb.append("\\f");
                break;
            case '\b':
                sb.append("\\b");
                break;
            case '\t':
                sb.append("\\t");
                break;
            // 对于其他需要转义的字符，如 <, >, &, 也可以在这里添加
            // 但通常这些字符在 JavaScript 字符串中不需要转义，除非它们被嵌入到 HTML 中
            default:
                // 对于 ASCII 范围内的字符，通常不需要转义
                // 但对于非打印字符或特殊 Unicode 字符，你可能需要添加额外的逻辑
                if ((c >= 0x20 && c <= 0x7E) || Character.isISOControl(c)) {
                    sb.append(c);
                } else {
                    sb.append(c);
                }
        }
    }
    return sb.toString();
}

以上就是两种不同官方添加vConsole的方法，本质都是通过安卓 webView的动态注入js方法。

实践2：确实更快一些，个人感觉！免去了网络延时，多了本地处理时间，大家可以对比一下

看到最后，恭喜你获得，踩坑经历大礼包：

注入的时机选择：

1、onPageFinished

2、onPageStarted

3、onProgressChanged

经过我的实践：我这边认为最好的注入时机，这个三个地方都加上，onProgressChanged 方法中进度超过35%时开始注入。由于在注入代码中有添加是否注入过的逻辑，所以不用担心重复注入。

onPageStarted 这里添加是为了能尽可能的快注入成功，可能尽可能多的获取日志。

onPageFinished 这里添加是，前两处注入都失败了，有个保底方案。

看到这里，缺点也非常明显，日志是否能打印全，取决于注入成功的时间。所以会损失部分初始日志，但我测试也是偶发情况。

到此分享结束，我也是迫于无奈才出此下策，有更好的办法，欢迎分享。最后的最后希望大家不会用到这种方法，尽量让前端同学自己添加