馬甲神功之android版

     I.          引言

時下單純的web開發(fā)與客戶端開發(fā)居多，web應(yīng)用相較桌面應(yīng)用具有更新方便、維護(hù)成本低、開發(fā)迅速等特點(diǎn)，而客戶端則具有高實(shí)時性等優(yōu)勢。題目中所謂馬甲神功，是指將web開發(fā)與客戶端開發(fā)二者結(jié)合，大體分為兩類：客戶端瀏覽器控件內(nèi)嵌web應(yīng)用，web應(yīng)用內(nèi)嵌applet對象。通俗點(diǎn)說B/S應(yīng)用穿C/S馬甲，C/S應(yīng)用穿B/S馬甲，此為馬甲精神要髓。

 

隨著移動設(shè)備的不斷成熟，眼下移動設(shè)備的應(yīng)用已經(jīng)漸近桌機(jī)。Android操作系統(tǒng)的手機(jī)、平板廣泛存在并深受大眾喜愛，相應(yīng)基于android開發(fā)的應(yīng)用也十分火爆。筆者寫此文章一篇，主要介紹android下如何馬甲及馬甲效果能達(dá)到什么程度。

    II.         android的馬甲WEBVIEW

瀏覽器控件是每個開發(fā)環(huán)境都具備的，這為馬甲神功提供了用武之地，windows的有webbrowser，android和ios都有webview。只是其引擎不同，相對于微軟的webbrowser，android及ios的webview的引擎都是webkit，對Html5提供支持。本篇主要介紹android的webview之強(qiáng)大。

A.    webview組件如何使用

 

1)       添加權(quán)限：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)       設(shè)置WebView基本信息：
          如果訪問的頁面中有Javascript，則webview必須設(shè)置支持Javascript。
          webview.getSettings().setJavaScriptEnabled(true);  
          觸摸焦點(diǎn)起作用
          requestFocus();
          取消滾動條
          this.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

 

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

5)       如果希望點(diǎn)擊鏈接由自己處理，而不是新開Android的系統(tǒng)browser中響應(yīng)該鏈接。給WebView添加一個事件監(jiān)聽對象（WebViewClient)并重寫其中的一些方法：
 shouldOverrideUrlLoading：對網(wǎng)頁中超鏈接按鈕的響應(yīng)。當(dāng)按下某個連接時WebViewClient會調(diào)用這個方法，并傳遞參數(shù)：按下的url。比如當(dāng)webview內(nèi)嵌網(wǎng)頁的某個數(shù)字被點(diǎn)擊時，它會自動認(rèn)為這是一個電話請求，會傳遞url：tel:123,如果你不希望如此可通過重寫shouldOverrideUrlLoading函數(shù)解決：

    public boolean shouldOverrideUrlLoading(WebView view,String url){

         if(url.indexOf("tel:")<0){//頁面上有數(shù)字會導(dǎo)致連接電話

             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; } 

這個函數(shù)我們可以做很多操作，比如我們讀取到某些特殊的URL，于是就可以不打開地址，取消這個操作，進(jìn)行預(yù)先定義的其他操作，這對一個程序是非常必要的。
 
3，載入頁面完成的事件
public void onPageFinished(WebView view, String url){ } 

同樣道理，我們知道一個頁面載入完成，于是我們可以關(guān)閉loading條，切換程序動作。
 
4，載入頁面開始的事件
public void onPageStarted(WebView view, String url, Bitmap favicon) { } 

這個事件就是開始載入頁面調(diào)用的，通常我們可以在這設(shè)定一個loading的頁面，告訴用戶程序在等待網(wǎng)絡(luò)響應(yīng)。
 
通過這幾個事件，我們可以很輕松的控制程序操作，一邊用著瀏覽器顯示內(nèi)容，一邊監(jiān)控著用戶操作實(shí)現(xiàn)我們需要的各種顯示方式，同時可以防止用戶產(chǎn)生誤操作。
      

6)       如果用webview點(diǎn)鏈接看了很多頁以后，如果不做任何處理，點(diǎn)擊系統(tǒng)“Back”鍵，整個瀏覽器會調(diào)用finish()而結(jié)束自身，如果希望瀏覽的網(wǎng)頁回退而不是退出瀏覽器，需要在當(dāng)前Activity中處理并消費(fèi)掉該Back事件。
       覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法。

1.    public boolean onKeyDown(int keyCoder,KeyEvent event){

2.                          if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){

3.                                  webview.goBack();   //goBack()表示返回webView的上一頁面

4.   

5.                                  return true;

6.                          }

7.                          return false;

8.                  }

B.    Webview與js交互

Webview與js的雙向交互才是android的webview強(qiáng)大所在，也是馬甲精神能夠徹底執(zhí)行的基礎(chǔ)保障。

首先，webview可以定義一個在其內(nèi)嵌頁面中可以觸發(fā)的事件

  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+")");

             }

         });

     }

}

通過以上代碼，即可實(shí)現(xiàn)在其內(nèi)嵌網(wǎng)頁中觸發(fā)window.demo.clickOnAndroid(str)事件并傳參數(shù)str給webview。Webview接收到str之后，可以通過以上代碼觸發(fā)其內(nèi)嵌頁面中的js函數(shù)wave(str)。這樣就可以實(shí)現(xiàn)網(wǎng)頁觸發(fā)webview的事件并傳參數(shù)，webview接收參數(shù)并調(diào)用js函數(shù)。

下面看我的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="點(diǎn)擊提交給客戶端"

        onclick="toclient();"/>

      <br /> 

        顯示返回：<label id="fromclient"></label>

    </body>

</html>

 

通過腳本看到wave（str）函數(shù)是負(fù)責(zé)將原來傳給webview的數(shù)據(jù)重新拿回頁面，效果圖如下：

 

另外，如果你想獲取頁面的一些處理數(shù)據(jù)并交給webview客戶端處理，可在wave函數(shù)里將數(shù)據(jù)alert，然后webview中重寫WebChromeClient的onJsAlert函數(shù)，具體代碼如下

wv.setWebChromeClient(new MyWebChromeClient());

final  class MyWebChromeClient extends WebChromeClient{

    @Override

      public booleanonJsAlert(WebView view, String url, String message, final JsResult result) { 

//message就是wave函數(shù)里alert的字符串，這樣你就可以在android客戶端里對這個數(shù)據(jù)進(jìn)行處理

                result.confirm();        

              } 

 return true;  

     

        }

   III.        總結(jié)

馬甲精神綜合利用B/S及C/S的優(yōu)勢，android及iOS的webview強(qiáng)大到如此地步，更是馬甲仙人們的福音