博客

H5与移动端交互处理情况分为两种一种是IOS，另一种是Android，在与Android系统交互要简单一些，与IOS交互比较麻烦，经过Google搜索等方式寻求解决方案，最终使用WebViewJavascriptBridge开源库，它是通过webview的代理拦截scheme，然后注入JS代码。至于IOS端的代码原理就不解释了，只是看了一些资料，本人是负责前端开发的，JS调试要麻烦一些，所以直接上代码：

(function(window) {
    window.jsObjcBridge = {};
    //以上是注入JS代码原理，通过回调可以获取WebViewJavascriptBridge的对象bridge，通过该对象进行互相调用函数的绑定
    function setupWebViewJavascriptBridge(callback) {
        if(window.WebViewJavascriptBridge) {
            return callback(WebViewJavascriptBridge);
        }
        if(window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    //通过bridge对象，进行相互调用函数注册
    function bindIosWindowBridge(bridge) {
        var uniqueId = 1
        //日志输出
        function log(message, data) {
            var log = document.getElementById('log')
            var el = document.createElement('div')
            el.className = 'logLine'
            el.innerHTML = uniqueId++ + '. ' + message + ':<br/>' + JSON.stringify(data)
            if(log.children.length) { log.insertBefore(el, log.children[0]) } else { log.appendChild(el) }
        }
        //注册IOS调用JS方法，并返回data
        bridge.registerHandler('jsHanlder', function(data, responseCallback) { console.log(data); var jsresult = {} responseCallback(jsresult) })
        var _closeAppwin = function(callback) {
            //调用IOS公开关闭webview的API
            bridge.callHandler('yjCloseWindow', { }, function(response) { callback(response); })
        }
        var _openAppwin = function(data, callback) {
            //调用IOS公开打开webview的API
            bridge.callHandler('yjOpenPage', data, function(response) { callback(response); })
        }

        window.jsObjcBridge = {

            closeAppwin: function(callback) { _closeAppwin(callback); },
            openAppwin: function(data, callback) { _openAppwin(data, callback); }

        }
    }

    //js与Android方法互相调用注册
    function bindAndroidWindowBridge() {

        var _closeAppwin = function(callback) {
            callback(window.androidBridge.yjCloseWindow());
        }
        var _openAppwin = function(data, callback) {
            callback(window.androidBridge.yjOpenPage(data));
        }

        window.jsObjcBridge = {

            closeAppwin: function(callback) { _closeAppwin(callback) },
            openAppwin: function(data, callback) { _openAppwin(data, callback) }
        }
    }
    //判断设备类型进行注册绑定
    if(device.ios()) {
        setupWebViewJavascriptBridge(bindIosWindowBridge);
    } else {
        bindAndroidWindowBridge();
    }
})(window)

在页面中调用代码：

//执行成功的回调函数
function getRes(response){
    console.log(response);    
}
function openView() {
    //传递的参数
    var params = {
            "PageID": "YJYQJCustomerService",
            "ParaList": []
        }; 
    jsObjcBridge.openAppwin(JSON.stringify(params), getRes);            
}

以上是H5与移动端进行交互的JS文件，希望能和大家学习交流，有不对或者不合理的地方请小伙伴们指正。