Vue JS 与Android webview的交互

最新推荐文章于 2025-05-21 09:20:20 发布

原创

最新推荐文章于 2025-05-21 09:20:20 发布 · 5.8k 阅读

12 ·

CC 4.0 BY-SA版权

本文总结了在Vue框架的web应用与Android WebView之间的交互方法。通过Android的`@JavascriptInterface`注解实现JS调用Android方法，以及使用`evaluateJavascript()`调用Vue方法。在Vue中定义调用原生方法的接口，并在Android端触发，需要注意WebView加载的时机以及回调处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转发：
https://blog.youkuaiyun.com/solocoder/article/details/81948286
这篇文章讲的比较全，但是太复杂了，我总结了下。
我的项目使用Vue框架写的web端，大部分逻辑都在iframe里外加一个底部导航bar，没有用Vue-cli，使用多页面跳转。Android studio 使用webView访问。
一，Vue调用Android的方法
1.Android onCreate() 里加这句，androidinfo是和html通信的标签

webView.addJavascriptInterface(this, "androidinfo");//添加js监听 这样html就能调用客户端

2.Vue 点击按钮scanclick,开启调用Android的方法showInfoFromJs()，“来自JS”是参数，str是Android返回的结果

methods:{
			scanclick(){
					var str = window.androidinfo.showInfoFromJs("来自JS");
	  				this.$toast(str);
	  			},
}

3.Android 方法得到来自JS的传参str,并返还结果s；
注意：@JavascriptInterface这个一定得加

 @JavascriptInterface
    public  String showInfoFromJs(String str){
        android.util.Log.i("tag", "来自JS的传参 :"+str); 
        String s = "返还的参数";     
        return s;
    }

二、Android 调用Vue方法
一般有两种方式webview.loadU