《成为大前端》2.2 Native与JS通信 - WebView添加JavascriptInterface（Android）

大前端, 成为大前端, 成为大前端-Android

JS调用Native

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

1
window.someAndroidObj.someFunc("hello world")

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

那么如何实现呢

WebView添加JavascriptInterface

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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端调用：

1
window.androidBridge.callNative()

创建自己的网页

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

我们有两种方式：

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

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

创建html文件

首先，切换到Project结构:

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <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中的加载百度的地址改为：

1
2
// 加载assets中的网页
webView.loadUrl("file:///android_asset/test.html")

运行看效果

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

Logcat

说明：

  1. 选中后打开Logcat面板
  2. 选中运行App的设备
  3. 选中运行的App
  4. 过滤出想要的log
  5. 输出的log

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