当时业务的需求是这样的，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){
}
}
webView.addJavascriptInterface(new JavaScriptObject(this), "android");
到这里Android端需要写的就完成了；
这个是我截的图，可以看一下：
这里是H5需要写的代码：
function s(){
//调用Android的setToken()方法
var result =window.android.setToken(goodsId);
document.getElementById("p").innerHTML=result;
}
----------------------------------------------------------------------------------------------------------------------------------
附：如果在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() {
@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 + "')");
}
}
}
JS与APP原生控件交互
"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...
基于H5的混合开发介绍(一)WebView
转自: https://www.cnblogs.com/sanchang/p/9261461.html 一 WebView到底是什么 1 WebView是一种控件,它基于webkit引擎,因此具 ...
Hybrid小程序混合开发之路 - 数据交互
HTML+CSS是历史悠久.超高自由度.控制精准.表现能力极强.编码简单.学习门槛超低.真跨平台的一种UI界面开发方式. 本文介绍的是微信小程序和H5混合开发的一种数据交互方式. 很多应用在原生界面中 ...
移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下，android怎么加载H5界面
PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...
Android中Native和H5交互
1.概述 时至今日,H5的跨平台性越发凸显优势,一套代码适配android.ios,既能减少开发成本,又便于更新与维护.但是native的性能体验也确实更佳,尤其体现在复杂界面和频繁变化的界面上.事实 ...
Android WebView 基本设置与H5 交互
mWebView.setDrawingCacheEnabled(true); WebChromeClient webChromeClient = new WebChromeClient(); mWeb ...
客户端相关知识学习(三)之Android原生与H5交互的实现
Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...
Android与H5交互
1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...
Android与H5交互(java与js的交互)
一.理论概述 1.js调用java方法 直接调用WebView的该方法就可以添加接口了,不过先要启动交互 // 启用javascript mWebView.getSettings().setJavaS ...
随机推荐
jsp页面常用控件
1.点击按钮返回 上一页: