Android 与 h5 js交互问题，初步了解。

接触Android也算很久了，但是js交互一直不熟也可以说是没认真接触过。今天项目修改也完成了，闲来无事忽然想起了这个问题，上网查找了一下，初步了解了一下。自己也写了demo还算ok！

废话不多说了，咱直接来说一下。（写这个呢可能帮不到太多人，但是想让自己印象深刻一些！）

首先，js交互分为两种（Android基于webview操作）：一、Android端触发web端的事件；二、相反的，就是web中调用Android本地的方法。

我们接下来就分别说一下这两种情况：

1、Android端触发web端的事件：我在代码里呢写了一个按钮，实现了点击事件

其中的onClick事件出发了点击事件，但是有一点我没搞清楚就是，为什么我在一个按钮的话通过id来分别调用两个方法，没成功。所以此处就用一个吧。在我们代码里有一个方法是

//Android调用有返回值js方法
    @TargetApi(Build.VERSION_CODES.KITKAT)
    public void onClick(View v) {
        //有返回值
        mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Log.e(TAG, "onReceiveValue value=" + value);
                Toast.makeText(MyWebViewActivity.this,value,Toast.LENGTH_SHORT).show();
            }
        });

        //无返回值
//                mWebView.loadUrl("javascript:s()");
    }

此处就是详细调用时的情况，在此处有两种调用的方式，当调用方法有返回值时，或者没有返回值。

sum（1,2）实在html文件中自己写的一个求和方法

function sum(a,b){
return a+b;
}
当然在实际开发中，这个具体方法还需要前段同时来辛苦一下子！

s（）方法，是一个没有返回值的方法，所以我们可以直接用以上的形式调用（具体方法代码是调用了我们本地自己写的代码一会会说到。）

function s(){
var result =window.android.hello();
document.getElementById("p").innerHTML=result;
}

这样的话，Android本地调用web的方法就成功了！

2、接下来说一下web调用Android本地的方法（此处很容易想到的例子就是当前段给我们一个web页是有一个返回按钮，但我们点击想让他会出我们自己写的activity时，结果出发的是他们web内部的方法，而没有结束我们当前想关闭的activity）

先贴一下代码

WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");

这个是webview的基础配置，第二行是你要跟获得跟js交互的权限一定要有！

第三行呢，就是我们接下来要说的了。很明显 new JsInteration 是我们自己写的一个class类，“android”这个标志我认为是声明一下是Android端吧。JsInteration的实现如下：

//h5调用本地方法
public class JsInteration {

    @JavascriptInterface
    public String hello() {
       return "hello word";
    }
    @JavascriptInterface
    public String hello11() {
        return "hello word11123";
    }

    @JavascriptInterface
    public void fin() {
        MyWebViewActivity.this.finish();
    }
}

这里面有三个方法，共同点就是 @JavascriptInterface注释！！这些方法，你可以自己随便定义按照具体需求。此处就出现了刚才我说的要在下面说的那行代码：

var result =window.android.hello();

window.android.hello();就是调用了我们Android的方法，返回的值赋给了result。至于document.getElementById("p").innerHTML=result; 这行代码是h5中的代码，想我媳妇请教之后的值就是给一个“p”标签赋值。太简单。这样一来我们通过

<button onclick="s()">调用本地方法</button>

h5中的这个方法就调用了

function s(){
var result =window.android.hello();
document.getElementById("p").innerHTML=result;
}

而这行代码又调用了我们写在本地的hello（）方法，这样就调用成功了！！！

-----------------------------------------------------------------

写一遍，自己以后对这个更熟悉了，也方便回头嘲笑一下以前的自己。哈哈，感觉自己写完觉得好乱！！

Android 与 h5 js交互问题，初步了解。

猜你喜欢