Android开发之Webview中原生与JS交互

待我称王封你为后i 2022-05-07 02:28 521阅读 0赞

### 文章目录 ###

*  概述
 *  使用场景
 *  交互方式
 *   *  Java调用JS代码
     *  JS调用Java代码
 *  总结

# 概述 #

由于手机硬件资源的快速提升，使得采用混合开发的可能性逐渐成为现实并且流行起来。Android开发中最为简单的方式就是通过**Webview**来嵌入一个网页使web作为App的一部分。

# 使用场景 #

1.  非重交互场景
2.  非计算密集型场景
3.  对UI复杂度要求不高的场景  
    以上可见，《王者荣耀》断然不会使用混合开发的，其实谷歌举了两个最适合的场景：  
    第一：内容需要动态更新的场景，例如APP里面的法律条款展示等。  
    第二：总是需要通过网络来拉取展示内容的场景，例如新闻展示。

# 交互方式 #

我们知道，网页的行为现在是使用`JavaScript`来处理的，而Android原生使用的是`Java（Kotlin）`，交互的意思即原生可以调用JavaScript方法，而JavaScript也可以调用原生的方法。

Java调用JS代码的方法有2种：

1.  通过WebView的loadUrl（） 方法
2.  通过WebView的evaluateJavascript（）方法

JS调用Java代码的方法有3种：

1.  通过WebView的addJavascriptInterface（）进行对象映射
2.  通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url
3.  通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回调拦截JS对话框alert()、confirm()、prompt（） 消息

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

先上一张效果图：  
![在这里插入图片描述][70]

## Java调用JS代码 ##

上面提到Android提供了两种方法来实现Java执行Js代码，其中`evaluateJavascript()`方法是从 **API 19**（4.4版本）开始提供的，而现在Android已经发布到 **API 28** (9.0)了, 4.4以下版本占的比例已经非常少了，相信过不了多久基本上就不存在了，所以我们要放下历史包袱，直接使用新的方法。最重要的是，在Android 4.4及其以上版本Google 采用了 **Chromium**([http://www.chromium.org/][http_www.chromium.org]) 作为系统WebView的底层内核，而不是**WebKit**了。新的webview对`HTML5`,`CSS3`,`Javascript`的支持更为广泛，而且js执行引擎直接换成了V8，执行效率大大提升.

void evaluateJavascript(String script, ValueCallback<String> resultCallback){}

参数script : 要执行的JS代码。  
参数 resultCallback: Js代码执行后的返回值

具体步骤：  
第一：新建一个工程，新建一个Activity，包含一个`Webview`控件。  
第二：新建一个demo.html的文档，作为要在webview中展示的web页面，里面含有js代码。将其放在工程中的**assets**文件家中。

<!DOCTYPE html>
    <html>
    <head lang="zh-cmn-Hans">
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <meta name="viewport" content="width=device-width"/>
        <title>JsBridgeDemo</title>
    </head>
    <style>
        .btn {
            text-align: center;
            background: #d8d8d8;
            color: #222;
            padding: 20px;
            margin: 30px;
            font-size: 24px;
            border-radius: 4px;
            box-shadow: 4px 2px 10px #999;
        }
    
        .btn:active {
            opacity: .7;
            box-shadow: 4px 2px 10px #555;
        }
    </style>
    
    <body>
    <div class="btn" onclick="showAndroidToast('Js调用Java')">Js调用Java函数</div>
    <p id="content"></p>
    
    <script type="text/javascript">
        function showAndroidToast(toast) {
            android.showToast(toast);
        }
    
       function fillContent(){
          document.getElementById("content").innerHTML ="此处内容由Java调用Js方法展示在Webview上";
          return "ok";
       }
    </script>
    </body>

第三步：在activity中通过webview调用Js代码。

final WebView myWebView=findViewById(R.id.webView);
      WebSettings webSettings=myWebView.getSettings();
      webSettings.setJavaScriptEnabled(true);
      myWebView.loadUrl("file:///android_asset/demo.html");
      Button btnCallJs=findViewById(R.id.btn_call_js);
      btnCallJs.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              myWebView.evaluateJavascript("fillContent()", new ValueCallback<String>() {
                  @Override
                  public void onReceiveValue(String value) {
                      Toast.makeText(MainActivity.this,value,Toast.LENGTH_SHORT).show();
                  }
              });
          }
      });

首先设置允许Webview执行Js，然后加载assets文件夹中的demo.html网页，最后在点击按钮的时候使用`evaluateJavascript()`方法来执行Js代码。

> JS代码的调用需要在web页面加载完成后才可以正常执行。可以通过监听WebViewClient的onPageFinished 回调来完成,如下代码所示。

myWebView.setWebViewClient(new WebViewClient(){
              @Override
              public void onPageFinished(WebView view, String url){
                  super.onPageFinished(view, url);
                  //执行Js代码
              }
          });

## JS调用Java代码 ##

上面提到有三种方法可以实现Js调用Java代码的目的，其中第一种简单明了，为Google推荐的方法，但是其在**API 17**（4.2）之前存在任意执行漏洞。但是我们前面分析了，4.4 都快没有了，4.2 就更别说了，所以我们直接针对Android4.4编程，使用这个方法是安全的。

具体步骤：  
第一步：新建一个接口类`JavaInterface` ，里面定义给Js调用的方法。这些方法必须是**public**的，而且必须使用`@JavascriptInterface`进行注解，例如下面的代码示例中的`showTost()`。

public class JavaInterface {
        private Context mContext;
    
        JavaInterface(Context c) {
            mContext = c;
        }
    
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }

第二步：给Webview添加与Js的映射关系

myWebView.addJavascriptInterface(new JavaInterface(this),"android");

参数1：接口类的对象  
参数2：**Java**对象映射到**Js**的对象名，可以在**Js**中使用这个对象来调用接口类中的方法。

第三步：在Js中调用Java方法

可以看到，在js中可以使用**android**这个Js对象，直接调用我们定义在`JavaInterface`类中的方法。

# 总结 #

以上就是Android开发中使用Webview 完成原生与web的交互。开篇说道除了本文介绍的方式，还有其他几种方式，大部分不是有历史包袱就是本意不是用来做这件事情的，所以应该优先使用本文的方式，如果有的同学需要了解其他方法，可以参考[这篇博客][Link 1]，写的比较全。

如果是在项目中使用而不是为了学习，推荐使用前人写好的三方库，例如[DSBridge][]，JsBridge等。特别是dsbridge，三端全有，现代简洁，易用。

[70]: /images/20220506/ef3cd235f4204a7ea2d7833eb3fec8b2.png
[http_www.chromium.org]: http://www.chromium.org/
[Link 1]: https://blog.csdn.net/carson_ho/article/details/64904691/
[DSBridge]: https://github.com/wendux/DSBridge-Android