directory

Preface:

Introduction:

demo:

1. Create a project

2. Write a JS interface

3. A class implements the JS interface

4. Call annotations in the main execution class are quite detailed

5. Add webView to activity_main. XML

6. Write HTML code

7. Preview the picture to see the effect

8. To summarize

Preface:

Recently, the company plans to first learn android technology, and then recruit Andirod, which is quite expensive. The boss wants me to do it, so I will do it, and by the way, make some summaries, and quickly start android strategy from Java background transformation.

 

Andoird website address developer. The android. Google. Cn /

 

Introduction:

  • Android Hybrid Development
  • Android Java and HTML are used together
  • Java uses WebView and HTML to associate methods with each other
  • Here’s a closer look at the JS invocation process in WebView and HTML
  • And the importance of relevance

 

demo:

Download.csdn.net/download/we…

 

1. Create a project

 

2. Write a JS interface

package com.example.app0001; Public interface JsBridge {void jsExecutejAVAfun(String STR); / / Public interface JsBridge {void jsExecutejAVAfun(String STR); }Copy the code

 

3. A class implements the JS interface

package com.example.app0001; import android.webkit.JavascriptInterface; Public class WebJsbridge {// Define a js bridge interface after using private JsBridge ijsBridge; Public WebJsbridge(JsBridge jsi){this.ijsbridge = jsi; } / / js method to add annotations @ JavascriptInterface public void jsExecutejAVAfun (String value) {ijsBridge. JsExecutejAVAfun (value); }}Copy the code

 

4. Call annotations in the main execution class are quite detailed

package com.example.app0001; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.webkit.WebView; Public class app0001 extends AppActivity implements JsBridge{private WebView webView01; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_app0001); initContext(savedInstanceState); } @param savedInstanceState public void initContext(Bundle savedInstanceState){webView01 = findViewById(R.id.web001); webView01.getSettings().setJavaScriptEnabled(true); The new WebJsbridge() object in Java is equivalent to WebJsbridge in JS. This is the entity class of the JsBridge interface webView01.addJavascriptInterface(new WebJsbridge(this),"webJsbridge"); Webview01.loadurl ("file:///android_asset/index.html"); } /** * javaExecuteJs(final);} /** * @param value passes map data and can pass other types */ public void javaExecuteJs(final) String value){// Send a message through Handler // send a message through mHandler.post(method that operates on mwebView and calls js method webView01.post(new Runnable() {@override public Void run() {// call the javascript xxo() method webView01.loadUrl("javascript:if(window.javaExeJsFun){window.javaExeJsFun('"+value+"'); } "); }}); } @override public void jsExecutejAVAfun(String);} @override public void jsExecutejAVAfun(String) STR) {log. d("app0001","js called code method here!" ); JavaExecuteJs (" Java to JS treasures!" ); // call the js method to make the page react}}Copy the code

 

5. Add webView to activity_main. XML

<? The XML version = "1.0" encoding = "utf-8"? > <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FF6A32" tools:context=".app0001"> <WebView android:id="@+id/web001" android:layout_width="395dp" android:layout_height="715dp" tools:layout_editor_absoluteX="8dp" tools:layout_editor_absoluteY="8dp" /> </android.support.constraint.ConstraintLayout>Copy the code

 

6. Write HTML code

<! doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, User - scalable = no, initial - scale = 1.0, the maximum - scale = 1.0, Minimum -scale=1.0"> <meta http-equiv=" x-UA-compatible "content=" IE =edge"> <title>webview</title> </head> <body style="background-color:red; color:#fff; text-algin:center;" > <div id="onlyId"> Hello Word ! </div><br> I am the first treasure shown in this program! Onclick ="jsExecuteJavaFun()"> </body> <script> function jsExecuteJavaFun(){ if(window.webJsbridge){ webJsbridge.jsExecutejAVAfun("js to java data"); } } function javaExeJsFun(str){ document.getElementById("onlyId").innerHTML=str; } </script> </html>Copy the code

 

7. Preview the picture to see the effect

 

8. To summarize

  • The first step is to create a project
  • Write a JS interface to call
  • Write an implementation call class in which methods need to be annotated
  • webView01.addJavascriptInterface(new WebJsbridge(this),"webJsbridge");
Copy the code
  • WebJsbridge is that object when JS calls a Java method, and then finds the method under that object
  • And the same thing is true when Java calls JS as long as the object in the first layer of the document you can just call window
  • ok

 

 

The article continues to update reprint to indicate the source convenient update!