《成为大前端》系列 - 4.2 Native与JS通信-JavascriptInterface(Android)

预置对象

前面我们讲过，WebView 启动时，就向 JS 预置了一些方法，比如：

window.androidBridge.callNative()

上面预置了名叫androidBridge的对象，someAndroidObj 包含一个方法callNative

那么如何实现呢

JavascriptInterface

修改 MainActivity 的代码，如下：

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView.settings.javaScriptEnabled = true
        webView.webViewClient = WebViewClient()

        // 在加载网页前添加我们的js对象，这个对象名为androidBridge
        // 即 window.androidBridge 可以访问到
        webView.addJavascriptInterface(BridgeObject(), "androidBridge")

        // 加载网页
        webView.loadUrl("https://baidu.com")
    }

    // 这个类是暴露给js的
    inner class BridgeObject {

        // 申明暴露给js的方法
        @JavascriptInterface
        fun callNative() {
            Log.e("WebView", "callNative ok.")
        }
    }
}

js 端调用：

window.androidBridge.callNative();

接下来我们要添加一个 HTML 页面，让上面这段 JS 运行起来

创建自己的网页

在写完以上代码后，我们需要测试代码运行情况。但是我们加载的是 baidu.com，没发运行我们的 js 代码，因此我们需要自己的网页。

我们有两种方式：

起一个临时的服务器，比如：http://localhost:8080/test.html
直接将网页写到 android 项目中

为方便理解 android 加载项目中的网页，我们采用第 2 中方式

创建 html 文件

首先，切换到 Project 结构:

新建 assets 目录，右键app/src/main文件夹，如图：

切回去 Android 结构，这部只是为了方便，因为 Android 结构目录层次没有这么深：

右键app/assets，新建文件，如图：

输入名字test.html，如何 OK，创建好后，输入以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"
    />
    <style type="text/css">
      html,
      body {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
      }
      button {
        display: block;
        width: 100%;
        height: 30%;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      function onClickButton() {
        // 出现了，我们调用native的代码
        window.androidBridge.callNative();
      }
    </script>

    <!-- 打算点击按钮调用native -->
    <button onclick="onClickButton">Call Native</button>
  </body>
</html>

最后，MainActivity 中的加载百度的地址改为：

// 加载assets中的网页
// 在Android中 file:///android_asset 代表assets文件夹路径
webView.loadUrl("file:///android_asset/test.html")

运行看效果

运行前了解一下 Android Studio 的Logcat, Logcat 会连接你的 Android 设备，输出 log，好比 Chrome 的 Console 面板。

说明：

选中后打开 Logcat 面板
选中运行 App 的设备
选中运行的 App
过滤出想要的 log
输出的 log

运行后，多点几次 Call Native 按钮就会得到第 2 点的输出，说明你已经完成了JS调用Native。