WebView交互架构项目实战(三),史上超级详细

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

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

网页浏览能力

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.V

你可能感兴趣的:(程序员,架构,移动开发,android)