接触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 οnclick="s()">调用本地方法</button>
h5中的这个方法就调用了
function s(){ var result =window.android.hello(); document.getElementById("p").innerHTML=result; }
而这行代码又调用了我们写在本地的hello()方法,这样就调用成功了!!!
-----------------------------------------------------------------
写一遍,自己以后对这个更熟悉了,也方便回头嘲笑一下以前的自己。 哈哈,感觉自己写完觉得好乱!!