lengyue0030

导航

混合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  阅读(853)  评论(0编辑  收藏  举报