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 的返回值,evaluateJavascript()
可以获取返回值
evaluateJavascript()
在 Android 4.4 之后才可以使用
要实现的效果:
如下图,页面上有一行文字 ”哈哈“,要