如何在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!')" />