android调用vue中的js方法,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 的方法：

webview.loadUrl()

webview.evaluateJavascript()

二者区别：

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

loadUrl() 得不到 js