標(biāo)題: 商城開發(fā)筆記-13-Android與HTML5交互 [打印本頁]
作者: 51黑bing    時(shí)間: 2016-3-22 17:30
標(biāo)題: 商城開發(fā)筆記-13-Android與HTML5交互
一、WebApp、Hybrid App、NativeApp介紹與對比

     目前主流應(yīng)用程序大體分為三類：Web App、HybridApp、 NativeApp。如下圖所示：


首先，我們來看看什么是 Web App、HybridApp、 NativeApp。

1.Web APP例子：京東http://m.jd.com/
Web App指采用Html5語言寫出的App，不需要下載安裝。類似于現(xiàn)在所說的輕應(yīng)用。生存在瀏覽器中的應(yīng)用，基本上可以說是觸屏版的網(wǎng)頁應(yīng)用。
優(yōu)點(diǎn)
（1）開發(fā)成本低
（2）更新快
（3）更新無需通知用戶，不需要手動(dòng)升級
（4）能夠跨多個(gè)平臺和終端
缺點(diǎn)：
（1）臨時(shí)性的入口
（2）無法獲取系統(tǒng)級別的通知，提醒，動(dòng)效等等
（3）用戶留存率低
（4）設(shè)計(jì)受限制諸多
（5）體驗(yàn)較差

下圖是WebAPP受到的限制：

在設(shè)計(jì)Web APP時(shí)，應(yīng)當(dāng)遵循以下幾點(diǎn)：
1. 簡化
o             簡化不重要的動(dòng)畫/動(dòng)效
o             簡化復(fù)雜的圖形文字樣式

2. 少用
o             少用手勢，避免與瀏覽器手勢沖突
o             少用彈窗

3. 減少
o             減少頁面內(nèi)容
o             減少控件數(shù)量
o             減少頁面跳轉(zhuǎn)次數(shù)，盡量在當(dāng)前頁面顯示

4. 增強(qiáng)
o             增強(qiáng)Loading時(shí)的趣味性
o             增強(qiáng)頁面主次關(guān)系
o             增強(qiáng)控件復(fù)用性

2.Hybrid App例子：淘寶、餓了么、京東、QQ、微信等等。
HybridAPP指的是半原生半Web的混合類App。需要下載安裝，看上去類似NativeApp，但只有很少的UI WebView，訪問的內(nèi)容是 Web 。
例如Store里的新聞?lì)怉PP，視頻類APP普遍采取的是Native的框架，Web的內(nèi)容。
HybridApp 極力去打造類似于NativeApp 的體驗(yàn)，但仍受限于技術(shù)，網(wǎng)速，等等很多因素。尚不完美。

3.Native App
NativeAPP 指的是原生程序，一般依托于操作系統(tǒng)，有很強(qiáng)的交互，是一個(gè)完整的App，可拓展性強(qiáng)。需要用戶下載安裝使用。
優(yōu)點(diǎn)：
（1）打造完美的用戶體驗(yàn)
（2）性能穩(wěn)定
（3）操作速度快，上手流暢
（4）訪問本地資源（通訊錄，相冊）
（5）設(shè)計(jì)出色的動(dòng)效，轉(zhuǎn)場，
（6）擁有系統(tǒng)級別的貼心通知或提醒
（7）用戶留存率高
缺點(diǎn)：
（1）分發(fā)成本高（不同平臺有不同的開發(fā)語言和界面適配）
（2）維護(hù)成本高（例如一款A(yù)pp已更新至V5版本，但仍有用戶在使用V2， V3， V4版本，需要更多的開發(fā)人員維護(hù)之前的版本，不然舊版本出問題了，用戶可能就不用了）
（3）更新緩慢，根據(jù)不同平臺，提交–審核–上線 等等不同的流程，需要經(jīng)過的流程較復(fù)雜



二、技術(shù)特性對比
       由上圖可見，WebAPP 的開發(fā)基于Html5語言。而Html5語言本身又有著不可避免的局限性。正是這些局限性的存在，使得Web App在體驗(yàn)中要遜于NativeApp。


三、HybridApp開發(fā)中Android與H5（JS）交互
       既然混合APP現(xiàn)在這么流行，開發(fā)成本、體驗(yàn)都是開發(fā)技術(shù)中的首選，那么我們有必要來學(xué)習(xí)一下。

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

1.Android原生API 調(diào)用HTML頁面中的JS代碼
2.HTML頁面中的JS代碼調(diào)用Android原生API

為什么需要交互？因?yàn)?/font>HTML說到底只不過是一個(gè)靜態(tài)的Layout，只有與原生API進(jìn)行交互才能開發(fā)我們需要的功能。

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

1.設(shè)置webView允許執(zhí)行JS腳本：
webSettings.setJavaScriptEnabled(true);

2.添加通信接口（注意：InterfaceName要與JS中的名字一致）
webView.addJavascriptInterface(Interface,”InterfaceName”)

3. JS調(diào)用Android
InterfaceName.MethodName

4. Android調(diào)用JS（參數(shù)可以通過+“”+來拼接）
webView.loadUrl("javascript:functionName()");


例子代碼：
/**
* 初始化WebView
*/
private void initWebView() {
    WebSettings settings = wv_detail.getSettings();
    //可以執(zhí)行JS
    settings.setJavaScriptEnabled(true);
    //不阻塞網(wǎng)絡(luò)圖片
    settings.setBlockNetworkImage(false);
    //使能緩存
    settings.setAppCacheEnabled(true);
    appInterface = newAppInterface(this);
    //添加JS接口
    wv_detail.addJavascriptInterface(appInterface, "appInterface");
    //添加監(jiān)聽
    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調(diào)用JS
    @JavascriptInterface
    public void showDetail(final long goodId) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                wv_detail.loadUrl("javascript:showDetail(" + goodId + ")");
            }
        });
    }
    //JS調(diào)用Android，這里只是在Android端寫好的方法
    @JavascriptInterface
    public void buy(long goodId) {
        //做你需要做的事情
    }
    //
}
/**
* 監(jiān)聽
*/
class MyWebViewClient extends WebViewClient {
    //頁面有鏈接點(diǎn)擊時(shí)候調(diào)用
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        //自定義功能
        if (url.startsWith("nan://.....")) {
            //自定義功能，比如打電話，等
        }
        return super.shouldOverrideUrlLoading(view, url);
    }
    //頁面加載完畢調(diào)用（因?yàn)?/font>JS有些方法需要在頁面加載完畢的時(shí)候才能調(diào)用，不然沒效）
    @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調(diào)用Android中的方法
           window.appInterface.buy(id);
       });
    })
    //被Android調(diào)用的方法
    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>


四、結(jié)束語
       好了，今天的筆記就到這里了，今天大年初一，楠妹妹祝大家猴年大吉O(∩_∩)O~~！至于高級的話，我們還需要去了解WebView的優(yōu)化，學(xué)習(xí)前端的開發(fā)技術(shù)，WebViewClient與WebChromeClient的使用與區(qū)別，等等。

WebViewClient與WebChromeClient的區(qū)別：
WebViewClient主要幫助WebView處理各種通知、請求事件的
WebChromeClient主要輔助WebView處理Javascript的對話框、網(wǎng)站圖標(biāo)、網(wǎng)站title、加載進(jìn)度等。

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







歡迎光臨 (http://www.torrancerestoration.com/bbs/) Powered by Discuz! X3.1