美文网首页
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