Android webview 与 js(Vue) 交互

js 与原生交互分为两种情况：js 调用原生方法，原生调用 js 方法。

本文将对这两种情况分别讲解，H5 端用 vue 实现。

一、前期准备（Vue项目准备）

本文的 H5 端用Vue 实现，所以在正式开始前先把 Vue 项目环境准备好。

项目写好后，执行 npm run serve 命令启动项目，启动成功后会在命令行看到两个地址：

http://localhost:8080/ 和 http://10.0.0.188:8080/

10.0.0.188 是我本机的 ip 地址，每个人的不一样。

在电脑的浏览器访问的话哪个都行，但在手机或模拟器访问的话需要用第二个带 ip 地址的，且要保证手机跟电脑连接同一个 wifi 或在同一网段。

注意：这里用的是 vue-cli 3.0，运行命令跟 vue-cli 2.X 有所区别。详情请自行查询官方文档。

启动成功后在 Android 项目中将 http://10.0.0.188:8080/ 地址配置给 WebView 即可

Intent intent = new Intent(getActivity(), ProgressWebviewActivity.class);
intent.putExtra("url", "http://10.0.0.188:8080/");
startActivity(intent);

到此，在手机中就可以访问 Vue 项目了。

二、Android 原生调用 JS 中的方法

Android 调用 JS 有两种方式，都是通过 WebView 的方法：

1. webview.loadUrl()
2. webview.evaluateJavascript()

二者区别：

1. loadUrl() 会刷新页面，evaluateJavascript() 则不会使页面刷新，所以 evaluateJavascript() 的效率更高

2. loadUrl() 得不到 js 的返回值，evaluateJavascript() 可以获取返回值

3. evaluateJavascript() 在 Android 4.4 之后才可以使用

要实现的效果：

如下图，页面上有一行文字 ”哈哈“，要在 WebView 页面加载完的时候通过 Android 原生代码将这行字改为 ”我通过原生方法改变了文字“