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