> For the complete documentation index, see [llms.txt](https://coderiding.gitbook.io/dgjj/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://coderiding.gitbook.io/dgjj/hu-lian-wang-gai-nian/qian-duan/android/android-yu-vue-js-hu-xiang-tiao-yong.md).
# Android与vue js互相调用
## 第一部分：js调用android
1.这种情况，就是点击了web页面的控件，让android原生做出反应，如跳转或者处理方法
2.android代码要做的就是在写web页面的代码内部监听js点击的方法
3.这里监听的时候部分普通js和vue js 4.不管你用的什么web第三方控件都要实现下面的方法
```
// setJavaScriptEnabled这句代码在用TBS腾讯浏览服务的jar包时，显示过期，但是还是有效
webview.getSettings().setJavaScriptEnabled(true);
// 这里的this，一般是指加载web页面的context，name指的是js页面调用方法前的一个对象，具体看js代码
webview.addJavascriptInterface(this,"name");
```
* 来一段没有注释的代码块
```
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");
```
* 来一段js代码
1.里面的test.hello("xxx")，应该可以写成window\.test.hello("xxxx")
2.所以以hello命名的方法要写在android代码中，那之前在android代码中的那个name就是test
3.所以写成webview\.addJavascriptInterface(this,"test");
```
Carson
//点击按钮则调用callAndroid函数
```
* js代码示例
```
```
* 在来段js代码加深印象
1.下面应该写成webview\.addJavascriptInterface(this,"android")
2.this是上下文，根据具体情况定
```
Web模块
调用js显示结果
// 注意看，你可以知道addJavascriptInterface后面的name是哪个吗？没错就是android
```
* 上面的代码在java中监听的写法是
1.在Android4.4以上并且必须加入@JavascriptInterface才有响应。
2.第一个方法不带参数，第二方法带参数
```
@JavascriptInterface
public void jsCallAndroid(){
}
@JavascriptInterface
public void jsCallAndroidArgs(String args){
}
```
## 第二部分：android调用js
1.那android怎么调用js中的方法呢
2.我分为两种，一个是调用普通的js代码，一个是调用vue js的代码
* 看在js中定义的一个方法给android调用
```
function callFromJava(str){
console.log(str);
}
```
* 接着在java中调用
1.javascript这个是固定写法
2.callFromJava("xxxx")才是真正要调用的方法
```
public void javaCallJS(){
webView.loadUrl("javascript:callFromJava('call from java')");
}
```
## android调用vue js
* vue js 中的写法
1.里面一定要把给java调用的方法挂在到window上，就是mounted()中写的
```
mounted() {
//将要给原生调用的方法挂载到 window 上面
window.callJsFunction = this.callJsFunction
},
data() {
return {
msg: "哈哈"
}
},
methods: {
callJsFunction(str) {
this.msg = "我通过原生方法改变了文字" + str
return "js调用成功"
}
}
```
* java中调用代码
1.网上找了一种这个写法的，给参考下
2.我自己写的方法直接点，这里还传了一个参数
```
@Override
public void callVueJS() {
tbsWebView.post(new Runnable() {
@Override
public void run() {
webView.loadUrl("javascript:callJsFunction('soloname')");
}
});
}
```
* 自己写的是
```
webView.loadUrl("javascript:callJsFunction('soloname')");
```
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://coderiding.gitbook.io/dgjj/hu-lian-wang-gai-nian/qian-duan/android/android-yu-vue-js-hu-xiang-tiao-yong.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.