WebView交互架构项目实战（三）：多进程WebView使用实践

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 内核了，不得不说腾讯还是很有想法的。

简单摘录些功能亮点，想必能让大家高潮一番。详细内容大家可以直接到腾讯浏览服务看看，我相信不会让你们失望的。

网页浏览能力

Web页面crash率降低75%

页面打开速度提升35%

流量节省60%

阅读模式

去除网页中广告等杂质

优化文章的阅读体验

文件打开能力

包括会话页的互传文件及邮件中附件

支持doc、ppt、xls、pdf等办公格式

支持jpg、gif、png、bmp等图片格式

支持zip、rar等压缩文件

支持mp3、mp4、RMVB等音视频格式

视频菜单能力

支持屏幕调节等常规视频菜单功能

灵活切换全屏&小窗功能

*3：加快HTML网页装载完成的速度*

默认情况html代码下载到WebView后，webkit开始解析网页各个节点，发现有外部样式文件或者外部脚本文件时，会异步发起网络请求下载文件，但如果在这之前也有解析到image节点，那势必也会发起网络请求下载相应的图片。在网络情况较差的情况下，过多的网络请求就会造成带宽紧张，影响到css或js文件加载完成的时间，造成页面空白loading过久。解决的方法就是告诉WebView先不要自动加载图片，等页面finish后再发起图片加载。

故在WebView初始化时设置如下代码：

public void int () {

if(Build.VERSION.SDK_INT >= 19) {

webView.getSettings().setLoadsImagesAutomatically(true);

} else {

webView.getSettings().setLoadsImagesAutomatically(false);

}

}

同时在WebView的WebViewClient实例中的onPageFinished()方法添加如下代码：

@Override

public void onPageFinished(WebView view, String url) {

if(!webView.getSettings().getLoadsImagesAutomatically()) {

webView.getSettings().setLoadsImagesAutomatically(true);

}

}

从上面的代码，可以看出我们对系统API在19以上的版本作了兼容。因为4.4以上系统在onPageFinished时再恢复图片加载时,如果存在多张图片引用的是相同的src时，会只有一个image标签得到加载，因而对于这样的系统我们就先直接加载。

**

*4：自定义出错界面***

当WebView加载页面出错时（一般为404 NOT FOUND），安卓WebView会默认显示一个卖萌的出错界面。但我们怎么能不让用户发现原来我使用的是网页应用呢，我们期望的是用户在网页上得到是如原生般应用的体验，那就先要从干掉这个默认出错页面开始。当WebView加载出错时，我们会在WebViewClient实例中的onReceivedError()方法接收到错误，我们就在这里做些手脚：

@Override

public void onReceivedError (WebView view, int errorCode, String description, String failingUrl) {

super.onReceivedError(view, errorCode, description, failingUrl);

loadDataWithBaseURL(null, “”, “text/html”, “utf-8”, null);

mErrorFrame.setVisibility(View.VISIBLE);

}

从上面可以看出，我们先使用loadDataWithBaseURL清除掉默认错误页内容，再让我们自定义的View得到显示（mErrorFrame为蒙在WebView之上的一个LinearLayout布局，默认为View.GONE）。

远程网页需访问本地资源

当我们在WebView中加载出从web服务器上拿取的内容时，是无法访问本地资源的，如assets目录下的图片资源，因为这样的行为属于跨域行为（Cross-Domain），而WebView是禁止的。解决这个问题的方案是把html内容先下载到本地，然后使用loadDataWithBaseURL加载html。这样就可以在h