13 Android與HTML5互動

小楠總發表於2017-12-21
AndroidHTML

###一、Web App、Hybrid App、Native App介紹與對比

目前主流應用程式大體分為三類：Web App、Hybrid App、 Native App。如下圖所示：

13 Android與HTML5互動

首先，我們來看看什麼是 Web App、Hybrid App、 Native App。

  1. Web APP 例子：京東m.jd.com/

Web App 指採用Html5語言寫出的App，不需要下載安裝。類似於現在所說的輕應用。生存在瀏覽器中的應用，基本上可以說是觸屏版的網頁應用。

優點

  • 開發成本低
  • 更新快
  • 更新無需通知使用者，不需要手動升級
  • 能夠跨多個平臺和終端

缺點：

  • 臨時性的入口
  • 無法獲取系統級別的通知，提醒，動效等等
  • 使用者留存率低
  • 設計受限制諸多
  • 體驗較差

下圖是WebAPP受到的限制：

13 Android與HTML5互動

在設計Web APP時，應當遵循以下幾點：

簡化

  • 簡化不重要的動畫/動效
  • 簡化複雜的圖形文字樣式

少用

  • 少用手勢，避免與瀏覽器手勢衝突
  • 少用彈窗

減少

  • 減少頁面內容
  • 減少控制元件數量
  • 減少頁面跳轉次數，儘量在當前頁面顯示

增強

  • 增強Loading時的趣味性
  • 增強頁面主次關係
  • 增強控制元件複用性

#####Hybrid App

例子：淘寶、餓了麼、京東、QQ、微信等等。 Hybrid APP指的是半原生半Web的混合類App。需要下載安裝，看上去類似Native App，但只有很少的UI Web View，訪問的內容是 Web 。 例如Store裡的新聞類APP，視訊類APP普遍採取的是Native的框架，Web的內容。 Hybrid App 極力去打造類似於Native App 的體驗，但仍受限於技術，網速，等等很多因素。尚不完美。

#####Native App

Native APP 指的是原生程式，一般依託於作業系統，有很強的互動，是一個完整的App，可擴充性強。需要使用者下載安裝使用。

優點： （1）打造完美的使用者體驗 （2）效能穩定 （3）操作速度快，上手流暢 （4）訪問本地資源（通訊錄，相簿） （5）設計出色的動效，轉場， （6）擁有系統級別的貼心通知或提醒 （7）使用者留存率高

缺點： （1）分發成本高（不同平臺有不同的開發語言和介面適配） （2）維護成本高（例如一款App已更新至V5版本，但仍有使用者在使用V2， V3， V4版本，需要更多的開發人員維護之前的版本，不然舊版本出問題了，使用者可能就不用了） （3）更新緩慢，根據不同平臺，提交–稽核–上線 等等不同的流程，需要經過的流程較複雜

###二、技術特性對比

13 Android與HTML5互動

由上圖可見，Web APP 的開發基於Html5語言。而Html5語言本身又有著不可避免的侷限性。正是這些侷限性的存在，使得Web App在體驗中要遜於Native App。

###三、Hybrid App開發中Android與H5（JS）互動

既然混合APP現在這麼流行，開發成本、體驗都是開發技術中的首選，那麼我們有必要來學習一下。

Android中使用HTML開發的核心是使用WebView、原生API與JS的互動。 Android與HTML5的互動有2種情況：

1.Android原生API 呼叫HTML頁面中的JS程式碼 2.HTML頁面中的JS程式碼呼叫Android原生API

為什麼需要互動？因為HTML說到底只不過是一個靜態的Layout，只有與原生API進行互動才能開發我們需要的功能。

下面開始介紹主要的核心步驟：

1.設定webView允許執行JS指令碼： webSettings.setJavaScriptEnabled(true);

2.新增通訊介面（注意：InterfaceName要與JS中的名字一致） webView.addJavascriptInterface(Interface,”InterfaceName”)

3.JS呼叫Android InterfaceName.MethodName 4. Android呼叫JS（引數可以通過+“”+來拼接） webView.loadUrl("javascript:functionName()");

例子程式碼：
/**
 * 初始化WebView
 */
private void initWebView() {
    WebSettings settings = wv_detail.getSettings();
    //可以執行JS
    settings.setJavaScriptEnabled(true);
    //不阻塞網路圖片
    settings.setBlockNetworkImage(false);
    //使能快取
    settings.setAppCacheEnabled(true);
    appInterface = new AppInterface(this);
    //新增JS介面
    wv_detail.addJavascriptInterface(appInterface, "appInterface");
    //新增監聽
    wv_detail.setWebViewClient(new MyWebViewClient());

    wv_detail.loadUrl(Constants.URL_GOOD_DETAIL);
}

/**
 * Android與JS通訊的介面
 */
class AppInterface {

    private Context mCtx;

    public AppInterface(Context mCtx) {
        this.mCtx = mCtx;
    }

    //Android呼叫JS
    @JavascriptInterface
    public void showDetail(final long goodId) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                wv_detail.loadUrl("javascript:showDetail(" + goodId + ")");
            }
        });
    }

    //JS呼叫Android，這裡只是在Android端寫好的方法
    @JavascriptInterface
    public void buy(long goodId) {
        //做你需要做的事情
    }

    //
}

/**
 * 監聽
 */
class MyWebViewClient extends WebViewClient {

    //頁面有連結點選時候呼叫
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {

        //自定義功能
        if (url.startsWith("nan://.....")) {
            //自定義功能，比如打電話，等
        }

        return super.shouldOverrideUrlLoading(view, url);
    }

    //頁面載入完畢呼叫（因為JS有些方法需要在頁面載入完畢的時候才能呼叫，不然沒效）
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        appInterface.showDetail(mGood.getId());
    }
}
複製程式碼

下面給出HTML中的JS程式碼：

<script>

    $(function(){
       $("#btnBuy").click(function(){
           var id = $("#txtWareId").val();
           //JS呼叫Android中的方法
           window.appInterface.buy(id);
       });
    })

    //被Android呼叫的方法
    function showDetail(id){
        $("#txtWareId").val(id);
        $.ajax({
            url:"get?id="+id,
            success:function(ware){
                $("#ware_name").html(ware.name);
                $("#ware_img").attr("src",ware.imgUrl);
                $("#ware_price").html("￥ "+ware.price);
                $("#ware_sale_quantity").html(ware.sale);
            }
        })
    }

</script>
複製程式碼

###四、結束語

好了，今天的筆記就到這裡了，今天大年初一，楠妹妹祝大家猴年大吉O(∩_∩)O~~！至於高階的話，我們還需要去了解WebView的優化，學習前端的開發技術，WebViewClient與WebChromeClient的使用與區別，等等。

WebViewClient與WebChromeClient的區別：

  • WebViewClient主要幫助WebView處理各種通知、請求事件的
  • WebChromeClient主要輔助WebView處理Javascript的對話方塊、網站圖示、網站title、載入進度等。

看上去他們有很多不同，實際使用的話，如果你的WebView只是用來處理一些html的頁面內容，只用WebViewClient就行了，如果需要更豐富的處理效果，比如JS、進度條等，就要用到WebChromeClient。

如果覺得我的文字對你有所幫助的話，歡迎關注我的公眾號：

公眾號：Android開發進階

我的群歡迎大家進來探討各種技術與非技術的話題，有興趣的朋友們加我私人微信huannan88，我拉你進群交（♂）流（♀）。

相關文章