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 © {

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();

}

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

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

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

注入的时机选择:

1、onPageFinished

2、onPageStarted

3、onProgressChanged

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

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

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

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

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

相关推荐
whysqwhw4 分钟前
OkHttp框架的全面深入架构分析
android
你过来啊你5 分钟前
Android App冷启动流程详解
android
泓博1 小时前
KMP(Kotlin Multiplatform)改造(Android/iOS)老项目
android·ios·kotlin
移动开发者1号1 小时前
使用Baseline Profile提升Android应用启动速度的终极指南
android·kotlin
移动开发者1号1 小时前
解析 Android Doze 模式与唤醒对齐
android·kotlin
菠萝加点糖3 小时前
Kotlin Data包含ByteArray类型
android·开发语言·kotlin
IAM四十二9 天前
Google 端侧 AI 框架 LiteRT 初探
android·深度学习·tensorflow
CYRUS_STUDIO10 天前
手把手教你用 Chrome 断点调试 Frida 脚本,JS 调试不再是黑盒
android·app·逆向
Just丶Single10 天前
安卓NDK初识
android
编程乐学10 天前
网络资源模板--基于Android Studio 实现的咖啡点餐App
android·android studio·大作业·奶茶点餐·安卓移动开发·咖啡点餐