android + h5 混合开发 webview 版 小实例 + 数据交互 + 界面交互+ js调用java +java 调用js

目录

1. 看下图片目录结构

2. 介绍目录结构

3.在来张细化点的图片

4.接下来会把这几个重要的代码暴露粗来了

简单介绍以下：

4.1 java代码 MainActivity 主活动类

作用及介绍：

4.2 ImoocJsInterface java 调用js 的接口类

作用及介绍：

4.3 JsBridge  java 调用js 的接口类

作用及介绍：

.5.html的代码 

作用及介绍：

6.activity_main.xml 界面配置文件

作用及介绍：

7.AndroidManifest.xml 文件

作用及介绍：

8.成功演示一个例子

介绍：

---

第一步新建一个项目这里就不介绍了网上资料太多了，找找都ok

 

 

1. 看下图片目录结构

2. 介绍目录结构

• 图片的的2是项目
• 图片3是当前app的内容
• 图片1是当前app我们要写的东西位置
• 1.src/main/java下边写的是java代码
• 2.src/main/res下边写的是页面和java代码交互的配置和app的基础配置
• 3.assets 是页面代码放的地方（一般需要自己创建）

 

3.在来张细化点的图片

 

4.接下来会把这几个重要的代码暴露粗来了

简单介绍以下：

• AndroidManifest.xml  --主启动配置类
• activity_main.xml --界面配置
• MainActivity  --java主启动类
• ImoocJsInterface  --js调用接口写在这里
• JsBridge   --一个接口方便扩展

 

4.1 java代码 MainActivity 主活动类

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主启动类
 *
 */
public class MainActivity extends AppCompatActivity implements JsBridge{
    //定义日志
    private static final String TAG = "MainActivity";
    //定义一个webview 操作界面使用
    private WebView mwebView;
    //定义一个textview 操作界面文字使用
    private TextView mtextView;
    //定义一个 hadler
    private Handler mHandler;

    //自带的启动方法
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化添加接口内容
        initWidgets(savedInstanceState);
    }

    /**
     * 初始化以下
     *
     * @param savedInstanceState
     */
    private void initWidgets(Bundle savedInstanceState){
        //链接到activitymain.xml中的配置的id（webview）
        mwebView = findViewById(R.id.webview);
        //链接到activitymain.xml中的配置的id（tv_result）
        mtextView = findViewById(R.id.tv_result);
        mHandler = new Handler();
        //允许webview加载js
        mwebView.getSettings().setJavaScriptEnabled(true);

        //给WebView添加js接口 java中new ImoocJsInterface()对象等于js中 imoocJsInterface调用的时候使用
        mwebView.addJavascriptInterface(new ImoocJsInterface(this),"imoocJsInterface");
        //加载页面 file:///android_asset/index.html
        mwebView.loadUrl("file:///android_asset/index.html");

        //调试使用
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            mwebView.setWebContentsDebuggingEnabled(true);
        }

    }

    //实现接口中操作文本及传递数据使用
    @Override
    public void setTextViewValue(final String value) {
        Log.d(TAG, "value2="+value);
        //通过mHandler.post(方法操作mtextView文本
        mHandler.post(new Runnable() {
            @Override
            public void run() {
                mtextView.setText(value);
            }
        });
        String cz = value + "vk";
        Map ma = new HashMap();
        ma.put("ab","sss");
        //调用js方法
        CallJS(ma);
    }

    /**
     * java调用js方法
     *
     * @param str 传递的是一个map的数据也可以传递别的类型
     */
    public void CallJS(final Map str){
        // 通过Handler发送消息//通过mHandler.post(方法操作mwebView并且调用js方法
        mwebView.post(new Runnable() {
            @Override
            public void run() {
                // 注意调用的JS方法名要对应上
                // 调用javascript的remo()方法
                mwebView.loadUrl("javascript:if(window.remo){window.remo('"+str+"');}");
            }
        });
    }
}

作用及介绍：

• onCreate --android 自带的方法
• initWidgets -- 初始化方法
•  mwebView = findViewById(R.id.webview); --这个方法中R.id.webview 对应这下边的activitymain.xml
• CallJS --java调用js方法

 

4.2 ImoocJsInterface java 调用js 的接口类

package com.example.myapplication;

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

/**
 * java调用js的接口类
 */
public class ImoocJsInterface {

    private static final String TAG = "ImoocJsInterface";

    //定义一个接口之后使用
    private JsBridge ijsBridge;

    //一个构造方法
    public ImoocJsInterface(JsBridge jsi){
        this.ijsBridge = jsi;
    }

    //js方法要加上注解
    @JavascriptInterface
    public void setValue(String value){
        
        Log.d(TAG, "value="+value);
        //调用一个主类上的方法
        ijsBridge.setTextViewValue(value);
    }
}

作用及介绍：

• @JavascriptInterface 注解很重要 js调用的方法

 

4.3 JsBridge  java 调用js 的接口类

package com.example.myapplication;

/**
 * 定义一个js java 的桥梁接口
 */
public interface JsBridge {
    
    void setTextViewValue(String str);
    
}

作用及介绍：

• 组要起到桥梁的作用使用
• 有别的业务需要可以在这里创建新的接口使用

 

.5.html的代码 

<!DOCTYPE html>
<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 type="text" id="abc" />
<input type="button" onclick="zcd();" value="提交" />
<span id="sczd"></span>
</body>
<script type="text/javascript">
   //js传递数据到java
   function zcd(){
        //判断java是否纯在次对象（就是在java中配置的那个）
        if(window.imoocJsInterface){
             $("#sczd").append( imoocJsInterface.setValue($("#abc").val()));
        }else{
            $("#sczd").append("没获取到对象内容！");

        }
   }

   //java调用js时使用
   var remo = function(str){
         $("#sczd").append(str);
   }
</script>
</html>

作用及介绍：

•  zcd（）方法是js调用java方法
• remo（）方法是java调用js的方法

 

6.activity_main.xml 界面配置文件

<?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"
    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>

作用及介绍：

• webview:配置的是页面的界面
• textview 配置的是页面的一些文字
• 重要的是android：id"@+id/webview"  这个对应这java 中的主启动类中使用

 

7.AndroidManifest.xml 文件

<?xml version="1.0" encoding="utf-8"?>
<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>

作用及介绍：

• 这个xml主要是app 的
• 图标
• 名称等信息
• 在这个例子中我只修改了app的名称
• 修改的文件是values下的stirngs.xml文件 将名称改为 CTP

<resources>
    <string name="app_name">CTP</string>
</resources>

 

8.成功演示一个例子

点击右上角的那个绿色的三角按钮就启动了，如果电脑没有配置模拟器可以现场配置也可以链接手机的方式在手机上看

介绍：

• 点击输入框输入123 ,
• 点击提交 》
• 数据到后台
• 后台直接调用方法
• 操作文本 将中间的文字改为123
• 》在传递数据{ab=sss}并且展示在页面上

代码位置：https://download.csdn.net/download/weixin_42749765/10950201

ok 到这里 一个java操作js 和js 操作java方法就ok了

后续继续更新！