做过 Android 混合开发的，应该都知道 Android 中 Java 代码和 Javascript 代码之间的交互怎么做。
首先回顾一下 Java 和 Javascript 之间的交互。
JavaScript 调用 Java
Android 中 WebView 添加供 Html 页面调用的 Java 方法：
|
1
2
3
4
5
6
7
8
|
mWebView.addJavascriptInterface(new DirectToJS(), "AndroidObj");class DirectToJS{ @JavascriptInterface public void showToast(){ Toast.makeText(this, "Android Toast",Toast.LENGTH_SHORT).show(); }} |
Html 页面中 JavaScript 调用 Java 方法的方式如下：
|
1
|
window.AndroidObj.showToast(); |
JavaScript 代码中: window 是网页的 Window 实体，这个做前端开发的人都非常熟悉； AndroidObj 是 Android 端给 WebView 提供的一个实体，Android 会将这个实体赋给 WebView 的 window； showToast() 就是 Java 提供给 Html 的方法。
Java 调用 JavaScript
首先 Html 上写个普通的 JavaScript 方法：
|
1
2
3
|
function showAlert(){ alert("Html Alert");} |
Android 中只要执行以下代码即可：
|
1
|
mWebView.loadUrl("javascript:showAlert()"); |
Vue 框架上的坑
如果前端用的是 Vue 框架，那么如果你在 js 脚本上直接写一个方法，Android 是调用不到的，无论是写在那个位置。
这是因为 Vue 框架中，脚本上的方法不是属于 window 的方法，你应该将要提供给 Android 调用的方法赋给 window，这样，Android 中才能调得到：
|
1
2
3
|
window['showAlert'] = { alert("Html Alert");} |
总得来说，对于普通的网页，写在 js 脚本上的方法，默认都是属于 window 实体的；而 Vue 框架中，由于框架内部的实现机制比较特殊，你写在 js 脚本上的方法，不是真正页面上的方法，所以在 Android 中是调用不到的。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.laocaixw.cn/2018/05/17/Android_WebView_Vue
