混合app开发,h5页面调用ios原生APP的接口
混合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的接口的更多相关文章
- uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
前言: 关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式. 一.H5+方法调用android原生方法 H5+ Android开发规范官 ...
- 【如何快速的开发一个完整的iOS直播app】(美颜篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重 ...
- 【如何快速的开发一个完整的 iOS 直播 app】(美颜篇)
来源:袁峥Seemygo 链接:http://www.jianshu.com/p/4646894245ba 前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播 ...
- 【如何快速的开发一个简单的iOS直播app】(代码篇)
开篇([如何快速的开发一个完整的iOS直播app](原理篇)) 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量 ...
- 如何快速的开发一个完整的iOS直播app(美颜篇)
前言 在看这篇之前,如果您还不了解直播原理,请查看这篇文章如何快速的开发一个完整的iOS直播app(原理篇) 开发一款直播app,美颜功能是很重要的,如果没有美颜功能,可能分分钟钟掉粉千万,本篇主要讲 ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
- 【如何快速的开发一个完整的iOS直播app】(原理篇)
原文转自:袁峥Seemygo 感谢分享.自我学习 目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的 ...
- 如何快速的开发一个完整的iOS直播app(原理篇)
目录 [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](播放篇) [如何快速的开发一个完整的iOS直播app](采集篇) 前言 大半年没写博客了,但 ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...
随机推荐
- man iptables 8
IPTABLES(8) iptables 1.6.0 IPTABLES(8) NAME iptables/ip6tables — administration tool for IPv4/IPv6 p ...
- mysql表操作与权限操作
修改表ALTER TABLE 语法: . 修改表名 ALTER TABLE 表名 RENAME 新表名; . 增加字段 ALTER TABLE 表名 ADD 字段名 数据类型 [完整性约束条件…], ...
- 网络基础和python(二)
一,五层协议 应用层 端口 传输层 tcp\udp 网络层 ipv4\6 数据链路层 ethernet 物理层 mac 二:什么是变量? 变量:核心在于变和量儿字,变->变 ...
- StanFord ML 笔记 第一部分
本章节内容: 1.学习的种类及举例 2.线性回归,拟合一次函数 3.线性回归的方法: A.梯度下降法--->>>批量梯度下降.随机梯度下降 B.局部线性回归 C.用概率证明损失函数( ...
- EditText被键盘遮得住
如果在Activity中的布局的下方有EditText,获取焦点弹出软键盘的时候,如果不做处理,软键盘可能会遮挡输入框,用户提现不好,网上也有很多人提出结局方案,这里就分析一下解决的效果. 需要用到E ...
- git 找回本地误删的文件
1, 查看本地工作区变化 => git status 2, 重新设置文件状态 => git reset HEAD url ( url 是上一步第二个红框中的地址) 3, 检出文件 ...
- 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 = ...
- 机器学习进阶-人脸关键点检测 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 ...
- 开源项目几点心得,Java架构必会几大技术点
关于学习架构,必须会的几点技术 1. java反射技术 2. xml文件处理 3. properties属性文件处理 4. 线程安全机制 5. annocation注解 ...
- centos7 操作记录
centos7 firewall 命令查看已经开放的端口firewall-cmd --list-ports查看开放的服务firewall-cmd --list-services开启端口firewall ...