混合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. sp_settriggerorder 设置触发器执行顺序

    sp_settriggerorder (Transact-SQL)     本主题适用于:SQL Server(从 2008 开始)Azure SQL 数据库Azure SQL 数据仓库并行数据仓库 ...

  2. Javascript-多个数组是否有一样值

    //判断给出的所有数组 是否都有一样的值 function arrIsEqual(){ var array=[]; for(var i=0;i<arguments.length;i++){ ar ...

  3. 电商系统架构总结2(Redis)

    二  Redis缓存 考虑到将来服务器的升级扩展,使用redis代替.net内置缓存是比较理想的选择.redis是非常成熟好用的缓存系统,安装配置非常简单,直接上官网下载安装包 安装启动就行了. 1 ...

  4. 微服务、SOA 和 API对比与分析

    摘要: 对比微服务架构和面向服务的架构(SOA)是一个敏感的话题,常常引起激烈的争论.本文将介绍这些争论的起源,并分析如何以最佳方式解决它们.然后进一步查看这些概念如何与 API 管理概念结合使用,实 ...

  5. 再谈编码 decode和encode

    1. ascii. 有: 数字, 字母, 特殊字符. 8bit 1byte 128 最前面是0 2. gbk. 包含: ascii, 中文(主要), 日文, 韩文, 繁体文字. 16bit, 2byt ...

  6. 了解一下,Java 虚拟机

    1.1 - 概述     Java 总述:Java 不仅是一门编程语言,还是一个由一系列计算机软件和规范形成的技术体系,这个技术体系提供了完整的用于软件开发和跨平台部署的支持环境,并广泛应用于 嵌入式 ...

  7. hadoop 问题及解决方式

    转自http://www.bkjia.com/ASPjc/931209.html 解决Exception: org.apache.hadoop.io.nativeio.NativeIO$Windows ...

  8. 3.div+css 的布局较 table 布局有什么优点

    改版的时候更方便,只需改css文件. 页面加载速度更快.结构化清晰.页面显示简介. 表现与结构相分离. 已于优化搜索引擎更友好,排名更容易靠前.

  9. 9.纯 CSS 创作一种按钮被瞄准的交互特效

    原文地址:https://segmentfault.com/a/1190000014680999 吃鸡倍镜,哈哈哈 HTML代码: <div class="box"> ...

  10. 《算法》第四章部分程序 part 6

    ▶ 书中第四章部分程序,加上自己补充的代码,图的环相关 ● 无向图中寻找环 package package01; import edu.princeton.cs.algs4.In; import ed ...