网站静态首页模板,个人个体工商户查询,很久以前做相册mv的网站,网站地图的形式官方地址#xff1a;
https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
上面文档中提供了两种常见的引入H5工程思路#xff0c;简单易懂#xff01;
今天这篇文章要说明的是#xff0c;不同于官方文档的接入方式。
先说背景#xff1a;H5工程方…官方地址
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 这里添加是前两处注入都失败了有个保底方案。
看到这里缺点也非常明显日志是否能打印全取决于注入成功的时间。所以会损失部分初始日志但我测试也是偶发情况。
到此分享结束我也是迫于无奈才出此下策有更好的办法欢迎分享。最后的最后希望大家不会用到这种方法尽量让前端同学自己添加
