Android实现H5与Native交互的两种方式_网络技术_宿州市腾雀网络科技有限公司

Android实现H5与Native交互的两种方式

发布时间 - 2026-01-10 22:00:01 点击率：次

前言

大家都知道在Android WebView使用中，经常需要H5页面和Native页面进行交互，比如在网页上点击分享按钮，调用本地分享接口进行分享，分享成功后本地调用网页的JavaScript代码展示一条分享成功的消息。下面来看看一起看看两种实现方式是什么？

一、Url拦截的方式

重写ShouldOverrideUrl进行Url拦截，这种方式通过H5和Native协商好的Url格式来表明H5页面想要Native进行的操作，比如拨打电话，播放视频，查看某个用户的信息等操作，每种操作对应一种url格式，比如：

“/media/image/123”代表H5要调用Native查看id为123的图片；
“/webapp/close/webview”表示H5需要Native关闭当前页面；
“/webapp/patient_card/？patient_id=345”表示H5要调用Native显示用户345的详情页

可以通过url的parameter传递参数，并通过Uri.parse进行解析。返回true表示截断对该Url请求的响应。

protected WebViewClient mWebClient = new WebViewClient() {
 @Override 
 public boolean shouldOverrideUrlLoading(WebView view, String url) {  
  // 添加tel链接响应
  if (url.startsWith("tel:")) { 
   Intent intent = new Intent(Intent.ACTION_DIAL, Uri.parse(url)); 
   startActivity(intent); 
   return true;
  }

  // 添加mp4播放相应
  if (url.endsWith(".mp4")) { 
   viewVideo(url); 
   return true;
  }

  // 添加图片链接响应
  if (Pattern.compile("/media/image").matcher(url).find()) { 
   viewImage(url); 
   return true;
  }
  // 关闭webview
  if (Pattern.compile("/webapp/close/webview").matcher(url).find()) {   
   onBackPressed(); 
   return true;
  }

  // 添加某个特殊url的响应
  if(Pattern.compile("/webapp/patient_card/").matcher(url).find()) { 
   Uri uri = Uri.parse(url); 
   String patientId = uri.getQueryParameter("patient_id");
   viewPatientInfo(patientId);

   return true;
  }

  return super.shouldOverrideUrlLoading(view, url);   
};

二、JavaScript注入方式

相比于Url拦截的方式，JavaScript注入的方式更加直接，Native将开放给H5调用的函数注入JavaScript，H5通过JavaScript调用Native函数完成操作。

1、获取webView的WebViewSettings设置，调用setJavaScriptEnabled开启JavaScript调用。

WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);

2、将需要暴露给JavaScript的函数前面添加@JavascriptInterface注解，只有添加了该注解的函数才能被JavaScript调用。

public class WebAppInterface {
 @JavascriptInterface
 public boolean method1(String param1, String param2) {
   // do something
 }

 @JavascriptInterface
 public boolean method2(String param1, String param2) {
   // do something
 }
}

3、通过WebView的addJavascriptInterface方法，将Native方法所在的class注入到JavaScript中。该函数的第一个参数是注入的Native对象，第二个参数是该对象的名字，JavaScript通过改名字访问该对象

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(), "InterfaceName");

4、这样，H5页面就可以通过下面的JavaScript调用Native的函数了

<script type="text/javascript"> 
 function method1(param1, param2) {  
  InterfaceName.method1(param1, param2); 
 }
</script>

Native调用JavaScript

Native调用JavaScript函数的方法比较简单，通过loadUrl函数进行：

// 无参数调用
contentWebView.loadUrl("javascript:javacalljs()");

// 有参数调用
mWebView.loadUrl("javascript:test('" + param+ "')"); // param是js的函数test()的参数

总结

以上就是这篇文章的全部内容了，希望本文的内容对各位Android开发者们能带来一定的帮助，如果有疑问大家可以留言交流。

# h5 # native # 交互 # android # h5和native交互 # Android的WebView与H5前端JS代码交互的实例代码 # Android webview加载H5方法详细介绍 # Android Studio打包H5网址页面 # 封装成APK # 移动端H5唤起APP的写法实例（IOS、android） # Android与H5交互产生Script Error踩坑解决 # 第一个 # 大家都 # 两种 # 可以通过 # 第二个 # 来看看 # 重写 # 这篇文章 # 如在 # 就可以 # 拨打电话 # 详情页 # 改名字 # 有疑问 # close # webview # parameter # webapp # patient_id # Uri

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Swoole怎么向指定的Task Worker进程投递任务

下一篇：老奶奶网站制作视频,适合老年人的网站有哪些？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Swoole怎么向指定的Task Worker进程投递任务

下一篇：老奶奶网站制作视频,适合老年人的网站有哪些？