第一部分：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");

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Carson</title>  
      <script>
         function callAndroid()
         {
        	// 因为对象映射，因此调用test对象等于调用Android映射的对象
            test.hello("js调用了android中的hello方法");
         }
      </script>
   </head>
   <body>
      //点击按钮则调用callAndroid函数
      <button type="button" id="button1" onclick="callAndroid()"></button>
   </body>
</html>
复制代码

js代码示例

<script>
    
    window.onload = function () {
        
        let temp =  document.getElementById("test02");
        temp.onclick = function (e) {
            if(window.js_obj){
                window.js_obj.testJS();

            }
        }
        document.getElementById("test03").onclick = function(){
            if(window.js_obj){
                window.js_obj.shareTitleDesc("111","222");
            }
        };
        
        
    }

</script>
复制代码

在来段js代码加深印象

1.下面应该写成webview.addJavascriptInterface(this,"android")
2.this是上下文，根据具体状况定

<html>
    <head>
        <meta http-equiv="Content-Type" charset="GB2312"/>

        <script type="text/javascript">
        
        	// 这个方法是js调用java的方法名，也就是说这个方法名要在java中实现
            function javacalljs()
            {
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }

			// java调用js，咱们这说的就是android调用js，由于android用的java语法
            function javacalljswith(arg){
                 document.getElementById("showmsg").innerHTML = (arg);
            }

        </script>

    </head>

    <body>
        <h3>Web模块</h3>

        <h3 id="showmsg">调用js显示结果</h3>

		// 注意看，你能够知道addJavascriptInterface后面的name是哪一个吗？没错就是android
        <input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>

        <input type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
    </body>
</html>
复制代码

上面的代码在java中监听的写法是

1.在Android4.4以上而且必须加入@JavascriptInterface才有响应。 2.第一个方法不带参数，第二方法带参数javascript

@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')");
复制代码

安卓android java与vue js互相调用

第一部分：js调用android

第二部分：android调用js

android调用vue js