webview與JS的互動
一：hybird app, web app 和 native app 的區別
| Web App | Hybird App | 混合Native App | |
| 開發成本 | 低 | 中 | 高 |
| 維護更新 | 簡單 | 簡單 | 複雜 |
| 體驗 | 差 | 優 | 優 |
| 跨平臺 | 優 | 優 | 差 |
Native App是一種基於智慧手機本地作業系統如IOS，Android等並運用原生程式編寫執行的第三方運用程式，也叫本地App。
Web App 是針對Iphone，Android優化後的web站點，前端使用的技術是：html5，css，javascript等，伺服器端技術是java，php，asp等。需要注意的是web app開發還是比較有限的。因為Web APP開發不能整合裝置的核心功能，比如發文字資訊，也不能充分使用APP Store進行更新。但是Web APP開發也有其優勢所在。
首先它解決了iphone APP的可擴充套件性問題，因為它是可以跨平臺使用的。比如你開發了一款Web App，那麼它既可以在手機iphone上使用，也可以再平板ipad上使用，而不像iphone APP那樣只針對某個平臺。
其次web APP也繞開了APP store嚴格的提交和更新審查規則。眾所周知，隨著APP store中的APP逐漸增多，APP store也推出了一系列的提交和審查規則，可謂相當之嚴格。而web APP則繞開了這些提交和更新審查規則，從而使得web APP的升級和維護變得更容易。因為它是一個獨立的站點，而不是依附於app store上的，不管是升級還是維護在客戶端進行即可，無需提交稽核。
Hybird App通常分為三種型別：多view混合型，單View混合型，web主體型。
1. 多view混合型：
即Native View和web View獨立展現，交替出現。目前常見的Hybird App是Native View與web View交替出現，這種應用混合邏輯相對簡單，即在需要的時候，將webView當成一個獨立的view(Activity)執行起來，在webview內完成相關的展示操作。這種移動運用主體通常是 Native App, web技術只起到補充作用。開發難度和Native App相當。
2. 單view混合型：
即在同一個View內，同時包括Native View和Web View。互相之間是覆蓋（層疊）的關係。這種Hybrid App的開發成本較高，開發難度較大，但是體驗較好。如百度搜尋為代表的單View混合型移動應用，既可以實現充分的靈活性，又能實現較好的使用者體驗。
3. Web主體型：
即移動應用的主體是Web View，主要以網頁語言編寫，穿插Native功能的Hybrid App開發型別。這種型別開發的移動應用體驗相對而言存在缺陷，但整體開發難度大幅降低，並且基本可以實現跨平臺。Web主體型的移動應用使用者體驗的好壞，主要取決於底層中介軟體的互動與跨平臺的能力。國外的appMobi、PhoneGap，國內的AppCan和Rexsee都屬於Web主體型移動應用中介軟體。其中Rexsee不支援跨平臺開發。appMobi和PhoneGap除基礎的底層能力更多是通過外掛（Plugins）擴充套件的機制實現Hybrid。而AppCan除了外掛機制，還提供了大量的單View混合型的介面來完善和彌補Web主體型Hybrid App體驗差的問題，接近Native App的體驗。
以上的知識點是從這邊參考的： http://www.gtuanb.com/a/yd/2013/1231/127.html
二：Android webview與js的互動方式
1. 關於webview。
我們知道目前android市場上的一些應用採用的開發方式分為三種：Native App，web App，Hybird App 。下面介紹Hybird App中實現的主要技術native元件與JS的資料互動的理解。
Android API中提供了webview元件來實現對html渲染，所謂的HybridApp開發方式即是彙集了HTML5、CSS3、jS的相關開發技術，以及資料交換格式json/XML。 下面是Android_webview 與 JS互動的步驟如下：
1. 新建一個webview的佈局webview.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
如果應用中需要用到多個webview的介面，那隻要寫一個佈局就夠了。
2. 在activity中初始化webview
1. 初始化佈局
setContentView(R.layout.exam); webView = (WebView) findViewById(R.id.webview); webView.setScrollBarStyle(0);//滾動條風格，為0指滾動條不佔用空間，直接覆蓋在網頁上
2. 新增設定，使js程式碼能執行
WebSettings setting = webView.getSettings(); setting.setJavaScriptEnabled(true); setting.setJavaScriptCanOpenWindowsAutomatically(true); setting.setAllowFileAccess(true);// 設定允許訪問檔案資料 setting.setSupportZoom(true); setting.setBuiltInZoomControls(true); setting.setJavaScriptCanOpenWindowsAutomatically(true); setting.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); setting.setDomStorageEnabled(true); setting.setDatabaseEnabled(true); setting.setDefaultTextEncodingName("GBK");//設定字元編碼 webView.addJavascriptInterface(new AndroidForJs(this), "JavaScriptInterface");
設定完這些後會發現在除錯js程式碼時還是不能彈出alert對話方塊調式程式碼，上網查了之後發現是要新增如下程式碼：
webView.setWebChromeClient(new WebChromeClient());
3. 裝載html5頁面
本地介面：webView.loadUrl("file:///android_asset/test.html");，其中test.html頁面是放在assets資料夾下。
線上介面：webView.loadUrl("http://www.baidu.com");
3. 具體的互動如下：
（1）js呼叫native程式碼
上面的程式碼中 webView.addJavascriptInterface(new AndroidForJs(this), "JavaScriptInterface");
其中AndroidForJs就是專門用來放js呼叫native的程式碼的，"JavaScriptInterface"就是js呼叫AndroidForJs時的名稱，先寫一個AndroidForJs.java程式碼如下：
public class AndroidForJs { private Context mContext; private String cmdCode, resultKey; private long visitTime; public AndroidForJs(Context context) { this.mContext = context; } // 以json實現webview與js之間的資料互動 public String jsontohtml(String abc) { JSONObject map; JSONArray array = new JSONArray(); try { map = new JSONObject(); map.put("name", abc); map.put("age", 25); map.put("address", abc); array.put(map); map = new JSONObject(); map.put("name", "jacky"); map.put("age", 22); map.put("address", "中國北京"); array.put(map); map = new JSONObject(); map.put("name", "vans"); map.put("age", 26); map.put("address", "中國深圳"); map.put("phone", "13888888888"); array.put(map); } catch (JSONException e) { e.printStackTrace(); } return array.toString(); } }
上面的都是android(java)方法的配置項，前端不需要做任何事情。下面如下方法是前端呼叫native方法。
然後在js中可以用如下方式呼叫native方法
var result = JavaScriptInterface.jsontohtml("uyiyu");
其中"uyiyu"就是js傳給native的引數，需要的話就把引數傳過去，不需要的話就不傳。看具體的需求。其中jsontohtml是java中的一個方法。也可以改成其他的方法名。
result是native方法返回的值.一般是返回前端json資料，但是使用這種方式有問題，前端拿不到返回的資料，我們可以接著往下看。
注意：專案中遇到的問題是如果呼叫的native方法如果是一個向伺服器發起請求的方法，如下：
public String jsontohtml () { String result = null; cmdCode = "123"; visitTime = System.currentTimeMillis() / 1000; resultKey = Utils.getResultKey(cmdCode, visitTime, mContext); String key = Utils.getKey(cmdCode, visitTime, mContext); final String url = Utils.getMainUrl(key, cmdCode, visitTime, AllServerPort.URL_GET_EQUIPMENT, mContext); LogUtil.d(url); new HttpGetData(mContext, new CallBack() { @Override public void handlerData(String result) { // TODO Auto-generated method // stub LogUtil.d("-----RESPONSE------" + result); Map<String, String> backMsg = Utils.parseResponseResult( mContext, result, cmdCode, visitTime, resultKey); if (backMsg.get(Constant.BACK_FLAG).equals("1")) { String body = backMsg.get(Constant.BACK_BODY); JSONObject jsonBody; JSONArray jsonArray = null; try { jsonBody = new JSONObject(body); jsonArray = jsonBody.getJSONArray("dispatchKitList"); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } result = jsonArray.toString(); LogUtil.d("------------success--------------" + jsonArray.toString()); } } }, url).start(); return result; }
這時如果還用var result = JavaScriptInterface.jsontohtml ();這個方法會發現獲取的result是null的，這是因為java中向伺服器請求後到伺服器返回結果進入回撥函式handlerData是需要一段時間的，而js沒有等待這段時間就從java獲取了返回值，這時result還沒被賦值，就為空了，解決的方法只能是native從伺服器端獲取到資料後再呼叫js的方法把結果傳給js。所以上述方法改為
public String jsontohtml () { String result = null; cmdCode = "123"; visitTime = System.currentTimeMillis() / 1000; resultKey = Utils.getResultKey(cmdCode, visitTime, mContext); String key = Utils.getKey(cmdCode, visitTime, mContext); final String url = Utils.getMainUrl(key, cmdCode, visitTime, AllServerPort.URL_GET_EQUIPMENT, mContext); LogUtil.d(url); new HttpGetData(mContext, new CallBack() { @Override public void handlerData(String result) { // TODO Auto-generated method // stub LogUtil.d("-----RESPONSE------" + result); Map<String, String> backMsg = Utils.parseResponseResult( mContext, result, cmdCode, visitTime, resultKey); if (backMsg.get(Constant.BACK_FLAG).equals("1")) { String body = backMsg.get(Constant.BACK_BODY); JSONObject jsonBody; JSONArray jsonArray = null; try { jsonBody = new JSONObject(body); jsonArray = jsonBody.getJSONArray("dispatchKitList"); } catch (JSONException e) { // TODO Auto-generated catch block e.printStackTrace(); } Message message = MyEquipmentActivity.handler.obtainMessage(); message.what = Constant.HANDLER_SHOW_EQUIPMENT; message.obj = jsonArray.toString(); MyEquipmentActivity.handler.sendMessage(message); LogUtil.d("------------success--------------" + jsonArray.toString()); } } }, url).start(); return result; }
Handler中呼叫js方法
public static Handler handler = new Handler() { @Override public void handleMessage(Message msg) { // TODO Auto-generated method stub super.handleMessage(msg); String handlerMsg = ""; if (msg.obj != null) { handlerMsg = msg.obj.toString(); } switch (msg.what) { case Constant.HANDLER_SHOW_EQUIPMENT: webView.loadUrl("javascript:getEquipmentSuccess('" + handlerMsg + "')"); break; default: break; } } };
如上程式碼：webView.loadUrl("javascript:jsontohtmlSuccess('" + handlerMsg + "')");
js中呼叫native方法拿JSON資料最終方案：
前端只需要如下呼叫即可：
function jsontohtmlSuccess (json) { var data = eval("("+json+")");//解析json字串 // data 就是我們從開發那邊拿回來的json資料了。 }
2） native呼叫js方法
常見的方法是
不帶引數：webView.loadUrl("javascript:submit()");
帶引數：webView.loadUrl("javascript:getListSuccess('" + handlerMsg + "')");
目前程式中使用的方法就是這個，但是因為用這個方法無法獲取js return的引數，所以需要來回互相呼叫才能完成一次互動，比較麻煩。
3) 即上面可知：開發有2種（帶引數和不帶引數）方法呼叫前端程式碼，如下：
不帶引數：webView.loadUrl("javascript:submit()");
帶引數：webView.loadUrl("javascript:getListSuccess('" + handlerMsg + "')");
其中submit是我們javascript中的一個方法名稱。如下可以這樣寫程式碼：
function submit(){ var result = {“json”:””}; // json資料 JavaScriptInterface.submitResult(result); }
Json資料使用result變數儲存起來，之後使用JavaScriptInterface.submitResult(result)方法呼叫即可。submitResult是java方法，不用管！開發通過上面的程式碼就可以拿到我們前端的返回資料。
綜合所述：
1. js中呼叫native方法拿JSON資料最終方案：
前端只需要如下呼叫即可：
function jsontohtmlSuccess(json) { var data = eval("("+json+")");//解析json字串 // data 就是我們從開發那邊拿回來的json資料了。 }
伺服器端需要有這個方法：
webView.loadUrl("javascript:jsontohtmlSuccess('" + handlerMsg + "')");
2. JS中的資料返回給native端。如下程式碼：
function submit(){ var result = {“json”:””}; JavaScriptInterface.submitResult(result); }
伺服器端 需要有這個呼叫方法：
webView.loadUrl("javascript:submit()");
比如現在html5頁面有一個按鈕btn，點選按鈕btn後，需要把資料傳遞給native端；程式碼如下：
<div id=” bookidA”> bookidA </div> Var bookidA = document.getElementById(“bookidA”); bookidA.addEventListener(‘click’,function(e){ e.preventDefault(); submit(); }); function submit(){ var result = {“json”:””}; JavaScriptInterface.submitResult(result); }
三： JS與iOS Native Code互調方法
為大家介紹一個優秀的國人開發開源小專案：WebViewJavascriptBridge。它優雅地實現了在使用UIWebView時JS與ios 的Objective-C nativecode之間的互調，支援訊息傳送、接收、訊息處理器的註冊與呼叫以及設定訊息處理的回撥。它是連線UIWebView和Javascript的bridge。
如下JS程式碼實現connectWebViewJavascriptBridge
// 連線html function connectWebViewJavascriptBridge(callback) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener('WebViewJavascriptBridgeReady', function() { callback(WebViewJavascriptBridge) }, false) } } connectWebViewJavascriptBridge (function(bridge) { // init方法是把資料傳給開發 data是前端需要傳遞的資料 // 再呼叫responseCallback(data) bridge.init(function(message, responseCallback) { var data = {“json”:””}; responseCallback(data); }); // registerHandler 這個方法是從ios拿到資料 給前端。其中testJavascriptHandler要與開發那邊名字對應上 bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) { var data = eval("("+data+")"); }) });