频道栏目
首页 > 程序开发 > 移动开发 > Android > 正文
使用Cordova来解决HTML5制作的WebView手机不兼容的问题
2016-06-22 09:10:51      个评论    来源:aqiulearningmore的博客  
收藏   我要投稿

一:Android 4.0WebView分析
这里写图片描述

(1)WebView API<喎"/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPtb30qrM4bmpuPjO0sPH06bTw7PM0PK1xL3Tv9oszqrBy7zmyN3P8s/CsOaxvixBbmRyb2lk1Nq437Dmsb7W0NKyyse21NK7suO1xEFQSb340NDWp7PWLDxiciAvPg0KKDIpQW5kcm9pZCBXZWJWaWV3IEZyYW1ld29yazwvcD4NCjxwPkFuZHJvaWQgRnJhbWV3b3JrOkFuZHJvaWQgV2ViVmlld8rHuPbM2Mriv9i8/sq1z9a1xNans9bQ6NKqRnJhbWV3b3JrtcS0+sLr1vfSqtTaLi9mcmFtZXdvcmtzL2Jhc2UvY29yZS9qYXZhL2FuZHJvaWQvd2Via2l0xL/CvM/Co6zU2kFuZHJvaWQgNC4wyrXP1tb30qrKx9TaV2ViVmlld0NvcmUuamF2YSxCcm93c2VyRnJhbWUuamF2YbXIzsS8/qGjPGJyIC8+DQooMylBbmRyb2lkIEpOSTwvcD4NCjxwPkFuZHJvaWQgSk5JOtDo0qrT0E5hdGl2ZbT6wuvWp7PWo6zS8rTL0OjSqtPQSk5JsuPKtc/Wo6xBbmRyb2lkIFdlYlZpZXcgNC4wtcRKTkmy48q1z9ZXZWJWaWV3z+C52LT6wuvU2i4vZXh0ZXJuYWwvd2Via2l0L1NvdXJjZS9XZWJLaXQvYW5kcm9pZC9qbmkvxL/CvM/Co6zV4tK7suPG8LW9s9DJz8b0z8K1xNf308OjrMG0vdNGcmFtZXdvcmuy49LUvLBXZWJLaXSy47XEx8XBuqOsscjI58/gudi1xNK70KnKtc/W1NpXZWJ2aWV3Q29yZS5jcHCjrFdlYkNvcmVGcmFtZUJyaWRnZS5jcHC1yKGjPC9wPg0KPHA+KDQpV2ViS2l0PC9wPg0KPHA+V2ViS2l0OiBXZWJLaXTE2rrLo6zG5LrL0MTW99Kqyse94s72VzNDserXvNLUvLDk1si+xcWw5s340rOjrMv7ysfSu7j2v+fGvcyotcTE2rrL0v3H5qOsxMfDtNDo0qrWp7PWuPe49sa9zKijrNDo0qrO0sPHtcTGvcyoyrXP1rLjo6zU2kFuZHJvaWQgNC4wz7XNs9Xi0ruyv7fWz+C52LT6wuvW99Kq1NouL2V4dGVybmFsL3dlYmtpdC9Tb3VyY2UvV2ViS2l0L2FuZHJvaWQvV2ViQ29yZVN1cHBvcnQvxL/CvM/Co6yxyMjnRnJhbWVMb2FkZXJDbGllbnRBbmRyb2lkLmNwcCxDaHJvbWVDbGllbnRBbmRyb2lkLmNwcKOs1eLSu7LjuLrU8FdlYkNvcmXT68+1zbPGvcyotcTHxb3To6y+38zl1Nqyu82sxr3MqLvh09Cyu82stcTKtc/WoaM8L3A+DQo8cD62/jpBbmRyb2lkIDQuMSZuZGFzaDs0LjMgV2ViVmlld7XEveG5uTxiciAvPg0KQW5kcm9pZCA0LjEmbmRhc2g7NC4zsOaxvldlYlZpZXfE2rrLyrXP1ru5yse7+dPaV2ViS2l0LLWr1NpXZWJWaWV3tcRGcmFtZXdvcmuy47eiyfrBy7Hku6+jrNL9yOvBy7mks6fEo8q9o6zEv7XYysfOqsHLvavE2rrL0+vJz7LjQVBJvdO/2rfWwOu/qsC0o6y31sDrtcTS4tLlsru99r32ysez6c/zvdO/2qOsuPzW2NKqtcTKx72rwLTE3Mzmu7vE2rrLsr+31rXEyrXP1qGjINTaNC4xJm5kYXNoOzQuM9Xi0rvPtcHQsOaxvm5hdGl2Zb3hubm7+bG+0+s0LjCw5rG+z+DNrKOsz8LNvLPKz9bQwrXEseS7r6O6PGJyIC8+DQo8aW1nIGFsdD0="这里写图片描述" src="/uploadfile/Collfiles/20160622/20160622091152829.png" title="\" />

三: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
这里写图片描述
安装速度有点慢,还需要翻墙支弛喎"/kf/yidong/wp/" target="_blank" class="keylink">WPGJyIC8+DQrPwsPmtcTNvLHtyr6wstews8m5pjxiciAvPg0KPGltZyBhbHQ9"这里写图片描述" src="/uploadfile/Collfiles/20160622/20160622091153834.png" title="\" />
(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/路径
这里写图片描述

点击复制链接 与好友分享!回本站首页
相关TAG标签 问题 手机
上一篇:Service使用全解析
下一篇:MVP(2)- 浅析如何高效的使用MVP
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站