Android + H5 mixed development webView version of small instances + data interaction + interface interaction + JS call Java + Java call JS

directory

1. Look at the picture directory structure

2. This section describes the directory structure

3. Here’s a more detailed picture

4. This is going to expose some important code

A brief introduction to the following:

4.1 Java code MainActivity MainActivity class

Functions and introduction:

4.2 ImoocJsInterface Interface class for Java to invoke JS

Functions and introduction:

4.3 JsBridge Java interface class for invoking JS

Functions and introduction:

. 5. The HTML code

Functions and introduction:

6. Activity_main. XML interface configuration file

Functions and introduction:

7. AndroidManifest. XML file

Functions and introduction:

8. Successfully demonstrate an example

Introduction:

The first step is to create a new project here will not introduce too much online information, look for all OK

1. Look at the picture directory structure

2. This section describes the directory structure

2 of the picture is the item
Picture 3 is the content of the current app
Picture 1 is the current app where we want to write things
1. SRC /main/ Java
2. Below SRC /main/res is the configuration of the page and Java code interaction and the basic configuration of the APP
3. Assets is where the page code is placed (usually you need to create your own)

3. Here’s a more detailed picture

4. This is going to expose some important code

A brief introduction to the following:

Androidmanifest.xml — Main launch configuration class
Activity_main.xml — Interface configuration
MainActivity — Java main startup class
ImoocJsInterface — THE JS call interface is written here
JsBridge – an interface for easy extension

4.1 Java code MainActivity MainActivity class

package com.example.myapplication;

import android.os.Build;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
import android.widget.TextView;

import java.util.HashMap;
import java.util.Map;

/** * Java main boot class ** /
public class MainActivity extends AppCompatActivity implements JsBridge{
    // Define log
    private static final String TAG = "MainActivity";
    // Define a WebView interface to use
    private WebView mwebView;
    // Define a textView interface to use text
    private TextView mtextView;
    // Define a hadler
    private Handler mHandler;

    // Built-in boot method
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Initializes adding interface content
        initWidgets(savedInstanceState);
    }

    /** * initialize the following **@param savedInstanceState
     */
    private void initWidgets(Bundle savedInstanceState){
        // Link to the configured ID in activitymain.xml (webview)
        mwebView = findViewById(R.id.webview);
        // Link to the configuration id in activitymain.xml (tv_result)
        mtextView = findViewById(R.id.tv_result);
        mHandler = new Handler();
        // Allow webView to load JS
        mwebView.getSettings().setJavaScriptEnabled(true);

        The new ImoocJsInterface() object in Java is used when ImoocJsInterface is called
        mwebView.addJavascriptInterface(new ImoocJsInterface(this),"imoocJsInterface");
        // Load the page file:/// /android_asset/index.html
        mwebView.loadUrl("file:///android_asset/index.html");

        // Debug it
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mwebView.setWebContentsDebuggingEnabled(true); }}// Implement the interface to manipulate text and transfer data use
    @Override
    public void setTextViewValue(final String value) {
        Log.d(TAG, "value2="+value);
        // Manipulate the mtextView text with the mHandler.post(method
        mHandler.post(new Runnable() {
            @Override
            public void run(a) { mtextView.setText(value); }}); String cz = value +"vk";
        Map ma = new HashMap();
        ma.put("ab"."sss");
        // Call the js method
        CallJS(ma);
    }

    /** * Java calls the js method **@paramSTR passes map data and can also pass other types */
    public void CallJS(final Map str){
        // Send a message via Handler // send a message via mhandler. post(the method operates on mwebView and calls the js method
        mwebView.post(new Runnable() {
            @Override
            public void run(a) {
                // Note that the name of the called JS method must correspond to
                // Call the javascript remo() method
                mwebView.loadUrl("javascript:if(window.remo){window.remo('"+str+"'); }"); }}); }}Copy the code

Functions and introduction:

OnCreate — Android built-in method
InitWidgets — Initialization method
mwebView = findViewById(R.id.webview); In this method, r.i. D. EbView corresponds to activitymain.xml down here
CallJS – Java invokes JS methods

4.2 ImoocJsInterface Interface class for Java to invoke JS

package com.example.myapplication;

