H5跟ios、android交互跟数据对接

需求：

　　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交互跟数据对接的更多相关文章

js 与 ios Android交互
一.android 交互 1.js调用webview 在android API Level 17及以上的版本中,就会出现js调用不了android的代码,这是版本兼容的问题,需要在调用的方法上面加一个 ...
Fiddler抓取手机端(ios+android)APP接口数据(http+https)
(1)android 环境要求: PC机和手机连接在同一网络下工具下载地址: Fiddler网上可以下载,自行下载.注意:需要安装fiddlercertmaker(网上自行下载)进行认证配置步骤: ...
H5与安卓、IOS的交互，判断微信、移动设备、安卓、ios
一.通过用户代理可以判断网页当前所在的环境 var browser={ versions:function(){ var u = navigator.userAgent, app = navigato ...
Android 与H5之间的js交互
之前项目做过一些Android和Html5之间js交互方面的东西,今天有时间就总结一下: 一.为什么要进行js交互: 为了方便原生开发和Html之间数据传递,在静态页面的情况下可以改变原生开发的页面: ...
android json解析及简单例子+Android与服务器端数据交互+Android精彩案例【申明：来源于网络】
android json解析及简单例子+Android与服务器端数据交互+Android精彩案例[申明:来源于网络] android json解析及简单例子:http://www.open-open. ...
移动端H5 判断IOS还是Android 平台
1.方法 (function($) { var UA = window.navigator.userAgent; if(/Android|HTC/i.test(UA) || !!(window.nav ...
H5移动端IOS/Android兼容性总结，持续更新中…
H5移动端IOS/Android兼容性总结,持续更新中… 1. IOS不识别日期 new Date("2018-07-01 08:00:00")在Android下正常显示可以直接进 ...
Android平台Camera2数据如何对接RTMP推流到服务器
1. Camera2架构在Google 推出Android 5.0的时候, Android Camera API 版本升级到了API2(android.hardware.camera2), 之前使用 ...
iOS/Android 浏览器(h5)及微信中唤起本地APP
在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...

随机推荐

树状数组【洛谷P3586】 [POI2015]LOG
P3586 [POI2015]LOG 维护一个长度为n的序列,一开始都是0,支持以下两种操作:1.U k a 将序列中第k个数修改为a.2.Z c s 在这个序列上,每次选出c个正数,并将它们都减去1 ...
190225RabbitMQ
一.简单的RabbitMQ示例生产者 # Author:Li Dongfei import pika connection = pika.BlockingConnection( pika.Conne ...
TextInput
TextInput /** TextInput 是一个允许用户在应用中通过键盘输入文本的基本组件* 本组件的属性提供了多种特性的配置,如自动完成,自动大小写,占位文字,键盘类型等* 常用:* plac ...
BZOJ3065 带插入区间K小值 || 洛谷P4278
这是一道让我崩溃的题...... 然鹅洛谷上时限被改然后只有20分......好像所有人都被卡了(雾) 由于替罪羊树不是依靠旋转操作而是依靠暴力重构的方式维护树的平衡,所以我们可以考虑使用替罪羊树套区 ...
获取HTML代码用像阿里巴巴
public string GetHtml(string url) { string html = String .Empty; ...
Linux设备驱动开发基础--阻塞型设备驱动
1. 当一个设备无法立刻满足用户的读写请求时(例如调用read时,设备没有数据提供),驱动程序应当(缺省的)阻塞进程,使它进入等待(睡眠)状态,知道请求可以得到满足. 2. Linux内核等待队列:在 ...
TCP协议：三次握手过程详解
本文通过图来梳理TCP-IP协议相关知识.TCP通信过程包括三个步骤:建立TCP连接通道,传输数据,断开TCP连接通道.如图1所示,给出了TCP通信过程的示意图. 上图主要包括三部分:建立连接.传输数 ...
ActiveMQ的单节点和集群部署
平安寿险消息队列用的是ActiveMQ. 单节点部署: 下载解压后,直接cd到bin目录,用activemq start命令就可启动activemq服务端了. ActiveMQ默认采用61616端口提 ...
Eclipse快捷键--备忘
[Ct rl+T] 搜索当前接口的实现类 1. [ALT +/] 此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ ...
(转)shell脚本之seq命令
shell脚本之seq命令原文:http://blog.csdn.net/paoxiaohui/article/details/52830595 seq 用于生成从一个数到另一个数之间的所有整数. ...

H5跟ios、android交互跟数据对接

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

随机推荐

热门专题