当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID;  大概就是点击H5界面跳转到Android原生界面

好了,需求已经分析完毕了,Android只需要获取H5的点击事件和传递的参数;

来,上代码:

/启用支持javascript
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

Android4.2以上需要@JavascriptInterface注解,其目的是为了安全;

public class JavaScriptObject{
public JavaScriptObject(Activity activity) { }
@JavascriptInterface
public void setToken(String token){
//token就是商品的ID,这里拿到商品的ID后直接跳转到商品详情页,并把id传递过去
}
@JavascriptInterface
public void definedShare(String ShareJson){
}
}

/*
*添加js接口,参数1是本地类名,参数2是标记;H5调用需要 "window.标记.类名中的方法名" 才能调用
*/
webView.addJavascriptInterface(new JavaScriptObject(this), "android");

到这里Android端需要写的就完成了;

这个是我截的图,可以看一下:

这里是H5需要写的代码:

<script type="text/javascript">
function s(){
//调用Android的setToken()方法
var result =window.android.setToken(goodsId);
document.getElementById("p").innerHTML=result;
}
</script>

----------------------------------------------------------------------------------------------------------------------------------

附:如果在Android端调用H5中的方法:

 /*
* Android调用H5中的方法
*/
//传固定字符串可以直接用单引号括起来
mWebView.loadUrl("javascript:alertMessage('哈哈')");//访问H5里带参数的方法,alertMessage(message)为H5里的方法 //当出入变量名时,需要用转义符隔开
String content="1016";
mWebView.loadUrl("javascript:alertMessage(\"" +content+ "\")" ); //Android调用有返回值js方法,安卓4.4以上才能用这个方法
mWebView.evaluateJavascript("11", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.i(TAG, "js返回的结果为=" + value);
}
});

抽成方法:

 private void callJS(String callback, String status) {
if (TextUtils.isEmpty(status)) {
if (AndroidUtils.isKitkat()) {
mWebView.evaluateJavascript("javascript:" + callback + "()", null);
} else {
mWebView.loadUrl("javascript:" + callback + "()");
}
} else {
if (AndroidUtils.isKitkat()) {
mWebView.evaluateJavascript("javascript:" + callback + "('" + status + "')", null);
} else {
mWebView.loadUrl("javascript:" + callback + "('" + status + "')");
}
}
}

Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。的更多相关文章

  1. uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式

    前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...

  2. JS与APP原生控件交互

    "热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...

  3. 基于H5的混合开发介绍(一)WebView

    转自: https://www.cnblogs.com/sanchang/p/9261461.html 一 WebView到底是什么    1 WebView是一种控件,它基于webkit引擎,因此具 ...

  4. Hybrid小程序混合开发之路 - 数据交互

    HTML+CSS是历史悠久.超高自由度.控制精准.表现能力极强.编码简单.学习门槛超低.真跨平台的一种UI界面开发方式. 本文介绍的是微信小程序和H5混合开发的一种数据交互方式. 很多应用在原生界面中 ...

  5. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  6. Android中Native和H5交互

    1.概述 时至今日,H5的跨平台性越发凸显优势,一套代码适配android.ios,既能减少开发成本,又便于更新与维护.但是native的性能体验也确实更佳,尤其体现在复杂界面和频繁变化的界面上.事实 ...

  7. Android WebView 基本设置与H5 交互

    mWebView.setDrawingCacheEnabled(true); WebChromeClient webChromeClient = new WebChromeClient(); mWeb ...

  8. 客户端相关知识学习(三)之Android原生与H5交互的实现

    Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...

  9. Android与H5交互

    1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...

随机推荐

  1. VMware虚拟机里centos7下安装mysql5.6并授权远程连接Navicat

    这节来安装Mysql5.6,并远程授权连接本地windows的Navicat,可以根据以下步骤安装.此文章为自己收藏,必要时拿出来直接用的,有需要的友友可以查看查看的.文章图片有借助于网络的. 1.新 ...

  2. Eureka的高可用

    问题: 现在Eureka和Client是1对1,但是Eureka挂了,就不能用了. 如何解决呢,创建多个Erurka.并且Eureka进行相互注册.如下图 怎么相互注册呢 1. 创建两个Eureka ...

  3. Ribbon Ping机制

    在负载均衡器中,提供了 Ping 机制,每隔一段时间,会去 Ping 服务器,判断服务器是否存活,该工作由 com.netflix.loadbalancer.IPing 接口的实现类负责,如果单独使用 ...

  4. ionic popup 做法及样式修改

    ionic popup的做法很简单,一共有三种:show.confirm和alert,官网上讲得很详细. 一.confirm: js:var confirmPopup = $ionicPopup.co ...

  5. VarIsOrdinal,VarIsFloat,VarIsNumeric判断数字

    VarIsOrdinal        VarIsFloat        VarIsNumeric 就三个. 第一个 是否int,boolean 第二个 是否Double,Simple,Curren ...

  6. Android adb 模拟滑动 按键 点击事件

    模拟事件全部是通过input命令来实现的,首先看一下input命令的使用: usage: input ... input text <string>       input keyeven ...

  7. VS2010 如何自动生成UML图

    项目名---右键----查看类图

  8. 黄聪:AngularJS中的$resource使用与Restful资源交互(转)

    原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以 ...

  9. Flask-状态保持-CSRF

    问题:cookies基于浏览器的同源策略,不同域名的cookie不能相互访问,为什么可以进行跨站请求伪造呢? 原因:cookie基于浏览器的同源策略,确实是在实现状态保持的时候,不能跨域访问. 跨站请 ...

  10. 安装node.msi 格式的文件失败

    in10 安装node.msi格式的文件,出现2503 2502 错误码, win+x 打开 在命令提示符窗口中输入: msiexec /package "安装msi格式的文件的全路径&qu ...