android中webview使用的一些細節

轉自： http://www.cnblogs.com/mingforyou/archive/2012/12/06/2805182.html

webview ，用網頁來佈局。 Android 的 webview 是基於 webkit 內核，不過他的運行效果和 firefox 上如出一轍，因此寫的時候都是先用 firefox 測試，測試 OK 了再放到程序裏面看效果，基本上不會有什麼問題。其實 android 的 webview 跟 iphone 的 webview 差很少， iphone 上的 webview 比 android 上的強大多了。

談一下研究 webview 的一些成果：

一．    加載資源的速度不慢，可是資源多了，就很慢。圖片、 css 、 js 、 html 這些資源每一個大概須要 10-200ms ，通常都是 30ms 就 ok 了。若是一個頁面上的資源不少，就很浪費時間。

二．    Js 和 css 的執行速度。開始的時候，個人頁面都是用 js 生成 DOM ，添加樣式等也用 js 添加。後來發現，加載一個頁面竟然要 5-6 秒。而後我就懷疑是否是 js 的執行效率不高，而後就把能用 css 的地方都用 css ，能直接寫到 html 上的就不用 js 動態生成。結果，速度並無多大的提高，最多提高了 1 秒。看來， Js 的執行速度雖然比不上 css ，可是還不至於慢到那種程度。那會是什麼緣由使得頁面加載速度這麼慢？通過仔細的排查，最終發現，是由於我用了 jQuery 框架。

Webview 加載頁面的順序是這樣的：先加載 html ，而後從裏面解析出 css 、 js 文件和頁面上寫死的圖片資源進行加載，若是 webkit 的緩存裏面有，就不加載。加載完這些資源以後，就進行 css 的渲染和 js 的執行。 Css 的渲染通常不須要很長時間，幾十毫秒就 ok 。關鍵是 js 的執行，若是用了 jQuery ，則執行起來須要 5-6 秒。而在這段時間，若是不在 webview 裏設置背景，網頁部分是白色的，很難看。這是一個很糟糕的用戶體驗。因此若是用網頁佈局程序，最好別用很大的 js 框架。

三．     網頁和 Java 之間的互調。這個功能是 iphone 裏面就有的，網上也有不少資料，能夠告訴咱們怎麼作，這些都是很簡單、很基本的。我研究了一段時間，總結一下：

 1．  Java 調用 js 裏面的函數，速度並不使人滿意，大概一次一兩百毫秒吧，若是要作交互性很強的事情，這種速度會讓人瘋掉的。而反過來就不同了， js 去調 java 的方法，速度很快，基本上 40-50 毫秒一次。因此儘可能用 js 調用 java 方法，而不是 java 去調用 js 函數。

 2．  Java 調用 js 的函數，沒有返回值，而 Js 調用 java 方法，能夠有返回值。返回值能夠是字符串，也能夠是對象。若是是字符串，有個很討厭的問題，第 3 點我會講的。若是是對象，這個對象會被轉換爲 js 的對象，直接能夠訪問裏面的方法。可是我不推薦 java 返回給 js 的是對象，除非是必須。由於 js 收到 java 返回的對象，會產生一些交換對象，而若是這些對象的數量增長到了 500 或 600 以上，程序就會出問題。因此儘可能返回基本數據類型或者字符串。

3．  Js 調用 java 的方法，返回值若是是字符串，你會發現這個字符串是 native 的，不能對它進行一些修改操做，好比想對它 substr ，取不到。怎麼解決呢？轉成 locale 的。使用 toLocaleString() 函數就能夠了。不過這個函數的速度並不快，轉化的字符串若是不少，將會很耗費時間。

四．        網頁上拖動元素。網頁上有一個 div ，想要拖動它到另一個地方，怎麼作？若是用 PC 上的網頁作法，監聽 onmousedown 、 onmousemove 和 onmouseup 就能夠了。可是在手機上，事件模型就不同了。在網頁上點擊，拖動，而後釋放，手離開屏幕的時候， webview 纔會觸發 onmousedown 、 onmousemove 、 onmouseup 事件。因此，要想拖動，不能這麼作。這個問題困擾我很長時間，後來發現 iphone 上的作法，才解決了。 Iphone 上的 webview 有專爲觸摸屏設計的事件 ontouchstart 、 ontouchmove 、 ontouchend ，這幾個事件的響應是實時的，就能解決拖動的問題了。

五．        一些小問題。 Webview 裏面的網頁，若是有 input ，須要輸入，可是點上去卻沒反應，輸入法不出來。這種狀況是由於 webview 沒有獲取焦點。須要在 java 裏面給 webview 設置一下 requestFocus() 就好了。

六．        Android 上的 webview 和 iphone 的 webview 區別。目前爲止，我發現的區別有這麼幾個：

1 ． Android 上， webview 不支持多點觸控，沒有 ongesture 系列事件，而 iphone 上有。

 2 ． Android 上的 webview 不支持透明， iphone 上能夠。

 

瀏覽器控件是每一個開發環境都具有的，這爲馬甲神功提供了用武之地，windows的有webbrowser，android和ios都有webview。只是其引擎不一樣，相對於微軟的webbrowser，android及ios的webview的引擎都是webkit，對Html5提供支持。本篇主要介紹android的webview之強大。

