Android webview和js交互

刚登进来的时候看到博客园的首页好像改了，比之前好看很多了，也希望博客园可以越做越好！加油啊！

最近又对webview进行了一遍扫盲，对于webview和js交互这块理解比之前更深了一点，在这里记录下，以后忘了可以直接翻自己的博客来做。吐槽一下，csdn现状，抄来抄去，标注20年发布的文章，抄的却是人家11年发布的。有时候百度一搜，十几条csdn，一摸一样的内容，有些人抄博客连称呼都不改的。

牢骚发完了，讲讲js交互。

首先要想要交互，就必须允许webview加载js，比较小白的事，但还是要提醒。

webSettings.setJavaScriptEnabled(true);

android和js交互主要是在webview上实现的。怎么使用webview也不多说了，比较基础的东西。贴一下官方的地址。

https://developer.android.google.cn/guide/webapps/webview

这里讲了js怎么调用android的方法。写的也很详细，代码也简单，我就做一个搬运工吧。

    public class WebAppInterface {
        Context mContext;

        /** Instantiate the interface and set the context */
        WebAppInterface(Context c) {
            mContext = c;
        }

        /** Show a toast from the web page */
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
    

创建一个这样的类，注意，@JavascriptInterface这个，表示js可以调用这个方法。不加的js调用方法的时候会报一个方法不存在的错。

    WebView webView = (WebView) findViewById(R.id.webview);
    webView.addJavascriptInterface(new WebAppInterface(this), "Android");
   

这块我把它理解成channel，创建了一个js和webview的通道，然后通道里是js可以调用的方法，“android”这个是通道的标示，要跟js上对应起来。

    <input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />

    <script type="text/javascript">
        function showAndroidToast(toast) {
            Android.showToast(toast);
        }
    </script>
    

直接上对应的js方法，可以看到。Android.showToast即调用webview的showToast方法。（注：这里的Android和前面“Android”是对应的，自己写个demo跑一跑就明白了。）

不过当然还可以在android端去拦截要加载的url来实现方法，这块我给的链接里有，就在下面。我个人不太喜欢这种方法，不太纯粹。这里就不介绍了。

android调用js的方法

上面这些官网都有，我的文笔也不太行，没看明白的可以直接去翻官网。而且百度也能出来一堆。但是接下来讲的，我还没在官网里找到详细介绍的（官网肯定都有，不过介绍的详细与否就不清楚了）

然后自己稍微总结了下。

用的是webview的evaluateJavascript方法。文字描述不如代码来的直接。

String js = String.format("jsFunction(%s",string);
webView.evaluateJavascript(js,new ValueCallback<String>() {
  @Override
  public void onReceiveValue(String value) {
    Log.i("TAG",value+"!!!");
  }
});

这个就是直接调用js的方法（ jsFunction(string) ），这个方法存在js这边，有没有参数，有几个参数都随js这边来定。放参数主要是为了把android这边的数据回调给js。

 

这样一套组合拳，就可以完成js和android端的交互。当需要调用原生这边的方法的时候，使用第一种方法，并且传参数过去。然后把数据处理完使用第二种方法，再还给js。

还有就是，webview需要处于一个handle之下！！！不然调用方法会报错，要使用的时候把用getMainlooper拿过来。

东西比较简单，mark一下记录自己的成长。