webview与JS的交互
2015-06-03 20:54 龙恩0707 阅读(7949) 评论(3) 编辑 收藏 举报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+")"); }) });
