使用Cordova来解决HTML5制作的WebView手机不兼容的问题

一:Android 4.0WebView分析

(1)WebView API

主要提供给我们应用程序的接口,为了兼容向下版本,Android在高版本中也是对一层的API进行支持,

(2)Android WebView Framework

Android Framework:Android WebView是个特殊控件实现的支持需要Framework的代码主要在./frameworks/base/core/java/android/webkit目录下,在Android 4.0实现主要是在WebViewCore.java,BrowserFrame.java等文件。

(3)Android JNI

Android JNI:需要有Native代码支持,因此需要有JNI层实现,Android WebView 4.0的JNI层实现WebView相关代码在./external/webkit/Source/WebKit/android/jni/目录下,这一层起到承上启下的作用,链接Framework层以及WebKit层的桥梁,比如相关的一些实现在WebviewCore.cpp,WebCoreFrameBridge.cpp等。

(4)WebKit

WebKit: WebKit内核,其核心主要是解析W3C标准以及渲染排版网页,他是一个跨平台的内核引擎,那么需要支持各个平台,需要我们的平台实现层,在Android 4.0系统这一部分相关代码主要在./external/webkit/Source/WebKit/android/WebCoreSupport/目录下,比如FrameLoaderClientAndroid.cpp,ChromeClientAndroid.cpp,这一层负责WebCore与系统平台的桥接,具体在不同平台会有不同的实现。

二:Android 4.1–4.3 WebView的结构

Android 4.1–4.3版本WebView内核实现还是基于WebKit,但在WebView的Framework层发生了变化,引入了工厂模式,目地是为了将内核与上层API接口分离开来,分离的意义不仅仅是抽象接口,更重要的是将来能替换内核部分的实现。 在4.1–4.3这一系列版本native结构基本与4.0版本相同,下图呈现新的变化:

三:Android 4.4 WebView的结构

在Android 4.4系统上 Google已经将系统默认的Webkit内核替换成自己的开源项目chromium,通过之前的版本分析,我们可以看到Android 对WebView的Framework 结构进行调整使其更抽象,更重要的目的还是集成自己的开源chromium。下面我们来看看WebView的结构发生了什么样的变化:

在Android 4.0上已经默认开启硬件加速,因此WebView的渲染默认是基于硬件渲染的,通过本人分析其在WebView被隐藏的那一帧是采用软件渲染,目的是减少硬件占用,让其他UI能及时的响应。

为了将chromium项目集成到Android 中,chromium项目抽象出Android webview这一层,之前的接口抽离这时候已经变得很明显,Android Webview基于chromium content API这一层,第三方浏览器厂商也可以采用这种方式,目前所了解的厂商有Opera使用这种方式。Android 4.4WebView的渲染核心目前也没有发生太大变化,还是基于WebView的Canvas,将Chromium composit 结构绘制到WebView Canvas上。接入chromium内核,WebView浏览性能大幅度提升,但是和chrome for Android还是有些不同,主要体现在一下几点:

1. chrome浏览器是多进程架构,Chromium for Android Webview 是单进程架构。

2. chrome浏览器 内存占用比 Android WebView大的多。

3. chrome支持更多的HTML5 feature。

四:Android 5.0 WebView

Lollipop版本中WebView的内核实现采用Chromium 37版本,这个版本带来更多的安全性和稳定性。这个版本解决Android 4.4版本网页当中请求访问打开本地文件选择器问题,引入新的回调接口,onShowFileChooser方法,需要此功能的可以在5.0上接上这个回调接口,并实现功能。另外这个版本提供安全许可给用户选择,当网页需要访问特殊资源时,会通知我们的应用程序,请求允许,回调接口为onPermissionRequest。之前我们也提到这个版本使得WebView默认支持WebAudio,WebGL,WebRTC等标准。

另外Google Android 还将webview做为一个能动态更新的app,能不更新Android版本情况下,更新WebView内核。Android 5.0 Webview默认提供减少内存占用支持,并且智能选择需要绘制的HTML document部门来提供性能。 当然开发者可以在自己应用程序需要时关闭这个选项(enableSlowWholeDocumentDraw)。

五:使用Cordova

(1)Cordova概述

什么是Cordova?

*一个移动开发的框架

*将HTML,CSS,JS封装为原生App(Hybrid)(可以让一个前端工程师拥有研发Android App的能力)

*来自Adobe的PhoneGap产品,是当下很多Web开发框架的底层源码

(2)下载和安装Cordova框架

下载Cordova框架之前必须要先下Node.js,(注:Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快,性能非常好。Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好。)

确认安装成功

在windows上安装Cordova

安装速度有点慢,还需要翻墙支持

下面的图表示安装成功

(3)安装ANT

输入网址:http://ant.apache.org/

在视图左边找到Download–Binary Distributions

选择对应的Zip文件进行下载

将解压的zip文件的bin目录添加到环境变量中

(4)Cordova的部分指令

在E盘创建一个”Cordova”文件夹

进入到E盘

进入之前创建的”Cordova”目录

创建自己的第一个项目

其中

hello 表示项目所在的文件夹

