Android 关于Tencent vConsole 添加入webView 总结

news2024/12/24 23:15:19

官方地址：

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 © {
case ‘\’:
sb.append(“\\”);
break;
case ‘’‘:
sb.append("\’“);
break;
case '”':
sb.append(“\”“);
break;
case ’
':
sb.append(”\r");
break;
case ’
':
sb.append("
“);
break;
case ’ ':
sb.append(”\f");
break;
case ‘’:
sb.append(“\b”);
break;
case ’ ':
sb.append(“\t”);
break;
// 对于其他需要转义的字符，如 <, >, &, 也可以在这里添加
// 但通常这些字符在 JavaScript 字符串中不需要转义，除非它们被嵌入到 HTML 中
default:
// 对于 ASCII 范围内的字符，通常不需要转义
// 但对于非打印字符或特殊 Unicode 字符，你可能需要添加额外的逻辑
if ((c >= 0x20 && c <= 0x7E) || Character.isISOControl©) {
sb.append©;
} else {
sb.append©;
}
}
}
return sb.toString();
}