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

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

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

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

解决:

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

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

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

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

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

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

  1. function connectWebViewJavascriptBridge(callback) {
  2. if (window.WebViewJavascriptBridge) {
  3. callback(WebViewJavascriptBridge)
  4. } else {
  5. document.addEventListener('WebViewJavascriptBridgeReady', function () {
  6. callback(WebViewJavascriptBridge)
  7. }, false)
  8. }
  9. }
  10. connectWebViewJavascriptBridge(function(bridge) {
  11.  
  12. bridge.init(function (message, responseCallback) {
  13. var data = {'Javascript Responds': 'Wee!'}
  14. responseCallback(data)
  15. })
  16. bridge.registerHandler('testJavascriptHandler', function (data, responseCallback) {
  17. var responseData = {'Javascript Says': 'Right back atcha!'}
  18. responseCallback(responseData)
  19. })
  20. bridge.callHandler('接口名称', {
  21. '': '接口名称',
  22. 'body': {"接口名称": '111'}
  23. }, function (response) {
  24. //接口请求来的数据操作
  25. })
  26.   $("body").click(function(){
  27. bridge.callHandler('接口名称', {
  28. '': '接口名称',
  29. 'body': {"接口名称": '111'}
  30. }, function (response) {
  31. //接口请求来的数据操作
  32. })
  33. })
  34. })
  35. }

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

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

混合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. man iptables 8

    IPTABLES(8) iptables 1.6.0 IPTABLES(8) NAME iptables/ip6tables — administration tool for IPv4/IPv6 p ...

  2. mysql表操作与权限操作

    修改表ALTER TABLE 语法: . 修改表名 ALTER TABLE 表名 RENAME 新表名; . 增加字段 ALTER TABLE 表名 ADD 字段名 数据类型 [完整性约束条件…], ...

  3. 网络基础和python(二)

    一,五层协议 应用层    端口 传输层   tcp\udp 网络层   ipv4\6 数据链路层  ethernet 物理层    mac 二:什么是变量? 变量:核心在于变和量儿字,变->变 ...

  4. StanFord ML 笔记 第一部分

    本章节内容: 1.学习的种类及举例 2.线性回归,拟合一次函数 3.线性回归的方法: A.梯度下降法--->>>批量梯度下降.随机梯度下降 B.局部线性回归 C.用概率证明损失函数( ...

  5. EditText被键盘遮得住

    如果在Activity中的布局的下方有EditText,获取焦点弹出软键盘的时候,如果不做处理,软键盘可能会遮挡输入框,用户提现不好,网上也有很多人提出结局方案,这里就分析一下解决的效果. 需要用到E ...

  6. git 找回本地误删的文件

    1, 查看本地工作区变化 => git status 2, 重新设置文件状态 =>  git reset HEAD url    ( url 是上一步第二个红框中的地址) 3, 检出文件 ...

  7. js把mysql传过来的时间格式化为:0000-00-00 00:00:00

    mysql传到前端的默认时间:2018-01-06T17:32:23+08:00 格式化的js代码 var time = '2018-01-06T17:32:23+08:00' var span = ...

  8. 机器学习进阶-人脸关键点检测 1.dlib.get_frontal_face_detector(构建人脸框位置检测器) 2.dlib.shape_predictor(绘制人脸关键点检测器) 3.cv2.convexHull(获得凸包位置信息)

    1.dlib.get_frontal_face_detector()  # 获得人脸框位置的检测器, detector(gray, 1) gray表示灰度图, 2.dlib.shape_predict ...

  9. 开源项目几点心得,Java架构必会几大技术点

    关于学习架构,必须会的几点技术 1. java反射技术     2. xml文件处理     3. properties属性文件处理     4. 线程安全机制     5. annocation注解 ...

  10. centos7 操作记录

    centos7 firewall 命令查看已经开放的端口firewall-cmd --list-ports查看开放的服务firewall-cmd --list-services开启端口firewall ...