com.aqiu.sample 表示项目的包名

HelloWorld 表示入口类

进入到之前创建的hello文件夹

在hello项目文件夹中,为其搭建Android平台的环境

此时的platform–android中已经自动构建了可以在AS运行的代码块,使用AS打开即可

(5)项目文件中的文件目录

hooks:

存放的是我们自定义的扩展功能

platforms:是doc引入的运行平台,我们运行的是Android环境

www:表示的是HTML5的配置文件

注:这个地方将自己的HTML+CSS文件替换掉默认的文件,这样就可以显示自己写的HTML布局了

config.xml:配置文件,里面有起始页HelloWorld和项目名称”index.html”基础信息

六.Android Studio的集成Cordova项目

1.build构建成功的代码块

2.使用Cordova需要注意的问题

(1)在MainActiity中,没有WebView的布局,该布局在依赖库CordovaLib中通过代码构建

(2)在Activity的onCreate方法中,loadUrl(launchUrl)调用之后,CordovaLib中的WebView对象appView才有值,因此使用appView时,必须写在loadUrl的后面

(3)在Cordova中,appView是不能直接调用addJavascriptInterface()方法的,按照要求,在调用该方法之前,

需要加上一行代码:

WebView Wv = (WebView) appView.getEngine().getView();

(4)AS资源文件中,均加上了www文件夹,所以在使用路径下的图片时,在资源路径下要添加/www/路径

时间: 2024-10-28 19:41:40

使用Cordova来解决HTML5制作的WebView手机不兼容的问题的相关文章

html5制作表格

今天学了html5制作表格的方法,其中,有一些基础的用法要给大家介绍一下: 表格的基本格式 格式: <table> <tr>… <th>…</th> <th>…</th> <th>…</th> </tr> <tr> <td>…</td> <td>…</td> <td>…</td> </tr> </t

解决HTML5中placeholder属性兼容性的JQuery插件

//调用方法 $(function () {   $(".pHolder").jason(); }); //HTML代码 <input type="text" class="pHolder" placeholder="请输入姓名" /> //jquery插件 ($.fn.jason = function(a) {    var b = {        focus: "black",      

[Android_HTML5]基于PhoneGap(Cordova)框架的HTML5开发

PhoneGap是一套能让你使用HTML5轻松调用本地API接口和发布应用到商店的应用开发平台.官方说有低成本,低开发周期,轻量化等优点,这些咱暂时也没法证明,略过不表.但是有一条跨平台,却是很明显的优势.因为它采用HTML5+JavaScript的模式来开发应用.PhoneGap用JavaScript统一封装了几大平台的本地api(Andriod,IOS,WP8/7,WINRT)等等..这样的话从一个平台移植到另外一个平台只需要把HTML代码跟JS原封不动的拿过去,打包一下就可以了.Phone

HTML5 制作广告工具4个

GOOGLE 推出的广告设计工具 web designer 生成 html5 广告. Flite 也推出类似工具 Adobe Edge是adobe公司的一款新型网页互动工具.允许设计师通过HTML5.CSS和JavaScript制作网页动画.无需Flash. 2012年创建了乐享云创科技有限公司,推出了基于HTML5的富媒体制作平台Mugeda. https://www.mugeda.com/pricing.php HTML5制作的广告一大优势是广泛的平台支持 IOS , 安卓,PC ,平板电脑

程序员用HTML5制作的爱心树表白动画

体验效果:http://keleyi.com/keleyi/phtml/html5/31.htm HTML代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <title>程序员用HTML5制作的爱心树表白动画- 柯乐义</title><base tar

利用html5制作一个时钟动画

1 <canvas id="clock" width="500" height="500" style="background-color: yellow"></canvas> 1 var clock=document.getElementById("clock"); 2 var cxt=clock.getContext("2d"); 3 function dra

HTML5制作的坦克游戏

HTML5制作的坦克游戏 本游戏是基于HTML5开发的 网页游戏,js,css辅助开发 源码如下: <!DOCTYPE html><html><head><meta charset="utf-8"/><title>坦克大战</title> </head><body onkeydown="getCommand();"><h3>坦克大战(请使用IE浏览器)<

基于Html5的智能家居手机客户端设计(一)——找到openhab的rest

今天开始我的毕业设计,基于HTML5的智能家居手机客户端设计.挑剔了好久,终于找到我可以使用国外开源项目智能家居核心,通过restful(我也不是很懂,毕竟我只是电子信息学院爱好网络). REST描述了一个架构样式的网络系统,比如 web 应用程序.在目前主流的三种Web服务交互方案中,REST相比于SOAP(Simple Object Access protocol,简单对象访问协议)以及XML-RPC更加简单明了,无论是对URL的处理还是对Payload的编码,REST都倾向于用更加简单轻量

如何制作一个自适应手机、电脑、ipad的网页方法总结大全

今天春哥技术博客和大家一起分享下当下如何制作一个自适应手机.电脑.ipad的网页方法,手机上网的用户已经越来越多,已经赶超PC端.随着2G.3G.4G.免费WIFI和无线基站的不断普及,越来越多的人开始使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? \ 手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素.