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

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.xmlCallJS --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的代码

作用及介绍：

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

6.activity_main.xml 界面配置文件

作用及介绍：

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

7.AndroidManifest.xml 文件

作用及介绍：

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

CTP

8.成功演示一个例子

介绍：

​

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

后续继续更新！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。