A.    webview組件如何使用

 

1)       添加權限：AndroidManifest.xml中必須使用許可"android.permission.INTERNET",不然會出Web page not available錯誤。

2)       在要Activity中生成一個WebView組件：WebView webView = new WebView(this);或者能夠在activity的layout文件裏添加webview控件：

<WebView android:id="@+id/wv" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="@string/hello" />

 

3)       設置WebView基本信息：
          若是訪問的頁面中有Javascript，則webview必須設置支持Javascript。
          webview.getSettings().setJavaScriptEnabled(true);  
          觸摸焦點起做用
          requestFocus();
          取消滾動條
          this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

 

4)       設置WevView要顯示的網頁：
          互聯網用：webView.loadUrl("http://www.google.com"); 
          本地文件用：webView.loadUrl("file:///android_asset/XX.html");  本地文件存放在：assets文件中

5)       若是但願點擊連接由本身處理，而不是新開Android的系統browser中響應該連接。給WebView添加一個事件監聽對象（WebViewClient)並重寫其中的一些方法：
 shouldOverrideUrlLoading：對網頁中超連接按鈕的響應。當按下某個鏈接時WebViewClient會調用這個方法，並傳遞參數：按下的url。好比當webview內嵌網頁的某個數字被點擊時，它會自動認爲這是一個電話請求，會傳遞url：tel:123,若是你不但願如此可經過重寫shouldOverrideUrlLoading函數解決：

  

 

public boolean shouldOverrideUrlLoading(WebView view,String url){ if(url.indexOf("tel:")<0){//頁面上有數字會致使鏈接電話  view.loadUrl(url); } return true; }

 

          另外還有其餘一些可重寫的方法  
1 ，接收到 Http 請求的事件
onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host, String realm) 

 

2，打開連接前的事件
public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } 

這個函數咱們能夠作不少操做，好比咱們讀取到某些特殊的URL，因而就能夠不打開地址，取消這個操做，進行預先定義的其餘操做，這對一個程序是很是必要的。
 
3，載入頁面完成的事件
public void onPageFinished(WebView view, String url){ } 

一樣道理，咱們知道一個頁面載入完成，因而咱們能夠關閉loading條，切換程序動做。
 
4，載入頁面開始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { } 

這個事件就是開始載入頁面調用的，一般咱們能夠在這設定一個loading的頁面，告訴用戶程序在等待網絡響應。
 
經過這幾個事件，咱們能夠很輕鬆的控制程序操做，一邊用着瀏覽器顯示內容，一邊監控着用戶操做實現咱們須要的各類顯示方式，同時能夠防止用戶產生誤操做。
      

6)       若是用webview點連接看了不少頁之後，若是不作任何處理，點擊系統「Back」鍵，整個瀏覽器會調用finish()而結束自身，若是但願瀏覽的網頁回退而不是退出瀏覽器，須要在當前Activity中處理並消費掉該Back事件。
       覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法。

  

public boolean onKeyDown(int keyCoder,KeyEvent event){ if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){ webview.goBack(); //goBack()表示返回webView的上一頁面 return true; } return false; }

 

B.    Webview與js交互

Webview與js的雙向交互纔是android的webview強大所在，也是馬甲精神可以完全執行的基礎保障。

首先，webview能夠定義一個在其內嵌頁面中能夠觸發的事件

 

wv.addJavascriptInterface(new DemoJavaScriptInterface(), "demo"); private final class DemoJavaScriptInterface { DemoJavaScriptInterface(){} public void clickonAndroid( final String order){ mHandler.post(newRunnable(){ @Override public void run(){ jsonText="{"name":""+order+""}"; wv.loadUrl("javascript:wave("+jsonText+")"); } }); } }

 

 

經過以上代碼，便可實如今其內嵌網頁中觸發window.demo.clickOnAndroid(str)事件並傳參數str給webview。Webview接收到str以後，能夠經過以上代碼觸發其內嵌頁面中的js函數wave(str)。這樣就能夠實現網頁觸發webview的事件並傳參數，webview接收參數並調用js函數。

下面看個人Html腳本：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery.js"></script> <script> function toclient() { var order=$("#val").val(); window.demo.clickonAndroid(order); } function wave(str){ //alert(str.name);  $("#fromclient").text(str.name); } </script> </head> <body>這是一個html頁面 <br/> 輸入一個字符串：<br/> <input id="val" /> <input type="submit" value="點擊提交給客戶端" onclick="toclient();"/> <br /> 顯示返回：<label id="fromclient"></label> </body> </html>

 

 

經過腳本看到wave（str）函數是負責將原來傳給webview的數據從新拿回頁面，效果圖以下：

 

 

另外，若是你想獲取頁面的一些處理數據並交給webview客戶端處理，可在wave函數裏將數據alert，而後webview中重寫WebChromeClient的onJsAlert函數，具體代碼以下

wv.setWebChromeClient(new MyWebChromeClient()); final class MyWebChromeClient extends WebChromeClient{ @Override public booleanonJsAlert(WebView view, String url, String message, final JsResult result) { //message就是wave函數裏alert的字符串，這樣你就能夠在android客戶端裏對這個數據進行處理  result.confirm(); } return true; }