美文网首页
WebViewJavascriptBridge中前端代码怎么写

WebViewJavascriptBridge中前端代码怎么写

作者: LElysion | 来源:发表于2018-01-05 09:39 被阅读0次

    与IOS交互时,使用WebViewJavascriptBridge是不错的选择

    使用

    对于前端而言,只需要先初始化函数

    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 = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
    }
    

    之后调用该方法即可

    setupWebViewJavascriptBridge(function (bridge) {
            /* Initialize your app here */
            bridge.registerHandler('removeArea', function(data, responseCallback) {
                // console.log("JS Echo called with:", data);
            })
            bridge.callHandler('getUserInfo', null, function responseCallback(responseData) {
            })
        })
    

    需要注意的是
    bridge.registerHandler里的两个参数分别为,js提供给IOS客户端的方法名,另一个则是当客户端调用该方法后的回调函数
    bridge.callHandler里的三个参数为,IOS端提供的方法,该方法接收的参数,在调用方法后的回调

    说明

    WebViewJavascriptBridge是一个双方提供方法名并且桥接起来的工具,需要注意的是,数据的交互都是基于回调函数,即具有延时性,尽量在事件中使用该方法, 当需要从客户端获取比如用户信息等全局信息时,需要注意该延时性

    相关文章

      网友评论

          本文标题:WebViewJavascriptBridge中前端代码怎么写

          本文链接:https://www.haomeiwen.com/subject/dvjjnxtx.html