需求:

  APP要用H5页面做展示,而且要获取到对应的商品ID,用户点击H5页面跳回APP原生页面。

方法:

  先要判断用户是ios还是android设备(这里只考虑ios跟android,因为它俩写法还是有点不一样,所以分开),然后禁止掉H5页面的跳转,获取点击区域的ID,传给APP。

ios:其中goDetail是ios他们要调用的方法,data就是ID值,type是类型 有其它参数的时候可以传给APP

 var u = navigator.userAgent; //获取用户设备
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 $("a").click(function(){
var href = $(this).attr("data-href");
if (isIOS && window.WebViewJavascriptBridge) { //ios app 设备才执行
$(this).attr("href","javascript:;");//禁止H5页面跳转
WebViewJavascriptBridge.callHandler('goDetail', {"data": href,'type':"1"}, function(){ });
return false; }
});

android:在安卓代码里面调用H5里面写的一个方法gotoAndroidApp(),然后他们获取goodsDetail参数的值,第一个为ID,第二个为type值,有其它参数的时候可以依次传多个

 // 安卓app才调用的方法
function gotoAndroidApp() {
$("a").click(function(){
$(this).attr("href","javascript:;");
var href = $(this).attr("data-href");
window.androidVik.goodsDetail(href,1);
return false;
});
}

完整的案例:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scale=no">
<title>对接app</title>
</head>
<body>
<div class="ios">
<a href="index.html" data-href="1">ios点击按钮</a>
</div>
<div class="android">
<a href="index.html" data-href="2">android点击按钮</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
var u = navigator.userAgent; //获取用户设备
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 $("a").click(function(){
var href = $(this).attr("data-href");
if (isIOS && window.WebViewJavascriptBridge) { //ios app 设备才执行
$(this).attr("href","javascript:;");//禁止H5页面跳转
WebViewJavascriptBridge.callHandler('goDetail', {"data": href,'type':"1"}, function(){ });
return false;
}
});
// 安卓app才调用的方法
function gotoAndroidApp() {
$("a").click(function(){
$(this).attr("href","javascript:;");
var href = $(this).attr("data-href");
window.androidVik.goodsDetail(href,1);
return false;
});
}
</script>
</body>
</html>

2017年11月06日:更新

 <script type="text/javascript">
$(function(){
// APP点击
var u = navigator.userAgent; //获取用户设备
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isIOS) { //ios app 设备才执行 /*这段代码是固定的,必须要放到js中*/
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0);
} /*与OC交互的所有JS方法都要放在此处注册,才能调用通过JS调用OC或者让OC调用这里的JS*/
setupWebViewJavascriptBridge(function(bridge) { /*JS给ObjC提供公开的API,在ObjC端可以手动调用JS的这个API。接收ObjC传过来的参数,且可以回调ObjC*/
bridge.registerHandler('getUserInfos', function(e) {
gotoIosApp(e);
gotoRotate(e);
});
});
}
}); // 苹果app才调用的方法
function gotoIosApp(e){
$(".rotateList a").click(function(){
$(this).attr("href","javascript:;");//禁止H5页面跳转
var goodsId = $(this).attr("goods-id");
WebViewJavascriptBridge.callHandler('goodsDetail', {"code": '200',"data": goodsId}, function(){});
return false;
});
} function gotoRotate(e){
// 判断用户有没登录
var isTrue = {$is_login}; $(".rotateBtn").click(function(){
if (isTrue) {
$(this).bind("click");
WebViewJavascriptBridge.callHandler('clickButton', {"code": '200',"login":"1"}, function(){});
} else {
$(this).unbind("click");
WebViewJavascriptBridge.callHandler('clickButton', {"code": '200',"login":"0"}, function(){});
}
});
}
// 安卓app才调用的方法
function gotoAndroidRotate(e) { var isTrue = {$is_login}; $(".rotateBtn").click(function(){
if (isTrue) {
$(this).bind("click"); } else {
$(this).unbind("click");
window.androidVik.clickLuck(); }
});
$(".rotateList a").click(function(){
$(this).attr("href","javascript:;");//禁止H5页面跳转
var goodsId = $(this).attr("goods-id");
window.androidVik.goodsDetail(goodsId);
return false;
});
}
</script>

