webview与JS的交互

时间 2019-12-02

原文原文链接

webview与JS的交互javascript

一：hybird app, web app 和 native app 的区别php

	Web App	Hybird App	混合Native App
开发成本	低	中	高
维护更新	简单	简单	复杂
体验	差	优	优
跨平台	优	优	差

Native App是一种基于智能手机本地操做系统如IOS，Android等并运用原生程序编写运行的第三方运用程序，也叫本地App。css

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上的，不论是升级仍是维护在客户端进行便可，无需提交审核。html

Hybird App一般分为三种类型：多view混合型，单View混合型，web主体型。前端

1. 多view混合型：html5

即Native View和web View独立展示，交替出现。目前常见的Hybird App是Native View与web View交替出现，这种应用混合逻辑相对简单，即在须要的时候，将webView当成一个独立的view(Activity)运行起来，在webview内完成相关的展现操做。这种移动运用主体一般是 Native App, web技术只起到补充做用。开发难度和Native App至关。java

2. 单view混合型：android

即在同一个View内，同时包括Native View和Web View。互相之间是覆盖（层叠）的关系。这种Hybrid App的开发成本较高，开发难度较大，可是体验较好。如百度搜索为表明的单View混合型移动应用，既能够实现充分的灵活性，又能实现较好的用户体验。ios

3. Web主体型：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开发方式便是聚集了HTML五、CSS三、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+")");
       })
   });