前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >和安卓和ios的webview的数据交互

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

作者头像
河湾欢儿
发布2019-07-24 15:27:34
1.2K0
发布2019-07-24 15:27:34
举报
文章被收录于专栏:河湾欢儿的专栏

第一步是必写的

代码语言:javascript
复制
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)
            }

第二步

代码语言:javascript
复制
setupWebViewJavascriptBridge(function(bridge) {
    //和ios和安卓的交互放在这里
}

第三步 写交互

代码语言:javascript
复制
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)
                        }
                    })
                })
            })

附加一个简单的报错插件

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.07.22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档