web前端开发中js如何调用客户端webview中自定义的方法

前端开发项目中经常会遇到js代码调用客户端的方法，js如何与原生客户端的方法进行相互调用呢？

实现的原理很简单，就是借助客户端webview的WebViewJavascriptBridge对象的callHandler方法和registerHandler方法进行数据传输，其中callHander用于js调用客户端的方法，registerHandler用于调用客户端调用js的方法，具体实现方法如下:

function setupWebViewJavascriptBridge(callback) { //定义一个setupWebViewJavascriptBridge函数
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge) // 向参数中传递WebViewJavascriptBridge全局对象
    } else {
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [ callback ];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'weizhujsb://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() {
            document.documentElement.removeChild(WVJBIframe)
        }, 0)
    }
}
setupWebViewJavascriptBridge(function(bridge) { // 调用setupWebViewJavascriptBridge函数，参数接受WebViewJavascriptBridge全局对象
    function openUserProfile(userId) {
        bridge.callHandler('onPageSkip', { //调用bridge的属性属性方法
            'pageName' : 'profile',
            'data' : {
                'userId' : userId
                 }
            }, function(response) {             
    });
}