H5跟ios、android交互跟数据对接的更多相关文章

  1. js 与 ios Android交互

    一.android 交互 1.js调用webview 在android API Level 17及以上的版本中,就会出现js调用不了android的代码,这是版本兼容的问题,需要在调用的方法上面加一个 ...

  2. Fiddler抓取手机端(ios+android)APP接口数据(http+https)

    (1)android 环境要求: PC机和手机连接在同一网络下 工具下载地址: Fiddler网上可以下载,自行下载.注意:需要安装fiddlercertmaker(网上自行下载)进行认证 配置步骤: ...

  3. H5与安卓、IOS的交互,判断微信、移动设备、安卓、ios

    一.通过用户代理可以判断网页当前所在的环境 var browser={ versions:function(){ var u = navigator.userAgent, app = navigato ...

  4. Android 与H5之间的js交互

    之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下: 一.为什么要进行js交互: 为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: ...

  5. android json解析及简单例子+Android与服务器端数据交互+Android精彩案例【申明:来源于网络】

    android json解析及简单例子+Android与服务器端数据交互+Android精彩案例[申明:来源于网络] android json解析及简单例子:http://www.open-open. ...

  6. 移动端H5 判断IOS还是Android 平台

    1.方法 (function($) { var UA = window.navigator.userAgent; if(/Android|HTC/i.test(UA) || !!(window.nav ...

  7. H5移动端IOS/Android兼容性总结,持续更新中…

    H5移动端IOS/Android兼容性总结,持续更新中… 1. IOS不识别日期 new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进 ...

  8. Android平台Camera2数据如何对接RTMP推流到服务器

    1. Camera2架构 在Google 推出Android 5.0的时候, Android Camera API 版本升级到了API2(android.hardware.camera2), 之前使用 ...

  9. iOS/Android 浏览器(h5)及微信中唤起本地APP

    在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...

随机推荐

  1. 如何在SQLServer中处理每天四亿三千万记录的(数据库大数据处理)

    首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...

  2. gitlab 服务器的搭建与使用全过程(二)

    <gitlab操作手册 1.0 > 此手册适用于 Mac 计算机 第一步:根据从管理员得到的用户名和初始密码登陆并修改密码.新密码不得少于8个字符 第二步:在自己的电脑上创建密钥,并提交提 ...

  3. C# 获取类中属性注释值

    转 http://bbs.csdn.net/topics/350019800 PropertyInfo[] peroperties = typeof(TEST).GetProperties(Bindi ...

  4. 2B - Amy

    数据范围是18位,把每一位加起来的和最多9*18 = 162 所以只需考虑n-162 - n的数即可,暴力解决 #include <iostream> using namespace st ...

  5. 解压与压缩(把dataset转为string、、 )

    /// <summary> /// 压缩 解压 /// </summary> public class ZipHelper { #region 压缩解缩 /// <sum ...

  6. ubuntu画面延迟问题解决

    新配的电脑,安装ubuntu16.04以后,出现画面延迟的问题,尤其浏览网页的时候画面十分卡顿.用free命令查看过可用内存6.多G,经过询问大概是显卡问题,然后在https://ubuntuforu ...

  7. Olesya and Rodion (思维)

    Olesya loves numbers consisting of n digits, and Rodion only likes numbers that are divisible by t. ...

  8. OJ 21658::Monthly Expense(二分搜索+最小化最大值)

        Description Farmer John是一个令人惊讶的会计学天才,他已经明白了他可能会花光他的钱,这些钱本来是要维持农场每个月的正常运转的.他已经计算了他以后N(1<=N< ...

  9. VBS修改本机的账号密码

    On Error Resume Next strComputer = "." Set WshShell = WScript.CreateObject("WScript.S ...

  10. properties 资源文件读取

    1.   在source中添加资源文件 resource.properties #FTP 相关配置 #FTP 的ip地址 FTP_ADDRESS=192.168.88.142 FTP_PORT=21 ...