混合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) { //接口请求来的数据操作 }) }) }) }
包括点击操作请求接口都要放在初始化函数中;
以上内容为自己总结,有错敬请指出,谢绝复制转载
posted on 2017-02-28 14:59 lengyue0030 阅读(851) 评论(0) 编辑 收藏 举报