Hybrid App 開發初探：使用 WebView 裝載頁面

　　Hybrid App 融合 Web App 的原理就是嵌入一個WebView元件，可以在這個元件中載入頁面，相當于内嵌的浏覽器，代碼如下：

<a href="http://blog.51cto.com/lihongbo/941153#">?</a>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<code>import</code> <code>android.app.Activity;</code>

<code>import</code> <code>android.os.Bundle;</code>

<code>import</code> <code>android.webkit.WebSettings;</code>

<code>import</code> <code>android.webkit.WebView;</code>

<code>public</code> <code>class</code> <code>AActivity </code><code>extends</code> <code>Activity{</code>

<code>    </code> 

<code>    </code><code>@Override</code>

<code>    </code><code>public</code> <code>void</code> <code>onCreate(Bundle savedInstanceState) {</code>

<code>        </code><code>super</code><code>.onCreate(savedInstanceState);</code>

<code>        </code><code>// 建立WebView</code>

<code>        </code><code>WebView webView= </code><code>new</code> <code>WebView(</code><code>this</code><code>);</code>

<code>        </code><code>// 切換到内容視圖</code>

<code>        </code><code>setContentView(webView);</code>

<code>        </code><code>// 擷取WebView配置</code>

<code>        </code><code>WebSettings ws = webView.getSettings();</code>

<code>        </code><code>// 啟用JavaScript</code>

<code>        </code><code>ws.setJavaScriptEnabled(</code><code>true</code><code>);</code>

<code>        </code><code>// 載入assets目錄下的一個頁面</code>

<code>        </code><code>webView.loadUrl(</code><code>"file:///android_asset/www/BoBox/index.html"</code><code>);</code>

<code>    </code><code>}</code>

<code>}</code>

　　還有另一種引入方式是在布局檔案中添加 WebView 元件，代碼如下：

<code>&lt;?</code><code>xml</code> <code>version</code><code>=</code><code>"1.0"</code> <code>encoding</code><code>=</code><code>"utf-8"</code><code>?&gt;</code>

<code>&lt;</code><code>LinearLayout</code> <code>xmlns:android</code><code>=</code><code>"http://schemas.android.com/apk/res/android"</code>

<code>    </code><code>android:orientation</code><code>=</code><code>"vertical"</code>

<code>    </code><code>android:layout_width</code><code>=</code><code>"fill_parent"</code>

<code>    </code><code>android:layout_height</code><code>=</code><code>"fill_parent"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>WebView</code> 

<code>        </code><code>android:layout_width</code><code>=</code><code>"fill_parent"</code>

<code>        </code><code>android:layout_height</code><code>=</code><code>"wrap_content"</code>

<code>        </code><code>android:id</code><code>=</code><code>"@+id/webview"</code>

<code>        </code><code>/&gt;</code>

<code>        </code> 

<code>&lt;/</code><code>LinearLayout</code><code>&gt;</code>

<code>public</code> <code>class</code> <code>BActivity </code><code>extends</code> <code>Activity{</code>

<code>        </code><code>setContentView(R.layout.webview);</code>

<code>        </code><code>// 查找WebView</code>

<code>        </code><code>WebView webView = (WebView) findViewById(R.id.webview);</code>

<code>        </code><code>// 在載入assets目錄下的一個頁面</code>

<code>        </code><code>webView.loadUrl(</code><code>"file:///android_asset/www/index.html"</code><code>);</code>

　　WebView 還有一個非常重要的方法——addJavascriptInterface，可以用來實作 Java 程式和 JavaScript 程式的互相調用，代碼如下：

<code>webView.addJavascriptInterface(</code><code>new</code> <code>Object(){</code>

<code>    </code><code>public</code> <code>void</code> <code>clickOnAndroid(){</code>

<code>        </code><code>mHandler.post(</code><code>new</code> <code>Runnable(){</code>

<code>            </code><code>public</code> <code>void</code> <code>run(){</code>

<code>                </code><code>webView.loadUrl(</code><code>"javascript:wave()"</code><code>);</code>

<code>            </code><code>}</code>

<code>        </code><code>});</code>

<code>}, </code><code>"demo"</code><code>);</code>

　　頁面代碼如下：

<code>&lt;</code><code>script</code><code>&gt;</code>

<code>    </code><code>function wave() {</code>

<code>        </code><code>document.getElementById("id").innerHTML = "Hello World!";</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>div</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>id</code><code>=</code><code>"demo"</code> <code>onclick</code><code>=</code><code>"window.demo.clickOnAndroid()"</code><code>&gt;Click Me&lt;/</code><code>a</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

　　這樣，當你點選頁面上 Click Me 按鈕的時候就會調用 Java 代碼中的 clickOnAndroid 函數，clickOnAndroid 函數中又調用頁面中的 wave 方法。需要注意的是：這個接口在 Android 2.3 版本的模拟器中運作會導緻 WebView 崩潰，目前還沒有修複。這是一個非常簡單的示範 Java 和 JavaScript 互相調用的例子，在實際應用中可以在頁面調用的 clickOnAndroid 函數中再調用攝像頭、通訊錄、通知提醒等裝置功能。

本文轉自山邊小溪 51CTO部落格，原文連結：http://blog.51cto.com/lihongbo/941153，如需轉載請自行聯系原作者