使用Cordova來解決HTML5制作的WebView手機不兼容的問題

一: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/路徑