混合app开发，h5页面调用ios原生APP的接口

Posted 2020-09-02 lengyue0030

　　混合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) {
                            //接口请求来的数据操作   
                        })
                    })
            })
        }                    

　　包括点击操作请求接口都要放在初始化函数中；

 

以上内容为自己总结，有错敬请指出，谢绝复制转载