現在h5與原生的混合開發越來越多，身為一名移動端開發人員，必須要跟隨潮流步伐，掌握基本的與h5的互動技能。

手頭正好有個demo，算是為開始準備混合開發的android夥伴們準備的開胃菜。

也許有同學該有疑問了，android顯示html頁面的不就一個webview載入url搞定了嗎？有何難點。。。（我只想說，童鞋，你把webview想的太智慧，太牛逼了）好吧，具體有何難點咱們往下看。

在載入html之前，我們先了解一下我們這裡html的來源。

一般來說，有兩種情況。1.資原始檔已經部署到伺服器上，直接請求伺服器內的資源。此種情況大家普遍認知。2.專案中的資源（也叫本地資源），html的展示所需資源基本都在本地的資原始檔夾中。as一般放置於assete內。我的專案內擺放如圖：

好了，切入正題，首先，都知道一點！如何放置一個html介面，沒錯就是它，我們今天的主角--webview。

api裡的方法：webview.loadUrl(xxxxxxx)。以為這就結束了嗎兄弟們？         其實才剛剛開始

下面我們一起看一下，在互動過程中我們可能遇見的坑！

要完成的功能也很簡單，就是一個記錄的展示頁

看似很簡單的兩個展示頁，左圖為展示的條目，右圖為點進去的詳情

好！所有的資原始檔部署到專案當中去，webview.loadUrl(xxxx);  正當悠哉悠哉的準備出結果時，發現出現的只是個架子！完全沒有資料！資料哪裡去了？瀏覽器中展示的是好好的呀！what？why？h5程式碼問題？檢查一遍，沒有呀？js問題？js。。。。。我的天，js難道不是h5裡面配置的嗎？

WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);

好！設定完後再次編譯執行，結果出來了，有資料了，點選其中一個條目，旋轉陀螺式黑屏退出，什麼鬼！！！

難道是點選的時候程式碼有問題，好，我慢慢除錯，點選時我彈出個alert，觀察一下。什麼alert也彈不出來？

沒辦法了，請教一下強大的度娘，很快出來結果：

webview.setWebChromeClient(new WebChromeClient());
WebChromeClient是輔助WebView處理Javascript的對話方塊，網站圖示，網站title，載入進度等
 
；

setJavaScriptCanOpenWindowsAutomatically(true);//允許js彈出視窗

ok，再除錯，出資料，點選，跳轉。。。畫風一轉，怎麼跑到瀏覽器中去了？

原因在此：

在使用 WebView 當載入網頁時，預設會呼叫系統的預設外部瀏覽器來載入頁面，原因是因為 WebViewClient 中的 shouldOverrideUrlLoading 方法預設返回為false。
要使用內部的 WebView 加網頁就要重寫 shouldOverrideUrlLoading 方法，使其返回 true。

webView.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
        }
});

這篇文章先稍稍揭開h5與webview互動的面紗，真正的“容貌”，也就是重頭戲——它們之間的互動，我們下一篇再講。