混合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. C# DataReader

    //1 连接字符串 string connectionString = "server=127.0.0.1;integrated security=true;database=MSPetSh ...

  2. spark 2.0.0集群安装与hive on spark配置

    1. 环境准备: JDK1.8 hive 2.3.4 hadoop 2.7.3 hbase 1.3.3 scala 2.11.12 mysql5.7 2. 下载spark2.0.0 cd /home/ ...

  3. JS面试典型常见问题与解答

    Q1:下面代码段的输出是什么? 为什么? (Scope) (function() { var a = b = 5; })(); console.log(b); A1: 输出是5. 在上面的立即调用函数 ...

  4. virtualenv与virtualenvwrapper讲解

    #现在有个需求,我现在有两个项目,一个得运行于django1.1.11 ,还有一个版本得跑在django2.0上 python3 manage.py runserver  0.0.0.0:8000   ...

  5. JIRA敏捷sprint需求统计设置

    1.JIRA->My Dashboard ->添加它的过滤条件 2.过滤条件产生,将sql拷贝至步骤1编辑的JQL中

  6. [java,2017-12-01] 播放音频文件

    废话不多说,直接上代码 jar包 <!-- 2017-12-01音频播放jar包 --> <dependency> <groupId>javazoom</gr ...

  7. AJAX发送 PUT和DELETE请求参数传递注意点,了解一下

    ajax发送put 和 delete 请求时,需要传递参数,如果参数在url地址栏上,则可以正常使用, 如果在 data:中需要传递参数,(浏览器会使用表单提交的方式进行提交) 则需要注意此时应作如下 ...

  8. urllib2.Request 添加浏览器简单反爬 结合BeautifulSoup解析标签

  9. JAVA 中文 unicode 相互转换 文件读取

    package com.test; import org.junit.Test; public class JunitTest { @Test public void test(){ String p ...

  10. 原生JavaScript实现新手引导效果(第二个玩具)

    慕课地址https://www.imooc.com/video/169 预览效果: <!DOCTYPE html> <html> <head> <meta c ...