Android webview 与js(vue) 交互_Simon66991

网络 02-07 1231

Android 原生调用 JS 中的方法

Android 调用 JS 有两种方式，都是通过 WebView 的方法（1）webview.loadUrl() （2）webview.evaluateJavascript()

二者区别：（1）loadUrl() 会刷新页面，evaluateJavascript() 则不会使页面刷新，所以 evaluateJavascript() 的效率更高（2）loadUrl() 得不到 js 的返回值，evaluateJavascript() 可以获取返回值（3）evaluateJavascript() 在 Android4.4 之后才可以使用

Vue 代码

mounted() { //将要给原生调用的方法挂载到 window 上面 window.callJsFunction = this.callJsFunction }, data() { return { msg: "vue" } }, methods: { callJsFunction(str) { this.msg = "原生方法改变文字：" + str return "js调用成功" } }

在 methods 中定义一个供 Android 调用的方法 callJsFunction(str) , 并可接收一个参数 str，然后改变页面中的文字。

如果只是在 ==methods ==中定义方法，原生调用会找不到这个方法。所以要在页面加载的时候将方法挂载在 ==window ==上，这样 WebView 就可以拿到此方法了。注意，这步很重要一定要写！

注意一个细节，==this.callJsFunction ==后面不要加括号 ()，加括号相当于直接调用了。

总结起来 Vue 中要做的事情就两步：（1）在 methods 中定义方法（2）在 mounted 中将方法挂载在 ==window ==上

Android 中代码需要等页面加载完在 WebView 的 onPageFinished 方法中写调用逻辑，否则不会执行。

//loadUrl() 实现 //如果不需要传参数，把参数去掉即可 tbsWebView.loadUrl(“javascript:callJsFunction()”); tbsWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url, headerMap); return true; } @Override public void onPageFinished(WebView webView, String s) { super.onPageFinished(webView, s); //安卓调用js方法。注意需要在 onPageFinished 回调里调用 tbsWebView.post(new Runnable() { @Override public void run() { tbsWebView.loadUrl("javascript:callJsFunction('soloname')"); } }); } }); } }); //evaluateJavascript() 实现 //其他地方跟loadUrl()一样，只是把 tbsWebView.loadUrl(“javascript:callJsFunction(‘soloname’)”); 替换掉 @Override public void onPageFinished(WebView webView, String s) { super.onPageFinished(webView, s); //安卓调用js方法。注意需要在 onPageFinished 回调里调用 tbsWebView.post(new Runnable() { @Override public void run() { tbsWebView.evaluateJavascript("javascript:callJsFunction('soloname')", new ValueCallback<String>() { @Override public void onReceiveValue(String s) { Logger.d("js返回的结果： " + s); } }); } }); } JS 调用 Android 原生方法

Vue 代码

methods: { showAndroidToast() { $App.showToast("js调用") } }

Android 代码

//这里将类JsJavaBridge ，在 JS 中映射为了 $App，所以在 Vue 中可以这样调用 $App.showToast(“哈哈，我是js调用的”)。 public class JsJavaBridge { private Activity activity; private WebView webView; public JsJavaBridge(Activity activity, WebView webView) { this.activity = activity; this.webView = webView; } @JavascriptInterface public void onFinishActivity() { activity.finish(); } @JavascriptInterface public void showToast(String msg) { ToastUtils.show(msg); } } //然后通过 WebView设置 Android 类与 JS 代码的映射 tbsWebView.addJavascriptInterface(new JsJavaBridge(this, tbsWebView), "$App");