混合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 ...
随机推荐
- sp_settriggerorder 设置触发器执行顺序
sp_settriggerorder (Transact-SQL) 本主题适用于:SQL Server(从 2008 开始)Azure SQL 数据库Azure SQL 数据仓库并行数据仓库 ...
- Javascript-多个数组是否有一样值
//判断给出的所有数组 是否都有一样的值 function arrIsEqual(){ var array=[]; for(var i=0;i<arguments.length;i++){ ar ...
- 电商系统架构总结2(Redis)
二 Redis缓存 考虑到将来服务器的升级扩展,使用redis代替.net内置缓存是比较理想的选择.redis是非常成熟好用的缓存系统,安装配置非常简单,直接上官网下载安装包 安装启动就行了. 1 ...
- 微服务、SOA 和 API对比与分析
摘要: 对比微服务架构和面向服务的架构(SOA)是一个敏感的话题,常常引起激烈的争论.本文将介绍这些争论的起源,并分析如何以最佳方式解决它们.然后进一步查看这些概念如何与 API 管理概念结合使用,实 ...
- 再谈编码 decode和encode
1. ascii. 有: 数字, 字母, 特殊字符. 8bit 1byte 128 最前面是0 2. gbk. 包含: ascii, 中文(主要), 日文, 韩文, 繁体文字. 16bit, 2byt ...
- 了解一下,Java 虚拟机
1.1 - 概述 Java 总述:Java 不仅是一门编程语言,还是一个由一系列计算机软件和规范形成的技术体系,这个技术体系提供了完整的用于软件开发和跨平台部署的支持环境,并广泛应用于 嵌入式 ...
- hadoop 问题及解决方式
转自http://www.bkjia.com/ASPjc/931209.html 解决Exception: org.apache.hadoop.io.nativeio.NativeIO$Windows ...
- 3.div+css 的布局较 table 布局有什么优点
改版的时候更方便,只需改css文件. 页面加载速度更快.结构化清晰.页面显示简介. 表现与结构相分离. 已于优化搜索引擎更友好,排名更容易靠前.
- 9.纯 CSS 创作一种按钮被瞄准的交互特效
原文地址:https://segmentfault.com/a/1190000014680999 吃鸡倍镜,哈哈哈 HTML代码: <div class="box"> ...
- 《算法》第四章部分程序 part 6
▶ 书中第四章部分程序,加上自己补充的代码,图的环相关 ● 无向图中寻找环 package package01; import edu.princeton.cs.algs4.In; import ed ...