当前位置: 开发笔记 > 编程语言 > 正文

android原生和H5交互

作者：杰v杰123_246 | 来源：互联网 | 2023-05-19 03:58

最近在左一个Android原生的H5混合开发的APP，之前还没有好好的总结一下Android原生和Ｈ5之间交互的方法，这里来总结一下：1、hybrid通信，主要就是前端的js和我们Android

最近在左一个Android原生的H5混合开发的APP，之前还没有好好的总结一下Android原生和Ｈ5 之间交互的方法，这里来总结一下：

1、hybrid通信，主要就是前端的js和我们Android端的通信 这是最基本JS和Java 的通信方式：
这里我们分四块来讲：

（1）、js调用android原生的代码（不传递参数）

（2）、js调用android原生的代码（传递参数）

（3）、android原生调用JS的代码（不传递参数）

（4）、android原生调用JS的代码（传递参数）

好的我们这里先来创建一个工程：

在工程的main文件夹下创建一个文件夹assets ,然后把写好的H5页面放入该文件夹中，H5页面代码如下：

[html] view plain copy 在CODE上查看代码片

<pre name="code" class="html">>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>这里是一个H5页面title>
head>
<body>
<p id="ptext">点击按键0 执行android中的 public void click0(){} 方法p>
<Button id="buttonId0" class="buttonClass" onclick="Javascript:button.click0()">按键0Button>
<p>点击按键1 执行android中的 public void click0(String data1,String data2){}方法p>
<Button id="buttonId1" class="buttonClass" onclick="Javascript:button.click0('参数1','参数2')">按键1Button>
<script>
function setRed(){
//这个方法设置 id 为 ptext 的元素的背景色为红色
var a = document.getElementById('ptext');
a.style.backgroundColor="#F00";
}
function setColor(color,text){
//这个方法设置 id 为 ptext 的元素的背景色为指定颜色
//设置 id 为 ptext 的元素的内容为text
var a = document.getElementById('ptext');
a.style.backgroundColor=color;
a.innerHTML = text;
}
script>
body>

上边是一个简单的H5页面，其中包含连个按钮，点击按钮触发android 原生的方法；里边还有两个JS 方法，其中包括两个，主要用于给android原生去调用。

回到 activity_main.xml中，布局如下：

[html] view plain copy 在CODE上查看代码片

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="manyizilin.com.androidh5.MainActivity">
<WebView android:id="@+id/webview"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<Button android:id="@+id/red"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="背景变成红色"/>
<Button android:id="@+id/color"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="背景色可以自定义"/>
LinearLayout>
RelativeLayout>

主要包含一个WebView控件和两个按钮，点击按钮可以触发上边H5页面中的JS方法

最后看一下MainActivity的代码：

[java] view plain copy 在CODE上查看代码片

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private WebView webView;
private Button redButton,colorButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webView = (WebView)findViewById(R.id.webview);
redButton = (Button)findViewById(R.id.red);
colorButton = (Button)findViewById(R.id.color);
redButton.setOnClickListener(this);
colorButton.setOnClickListener(this);
initWebView();
webView.loadUrl("file:///android_asset/android&h5Text0.html"); //加载assets文件中的H5页面
}
/**
*初始化WebView
*/
@SuppressLint("JavascriptInterface") //添加该字段
private void initWebView(){
WebSettings settings = webView.getSettings();
settings.setJavascriptEnabled(true); //设置运行使用JS
ButtonClick click = new ButtonClick();
//这里添加JS的交互事件，这样H5就可以调用原生的代码
webView.addJavascriptInterface(click,click.toString());
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.red: //调用JS中的无参数方法
webView.loadUrl("Javascript:setRed()");
break;
case R.id.color://调用JS中的有参数方法
webView.loadUrl("Javascript:setColor('#00f','这是android 原生调用JS代码的触发事件')");
break;
}
}
/**
* H5页面按钮点击触发事件
*/
class ButtonClick{
//这是 button.click0() 的触发事件
//H5调用方法：Javascript:button.click0()
@JavascriptInterface
public void click0(){
show("title","");
}
//这是 button.click0() 的触发事件，可以传递待参数
//H5调用方法：Javascript:button.click0('参数1','参数2')
@JavascriptInterface
public void click0(String data1,String data2){
show(data1,data2);
}
@JavascriptInterface //必须添加，这样才可以标志这个类的名称是 button
public String toString(){
return "button";
}
private void show(String title,String data){
new AlertDialog.Builder(getWindow().getContext())
.setTitle(title)
.setMessage(data)
.setPositiveButton("确定",null)
.create().show();
}
}
}

好了上边的代码就是这样，接下来我们来详细解释一下：

首先我们拿到了一个WebView，初始化webView，在webView中想要运行JS脚本，必须要设置：

[java] view plain copy 在CODE上查看代码片

