Part one: JS calls Android

  • 1. In this case, a web page control is clicked and the Android native reacts, such as a jump or processing method
  • 2. All the Android code needs to do is listen for the JS click method inside the code that writes the Web page
  • 3. Part of ordinary JS and Vue JS are monitored here
  • 4. Implement the following method no matter what third party web control you use
Webview.getsettings ().setjavascriptenabled (true); webView.getSettings (). / / this here, generally refers to the context loading a web page, the name refers to the js page method is called before an object, specific see js code webview. AddJavascriptInterface (this, "name");Copy the code
  • A code block without comments
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
webview.addJavascriptInterface(MainActivity.this,"android");
Copy the code
  • Here’s some JS code
  • Test.hello (” XXX “); window.test.hello(” XXXX “);
  • 2. So the method named Hello should be written in the Android code, so the name in the Android code before is test
  • 3. So as a webview. AddJavascriptInterface (this, “test”);
<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title>Carson</title> <script> function callAndroid() { So calling test is equal to calling the Android mapped object test.hello(" JS calls hello in Android "); </script> </head> <body> </button type="button" id="button1" onclick="callAndroid()"> </body> </html>Copy the code
  • Js code examples
<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>Copy the code
  • In a section of JS code to deepen the impression
  • 1. The following should be written in the webview. AddJavascriptInterface (this, “android”)
  • 2. It depends on the situation
< HTML > <head> <meta http-equiv=" content-type "charset="GB2312"/> <script Type ="text/javascript"> Function javacalljs() {document.getelementById ("showmsg").innerhtml = "Java calls a javascript function with no arguments "; } // Java calls js, android calls JS, Function javacalljswith(arg){document.getelementById ("showmsg").innerhtml = (arg); } </script> </head> <body> <h3>Web module </h3> <h3 id="showmsg"> </h3> Yes is android < input type = "button" value = "Js invokes the Java code" onclick = "window. The android. JsCallAndroid ()" / > < input type = "button" Value = "Js invokes the Java code and parameter named" onclick = "window. The android. JsCallAndroidArgs (' Js to get the parameters')" / > < / body > < / HTML >Copy the code
  • The code above is written in Java to listen for

1. It is above Android4.4 and must add @javascriptinterface to get a response. 2. The first method takes no parameters, and the second method takes parameters

@JavascriptInterface
public void jsCallAndroid(){
    
}

@JavascriptInterface
public void jsCallAndroidArgs(String args){
    
}
Copy the code

Part two: Android calls JS

  • 1. How does Android call js methods
  • 2. I am divided into two kinds, one is to call ordinary JS code, one is to call Vue JS code
  • Look at a method defined in JS for Android to call
function callFromJava(str){
    console.log(str);
}
Copy the code
  • It is then called in Java
  • 1. Javascript This is a fixed script
  • CallFromJava (” XXXX “) is the actual method to call
public void  javaCallJS(){
    webView.loadUrl("javascript:callFromJava('call from java')");
}
Copy the code

Android calls Vue JS

  • Vue JS
  • Mounted () specifies the mounted() method to which Java calls are mounted
Mounted () {window.calljsfunction = this.calljsfunction}, data() {return {MSG: // if () {window.calljsfunction = this.calljsfunction}, data() {return {MSG: }}, methods: {callJsFunction(STR) {this. MSG = "" + STR" return "js "}}Copy the code
  • Calling code in Java
  • 1. I found a way to write this on the Internet for your reference
  • 2. I write my own method direct point, here also passed a parameter
@Override public void callVueJS() { tbsWebView.post(new Runnable() { @Override public void run() { webView.loadUrl("javascript:callJsFunction('soloname')"); }}); }Copy the code
  • I wrote it
webView.loadUrl("javascript:callJsFunction('soloname')");
Copy the code