和安卓和ios的webview的数据交互

河湾欢儿

发布于 2019-07-24 07:27:34

1.3K00

代码可运行

文章被收录于专栏：河湾欢儿的专栏河湾欢儿的专栏

运行总次数：0

代码可运行

第一步是必写的

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)
            }

第二步

setupWebViewJavascriptBridge(function(bridge) {
    //和ios和安卓的交互放在这里
}

第三步写交互

setupWebViewJavascriptBridge(function(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)
                    }
                }
                 // registerHandler是注册,ios和安卓那边可以调取你这边的数据
                bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
                    log('Java called testJavascriptHandler with', data)
                    var responseData = {
                        'Javascript Says': 'Right back atcha!'
                    }
                    log('JS responding with', responseData)
                    responseCallback(responseData)
                })
                bridge.callHandler('getAuthToken', {//getAuthToken 是调取安卓那边注册事件  需要统一
                    'foo': 'bar'
                }, function(response){
                    $.ajax({
                        type: "GET",
                        headers: {
                            'Authorization': 'Bearer ' +response,//response 是安卓和ios那边返回的token
                        },
                        url: "url",
                        async: true,
                        success: function(res) {
                            console.log(res)
                        },
                        error(err) {
                            console.log(err)
                        }
                    })
                })
            })

附加一个简单的报错插件

<script src='https://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.0.0.0'></script><!-- 也可以使用npm下载--!>
<script>
window.vConsole = new window.VConsole();
window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
   document.write("错误信息：" , errorMessage,"出错文件：" , scriptURI,"出错行号：" , lineNumber,"错误详情：" , errorObj)
}
throw new Error("出错了！");
    
</script>