混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互;

  混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H5页面,而且运行机制也是能够同步运行;但ios上就没那么容易了;、

在此我就不说兼容安卓的问题,只把ios问题说说;

问题1:H5调用ios接口,ios需要初始化,js代码在ISO上只运行一次

解决:

  本人使用是angular框架搭建的H5页面

var ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
$rootScope.$on("$locationChangeSuccess",function(){
parent.location.reload();
})
}

意思就是每一次hH5页面加载成功就让其刷新一次;

问题2:ios初始化只执一次,这是由于ios本身内部机制问题;ios执行代码执行一次就储存在缓存中,但是js需要再次执行,否则功能实现不了;

解绝:ISO初始化只执行一次,这是ios本身机制,无法改变;

  调用其他接口,只能在第一次初始化的函数中执行,也就是说每个js文件只能有一个ios初始化,其他有关需要初始化操作的东西都要写在初始化函数中;

function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function () {
callback(WebViewJavascriptBridge)
}, false)
}
}
connectWebViewJavascriptBridge(function(bridge) { bridge.init(function (message, responseCallback) {
var data = {'Javascript Responds': 'Wee!'}
responseCallback(data)
})
bridge.registerHandler('testJavascriptHandler', function (data, responseCallback) {
var responseData = {'Javascript Says': 'Right back atcha!'}
responseCallback(responseData)
})
bridge.callHandler('接口名称', {
'': '接口名称',
'body': {"接口名称": '111'}
}, function (response) {
//接口请求来的数据操作
})
  $("body").click(function(){
bridge.callHandler('接口名称', {
'': '接口名称',
'body': {"接口名称": '111'}
}, function (response) {
//接口请求来的数据操作
})
})
})
}

  包括点击操作请求接口都要放在初始化函数中;

以上内容为自己总结,有错敬请指出,谢绝复制转载

混合app开发,h5页面调用ios原生APP的接口的更多相关文章

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

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

  2. 【如何快速的开发一个完整的iOS直播app】(美颜篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...

  3. 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)

    来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...

  4. 【如何快速的开发一个简单的iOS直播app】(代码篇)

    开篇([如何快速的开发一个完整的iOS直播app](原理篇)) 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量 ...

  5. 如何快速的开发一个完整的iOS直播app(美颜篇)

    前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重要的,如果没有美颜功能,可能分分钟钟掉粉千万,本篇主要讲 ...

  6. 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

  7. 【如何快速的开发一个完整的iOS直播app】(原理篇)

    原文转自:袁峥Seemygo    感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...

  8. 如何快速的开发一个完整的iOS直播app(原理篇)

    目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...

  9. 基于Jquery WeUI的微信开发H5页面控件的经验总结(1)

    在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...

随机推荐

  1. 采用boosting思想开发一个解决二分类样本不平衡的多估计器模型

    # -*- coding: utf-8 -*- """ Created on Wed Oct 31 20:59:39 2018 脚本描述:采用boosting思想开发一个 ...

  2. 第11章 拾遗4:IPv6(3)_配置IPv6路由

    5. 配置IPv6路由 5.1 配置IPv6静态路由 (1)在路由器上配置静态路由(以R1路由器为例) //静态路由 R1#config t R1(config)#ipv6 unicast-routi ...

  3. Delphi 常用语句

    1.屏蔽Float浮点数出错: Set8087CW(Longword($133f)); 2.Idhttp参数设置: FIdhttp                  := TIdHTTP.Create ...

  4. (转)C#操作Word文档

    原文1地址:http://www.cnblogs.com/lantionzy/archive/2009/10/23/1588511.html 原文2地址: http://www.cnblogs.com ...

  5. python操作符与流程控制

    操作符: 算术运算: +   -   *  /  %  //   ** 逻辑运算:and or  not 身份运算: is     not is 不可变数据类型:数字  字符串  字典key 可变数据 ...

  6. OpenGL中移动单位中的‘单位’指什么

    opengl 比如 用到glm::translate(x,y,z) 表示 移动x,y,z个单位, 那么这个这个单位是指什么呢?这里的单位不是指像素,是根据投影矩阵的变化而变化的,默认情况下投影矩阵Pr ...

  7. solr学习(六):使用自定义int/long类型主键

    需求分析: 我不想使用solr默认的主键id,我想换成其他的,比如我的文章id为article_id,我想让article_id作为主键. 而且,我的主键是int类型,而solr的主键默认是strin ...

  8. liinux安装 mysql 及主从复制

    mariadb其实就是mysqlmysql已经被oracle收购,它即将闭源,马上要开始收费了因此还想免费试用开源的数据库mysql,就在centos7上,将mysql分支为mariadb 安装mar ...

  9. 【IP代理】国内省市域名代理

    最近遇到一个测试问题,就是投放时需要按地域投放,所以需要对指定的IP地址范围内的地方投放才有效. 所以,就调查了下IP代理的方式,一个是SSR,这个好像只能代理国外的域名方式,另外一个就是百度搜索IP ...

  10. 【Tomcat】Tomcat安装及Eclipse配置教程

    ==================================================================================================== ...