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

概述前言大家都知道在AndroidWebView使用中，经常需要H5页面和Native页面进行交互，比如在网页上点击分享按钮，调用本地分享接口进行分享，分享成功后本地调用网页的JavaScript代码展示一条分享成功的消息。下面来看看一

前言

大家都知道在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开发者们能带来一定的帮助，如果有疑问大家可以留言交流。

总结

以上是内存溢出为你收集整理的Android实现H5与Native交互的两种方式全部内容，希望文章能够帮你解决Android实现H5与Native交互的两种方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。