WebView交互架构项目实战（三），一年后斩获腾讯T3

jsStr = JsjjJSHelper.getResInputStream(url);

if (url.endsWith(".png")) {

response = getWebResourceResponse(url, “image/png”, “.png”);

} else if (url.endsWith(".gif")) {

response = getWebResourceResponse(url, “image/gif”, “.gif”);

} else if (url.endsWith(".jpg")) {

response = getWebResourceResponse(url, “image/jepg”, “.jpg”);

} else if (url.endsWith(".jepg")) {

response = getWebResourceResponse(url, “image/jepg”, “.jepg”);

} else if (url.endsWith(".js") && jsStr != null) {

response = getWebResourceResponse(“text/javascript”, “UTF-8”, “.js”);

} else if (url.endsWith(".css") && jsStr != null) {

response = getWebResourceResponse(“text/css”, “UTF-8”, “.css”);

} else if (url.endsWith(".html") && jsStr != null) {

response = getWebResourceResponse(“text/html”, “UTF-8”, “.html”);

}

}

// 若 response 返回为 null , WebView 会自行请求网络加载资源。

return response;

}

});

private WebResourceResponse getWebResourceResponse(String url, String mime, String style) {

WebResourceResponse response = null;

try {

response = new WebResourceResponse(mime, “UTF-8”, new FileInputStream(new File(getJSPath() + TPMD5.md5String(url) + style)));

} catch (FileNotFoundException e) {

e.printStackTrace();

}

return response;

}

public String getJsjjJSPath() {

String splashTargetPath = JarEnv.sApplicationContext.getFilesDir().getPath() + “/JS”;

if (!TPFileSysUtil.isDirFileExist(splashTargetPath)) {

TPFileSysUtil.createDir(splashTargetPath);

}

return splashTargetPath + “/”;

}

**

*1：常用 JS 本地化及延迟加载***

**

**资源等文件(不需要更新)本地存储，在需要的时候直接从本地获取。哪些资源需要我们去存储在本地呢，当然是一些不会被更新的资源，例如图片文件，js文件，css文件，比预加载更粗暴的优化方法是直接将常用的 JS 脚本本地化，直接打包放入 apk 中。比如 H5 页面获取用户信息，设置标题等通用方法，就可以直接写入一个 JS 文件，放入 asserts 文件夹，在 WebView 调用了onPageFinished() 方法后进行加载。需要注意的是，在该 JS 文件中需要写入一个 JS 文件载入完毕的事件，这样前端才能接受都爱 JS 文件已经种植完毕，可以调用 JS 中的方法了。 附上一段本地化的 JS 代码。

javascript: ;

(function() {

try{

window.JSBridge = {

‘invoke’: function(name) {

var args = [].slice.call(arguments, 1),

callback = args.pop(),

params, obj = this[name];

if (typeof callback !== ‘function’) {

params = callback;

callback = function() {}

} else {

params = args[0]

} if (typeof obj !== ‘object’ || typeof obj.func !== ‘function’) {

callback({

‘err_msg’: ‘system:function_not_exist’

});

return

}

obj.callback = callback;

obj.params = params;

obj.func(params)

},

‘on’: function(event, callback) {

var obj = this[‘on’ + event];

if (typeof obj !== ‘object’) {

callback({

‘err_msg’: ‘system:function_not_exist’

});

retrun

}

if (typeof callback !== ‘undefined’) obj.callback = callback

},

‘login’: {

‘func’: function(params) {

prompt(“login”, JSON.stringify(params))

},

‘params’: {},

‘callback’: function(res) {}

},

‘settitle’: {

‘func’: function(params) {

prompt(“settitle”,JSON.stringify(params))

},

‘params’: {},

‘callback’: function(res) {}

},

}catch(e){

alert(‘demo.js error:’+e);

}

var readyEvent = document.createEvent(‘Events’);

readyEvent.initEvent(‘JSBridgeReady’, true, true);

document.dispatchEvent(readyEvent)

})();

关于 JS 延迟加载

Android 的 OnPageFinished 事件会在 Javascript 脚本执行完成之后才会触发。如果在页面中使 用JQuery，会在处理完 DOM 对象，执行完 $(document).ready(function() {}); 事件自会后才会渲染并显示页面。而同样的页面在 iPhone 上却是载入相当的快，因为 iPhone 是显示完页面才会触发脚本的执行。所以我们这边的解决方案延迟 JS 脚本的载入，这个方面的问题是需要Web前端工程师帮忙优化的。

**

*2：使用第三方 WebView 内核***

WebView 的兼容性一直也是困扰我们 Android 开发者的一个大问题，不说 Android 4.4 版本 Google 使用了Chromium 替代 Webkit 作为 WebView 内核，就看看国内众多的第三方 ROM 都有可能会对原生的 WebView 做出修改，这时候如果出现兼容问题，是非常难定位到问题和解决的。

在一次使用微信浏览订阅公众号文章的过程中，发现微信的 H5 页面有一行 『QQ 浏览器 X5 内核提供技术支持』。顺着这个线索我就找到了腾讯浏览服务。发现腾讯已经把这个功能开放了，而且集成的 SDK 很小只有212 KB。这是很惊人的，通过介绍才发现这个 SDK 是可以共享微信和手机 QQ 的 X5 内核。这就很方便了，作为国内市场最不可或缺的两个 App，我们能只需要集成一个很小的 SDK 就可以共享使用 X5 内核了，不得不说腾讯还是很有想法的。

简单摘录些功能亮点，想必能让大家