import android.util.Log;
import android.webkit.JavascriptInterface;

/** * Java calls the js interface class */
public class ImoocJsInterface {

    private static final String TAG = "ImoocJsInterface";

    // Define an interface to use
    private JsBridge ijsBridge;

    // a constructor
    public ImoocJsInterface(JsBridge jsi){
        this.ijsBridge = jsi;
    }

    // javascript methods are annotated
    @JavascriptInterface
    public void setValue(String value){
        
        Log.d(TAG, "value="+value);
        // call a method on the main classijsBridge.setTextViewValue(value); }}Copy the code

Functions and introduction:

The @javascriptInterface annotation is important for javascript invocation methods

4.3 JsBridge Java interface class for invoking JS

package com.example.myapplication;

/** * Define a js Java bridge interface */
public interface JsBridge {
    
    void setTextViewValue(String str);
    
}
Copy the code

Functions and introduction:

The group should be used as a bridge
Other business needs can create a new interface here to use

. 5. The HTML code

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ss</title>

    <script type="text/javascript" src="./libs/jquery.js"></script>
</head>
<body style="background-color:red;">Input information:<input type="text" id="abc" />
<input type="button" onclick="zcd();" value="Submit" />
<span id="sczd"></span>
</body>
<script type="text/javascript">
   //js passes data to Java
   function zcd(){
        // Check whether Java is pure subobject (that is, the one configured in Java)
        if(window.imoocJsInterface){
             $("#sczd").append( imoocJsInterface.setValue($("#abc").val()));
        }else{$("#sczd").append("No object content retrieved!"); }}// used when Java calls js
   var remo = function(str){$("#sczd").append(str);
   }
</script>
</html>
Copy the code

Functions and introduction:

The ZCD () method is js calling a Java method
The remo () method is how Java calls JS

6. Activity_main. XML interface configuration file


      
<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"
    tools:context=".MainActivity">

    <! --<TextView-->
        <! --android:layout_width="wrap_content"-->
        <! --android:layout_height="wrap_content"-->
        <! --android:text="Hello World!" -->
        <! --app:layout_constraintBottom_toBottomOf="parent"-->
        <! --app:layout_constraintLeft_toLeftOf="parent"-->
        <! --app:layout_constraintRight_toRightOf="parent"-->
        <! --app:layout_constraintTop_toTopOf="parent" />-->

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>
Copy the code

Functions and introduction:

Webview: Configures the page interface
Textview configures some text for the page
It is important to note that android: id”@+id/webview” corresponds to the main startup class used in Java

7. AndroidManifest. XML file


      
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapplication">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>
Copy the code

Functions and introduction:

This XML is primarily app
icon
Information such as name
In this case I just changed the name of the app
The modified file is the stirngs. XML file under values. Change the name to CTP

<resources>
    <string name="app_name">CTP</string>
</resources>
Copy the code

8. Successfully demonstrate an example

Click the green triangle button in the upper right corner to start. If the simulator is not configured on the computer, it can be configured on site or viewed on the mobile phone by linking to the mobile phone

Introduction:

Click on the input box and enter 123,
Click Submit
Data to background
Methods are called directly in the background
Action text change the middle text to 123
Data {ab= SSS} is passed and displayed on the page

Code location: download.csdn.net/download/we…

Ok to here a Java operation JS and JS operation Java method is ok

Continue to update!

Android + H5 mixed development webView version of small instances + data interaction + interface interaction + JS call Java + Java call JS

1. Look at the picture directory structure

2. This section describes the directory structure

3. Here’s a more detailed picture

4. This is going to expose some important code

A brief introduction to the following:

4.1 Java code MainActivity MainActivity class

Functions and introduction:

4.2 ImoocJsInterface Interface class for Java to invoke JS

Functions and introduction:

4.3 JsBridge Java interface class for invoking JS

Functions and introduction:

. 5. The HTML code

Functions and introduction:

6. Activity_main. XML interface configuration file

Functions and introduction:

7. AndroidManifest. XML file

Functions and introduction:

8. Successfully demonstrate an example

Introduction:

Related Posts

Spring Cloud uses Zuul and Ribbon for grayscale publishing

MAC update big SUR after environment variable

Three solutions to hash conflicts