WebSettings settings = webView.getSettings(；
settings.setJavascriptEnabled(true); //设置运行使用JSeang

加载 assets中的H5页面：

[java] view plain copy 在CODE上查看代码片

webView.loadUrl("file:///android_asset/android&h5Text0.html"); //加载assets文件中的H5页面

接下来写一个类，专门用于JS调用；

记得必须写写toString() 方法，放回来的结果和 JS中调用的方法的类名一致：

比如:在这个例子中JS调用原生是使用 Javascript：button.click0(); 注意一下，这个的 button 和Java中响应的类的toSring() 方法的返回值是一样的。

@JavascriptInterface

public String toString(){ return "button"; }

Javascript：button.click0(); 其中的 click0 和java响应类的触发方法的方法名是一致的。方法的权限都是 public 。

[java] view plain copy 在CODE上查看代码片

**
* H5页面按钮点击触发事件
*/
class ButtonClick{
//这是 button.click0() 的触发事件
//H5调用方法：Javascript:button.click0()
@JavascriptInterface
public void click0(){
show("title","");
}
//这是 button.click0() 的触发事件，可以传递待参数
//H5调用方法：Javascript:button.click0('参数1','参数2')
@JavascriptInterface
public void click0(String data1,String data2){
show(data1,data2);
}
@JavascriptInterface //必须添加，这样才可以标志这个类的名称是 button //在android 4.2之前不需要添加，在4.2之后需要添加
public String toString(){
return "button";
}
private void show(String title,String data){
new AlertDialog.Builder(getWindow().getContext())
.setTitle(title)
.setMessage(data)
.setPositiveButton("确定",null)
.create().show();
}
}

好了，准备得差不多了

（1）、js调用android原生的代码（不传递参数）/ （2）、js调用android原生的代码（传递参数）

然后通过WebView的addJavascriptInterface方法去注入一个我们自己写的interface。

[java] view plain copy 在CODE上查看代码片

ButtonClick click = new ButtonClick();
//这里添加JS的交互事件，这样H5就可以调用原生的代码
webView.addJavascriptInterface(click,click.toString());

这里来说明一下 addJavascriptInterface 这个方法，前一个参数是触发的对象，后一个参数是这对象的标志，需要在这个类的内部添加下面的代码，这样JS才可以识别这个类的内部方法：
[java] view plain copy 在CODE上查看代码片

@JavascriptInterface //@JavascriptInterface必须添加，这样才可以标志这个类的名称是 button //在android 4.2之前不需要添加，在4.2之后需要添加
public String toString(){
return "button";
}

现在点击H5页面中的按键0 就可以触发事件 ButtonClick 类中的 click0() 方法了,点击按键1 就可以触发事 ButtonClick 类中的 click0(String data1,String data2) 方法了

（3）、android原生调用JS的代码（不传递参数）

在加载 H5页面结束后，调用 webView.loadUrl("Javascript:setRed()"); 那么就可以调用该页面中的 setRed() 这个JS方法了

（4）、android原生调用JS的代码（传递参数）

在加载 H5页面结束后，调用

webView.loadUrl("Javascript:setColor('#00f','这是android 原生调用JS代码的触发事件')");

那么就可以调用该页面中的 setColor(color,text) 这个JS方法了

推荐阅读

io
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
io
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
plugins
Webpack5内置处理图片资源的配置方法

本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]

蜡笔小新 2023-12-14 15:39:51
byte
开发笔记:加密&json&StringIO模块&BytesIO模块

篇首语：本文由编程笔记#小编为大家整理，主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识，希望对你有一定的参考价值。一、加密加密 ... [详细]

蜡笔小新 2023-12-14 15:18:35
jsp
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
jsp
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
jsp
SpringBoot yml 配置多配置文件,开发环境,生产环境配置文件分开

原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中，有两种配置文件，一种 ... [详细]

蜡笔小新 2023-12-14 12:39:13
perl
Nginx使用AWStats日志分析的步骤及注意事项

本文介绍了在Centos7操作系统上使用Nginx和AWStats进行日志分析的步骤和注意事项。通过AWStats可以统计网站的访问量、IP地址、操作系统、浏览器等信息，并提供精确到每月、每日、每小时的数据。在部署AWStats之前需要确认服务器上已经安装了Perl环境，并进行DNS解析。 ... [详细]

蜡笔小新 2023-12-14 19:42:01
perl
JS进修笔记——闭包的运转机制和作用域

本文介绍了闭包的定义和运转机制，重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则，闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]

蜡笔小新 2023-12-14 18:45:00
go
在类中定义数组时出错 - Error on defining arrays in class

Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]

蜡笔小新 2023-12-14 17:38:12
version
kotlin动画实现上下移动、放大缩小、旋转功能

本文介绍了使用kotlin实现动画效果的方法，包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果，并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例，可以用来实现放大缩小的效果。 ... [详细]

蜡笔小新 2023-12-14 17:29:08
version
Spring源码解密之默认标签的解析方式分析

本文分析了Spring源码解密中默认标签的解析方式。通过对命名空间的判断，区分默认命名空间和自定义命名空间，并采用不同的解析方式。其中，bean标签的解析最为复杂和重要。 ... [详细]

蜡笔小新 2023-12-14 17:24:50
version
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
version
Java工具类库Hutool介绍及功能概述

本文介绍了Java工具类库Hutool，该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装，并提供了各种Util工具类。同时，还介绍了Hutool的组件，包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码，提高开发效率。 ... [详细]

蜡笔小新 2023-12-14 14:29:36
version
九度OnlineJudge之1002：Grading问题的解决方法

本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]

蜡笔小新 2023-12-14 13:00:09

杰v杰123_246

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章