如何在WebView中建立Android Apps

今日學習任務：理解Android Web Apps的運行機制，實現簡單的包含Web View的應用程序

涉及的主要內容：1) Android Web Apps的兩種形式 2）Web View的創建和使用方法    

  1. Web Apps的兩種形式

    在Android中，Web Apps有兩種形式供用戶訪問。一種就是用手機上的浏覽器直接訪問的網絡應用程序，這種情況用戶不需要額外安裝其他應用，只要有浏覽器就行；而另一種，則是在用戶的手機上安裝客戶端應用程序(.apk)，並在此客戶端程序中嵌入Web View來顯示從服務器端下載下來的網頁數據，比如新浪微博和人人網的客戶端。對於前者來說，主要的工作是根據手機客戶端的屏幕來調整網頁的顯示尺寸、比例等；而後者需要單獨開發基於Web View的Web app. 本篇主要是學習後者的開發。

      

     （圖片來源於：developer.android.com） 

  2. 怎樣在Android應用程序中加入Web View？

    2.1 先在layout文件中加入<WebView>元素

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"/>

    2.2 由於應用程序需要訪問網絡，所以需要在AndroidManifest.xml中請求網絡權限的：

 <uses-permission android:name="android.permission.INTERNET"/>

    2.3 使用Web View：

WebView myWebView = (WebView) findViewById(R.id.webview);

    2.4 加載一個頁面，可以用loadUrl()方法，例如：

 myWebView.loadUrl("http://www.linuxidc.com");

   3. 在Web View 中使用JavaScript 

     3.1 如果你加載到 Web View 中的網頁使用了JavaScript，那麼，需要在Websetting 中開啟對JavaScript的支持，因為Web View 中默認的是JavaScript未啟用。

// 獲取 WebSetting 

WebSettings webSettings = myWebView.getSettings();

 

// 開啟Web View對JavaScript的支持

webSettings.setJavaScriptEnabled(true);

     3.2 將JavaScript與Android客戶端代碼進行綁定。

       為什麼要綁定呢？ 可以看這個例子：如果JavaScript 代碼想利用Android的代碼來顯示一個Dialog,而不用JavaScript的alert()方法，這時就需要在Android代碼和JavaScript代碼間創建接口，這樣在Android代碼中實現顯示對話框的方法，然後JavaScript調用此方法。

      1）創建 Android代碼和JavaScript代碼的接口，即創建一個類，類中所寫的方法將被JavaScript調用

 public class JavaScriptInterface {  

  Context mContext;

    /** 初始化context，供makeText方法中的參數來使用 */
    JavaScriptInterface(Context c) {
        mContext = c;
    }

    /** 創建一個方法，實現顯示對話框的功能，供JavaScript中的代碼來調用 */
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }

}  

     2）通過調用addJavascriptInterface方法，把我們上面創建的接口類綁定與運行在Web View上的JavaScript進行綁定。

// 第二個參數是為這個接口對象取的名字，以方便JavaScript調用

webView.addJavascriptInterface(new JavaScriptInterface(this), "Android");

       3）現在，我們可以在html中的JavaScript部分調用showToast()方法了。

<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />