先來看下Web App Hybrid App Native App的圖形解析
Web App
Web App指採用Html5語言寫出的App，不需要下載安裝，類似於現在所說的輕應用，生存在遊覽器中的應用，基本上可以說是觸屏版的網頁應用。
優點：
（1）、開發成本低
（2）、更新快
（3）、無需通知使用者更新，不需要手動升級
（4）、能夠跨多個平台和終端
缺點：
（1）、臨時性的入口
（2）、無法獲得系統層級的通知，提醒，特效。。
（3）、使用者留存率低
（4）、設計受限諸多
（5）、體驗性差 Hybrid App
Hybrid App指的是半原生半web的混合類app，需要下載安裝，看上去類似Native App，但是有很少的UI Web View，訪問的內容是Web
Hybrid App極力的打造類似於Native APP的體驗，但是受限於技術，網速等。。。 Native App
Native App指的是原生程式，一般依託於作業系統，有很強的互動，是一個完整的app，可拓展行強，需要使用者下載安裝使用
優點：
（1）、打造完美的使用者體驗
（2）、效能穩定
（3）、操作速度快，上手流暢
（4）、訪問本地資源（通訊錄、相簿）
（5）、設計出色的動畫效果，轉場
（6）、擁有系統層級的貼心的通知或者提醒
（7）、使用者留存率高
缺點：
（1）、開發成本高，不同平台有不同的開發語言和介面適配
（2）、維護成本高，（例如一款app，已經更新至V5版本，但是仍然有使用者使用V3，V4版本，需要更多的開發人員維護之前的版本）
（3）、更新緩慢，根據不同的平台，提交–審核–上線等經過的流程較複雜
因為Native App是Web App 和Native App的交叉部分，那麼就相當於繼承了兩個的優點。
三者之間的優缺點比較：
Android於HTML互動
互動的兩種方式：
1、Android調用HTML
2、HTML調用Android
步驟：
1、設定允許執行的JS指令碼
mWebView.getSettings().setJavaScriptEnabled(true);
2、添加通訊介面
mWebView.addJavascriptInterface(mInterface, "app");
3、JS調用Android
mInterface.showName("hello javascript");
4、Android調用JS
mWebView.loadUrl("javascript:showName('"+name+"')");
WebView的三種載入方式：
//開啟本包內assers目錄下的index.html檔案 mWebView.loadUrl("file:///android_asset/index.html");//開啟本地sd卡內的index.html檔案 mWebView.loadUrl("content://com.android.thmlfileprovider/sdcard/index.html");//開啟指定URL的html檔案 mWebView.loadUrl("html://www.baidu.com(也就是地址)");
項目來說明使用：
**首先我們先建立一個Module
布局檔案很簡單：**
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:orientation="vertical" android:layout_height="match_parent" tools:context=".MainActivity"> <Button android:id="@+id/button" android:text="調用JS" android:layout_width="match_parent" android:layout_height="wrap_content"/> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent"></WebView></LinearLayout>
建立一個assets包，在此包下建立一個html檔案：
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>HTML5 測試</title><style type="text/css"> .input{ width:98%; height:38px; } .button{ width:60%; height:20px; background:#fffeff; }</style><script type="text/javascript"> //js調用as function sayhello(){ var name = document.getElementById("textName").value; app.sayHello(name); } //as調用js function showName(name){ document.getElementById("textName").value = name; }</script></head><body> <input id="textName" class="input"> <br/> <hr> <button class="button" onclick="sayhello()">say hello</button></body></html>
然後activity活動代碼：
這裡寫代碼片
package com.example.ruolan.hybridapp;import android.content.Context;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebView;import android.widget.Button;import android.widget.Toast;public class MainActivity extends AppCompatActivity implements View.OnClickListener { private WebView mWebView; private Button mButton; private WebAPPInterface mInterface; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webView); //開啟本包內assets目錄下的index.html檔案 mWebView.loadUrl("file:///android_asset/index.html"); //1、設定允許執行的JS指令碼 mWebView.getSettings().setJavaScriptEnabled(true); mInterface = new WebAPPInterface(this); //2、添加通訊介面 mWebView.addJavascriptInterface(mInterface, "app"); mButton = (Button) findViewById(R.id.button); mButton.setOnClickListener(this); } @Override public void onClick(View v) { //js調用as mInterface.showName("hello javascript"); } class WebAPPInterface { public Context mContext; public WebAPPInterface(Context context) { this.mContext = context; } //js調用as @JavascriptInterface //加上這一句話，不然的話在高版本的時候有可能報錯 public void sayHello(String name) { Toast.makeText(mContext, "name= " + name, Toast.LENGTH_SHORT).show(); } //as調用js public void showName(final String name) { //要在子線程中更新ui，這裡我們使用了runOnUiThread（）線程 runOnUiThread(new Runnable() { @Override public void run() { mWebView.loadUrl("javascript:showName('" + name + "')"); } }); } }}
當然了哈，如果是搞android的，那麼我們只要寫好android前端的代碼，對html的調用提供一個封裝好的介面，如果是html端，就會封裝好android調用JS的介面。
好了，我們來上一些效果圖：
剛開始的啟動並執行圖形：
點擊了調用JS按鈕（實現android調用js）：
最後點擊say hello按鈕：
當然了，這裡只是一個特別簡單的一個例子，我們可以在我們的介面中來定義或者是寫入更加複雜的代碼，完成我們需要的效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
