web与APP之间的交互---WebViewJavascriptBridge

3fuyu 发布于2019-08-26 13:26 / 2413人阅读

摘要：在实际项目之中，经常会遇到之中嵌入网页的情况，就需要网页与原生之间交互，比如获取当前用户信息等。一种简单的方式就是通过参数来搞定，但是这种方式异常死板，所以有了。本文章旨在记录的实现，如有错误，还请指正如有需要了解原理，请。

在实际项目之中，经常会遇到app之中嵌入网页的情况（Hybrid），就需要web网页与原生app之间交互，比如获取当前用户信息等。一种简单的方式就是通过url参数来搞定，但是这种方式异常死板，所以有了jsbridge。
本文章旨在记录WebViewJavascriptBridge的实现，如有错误，还请指正！如有需要了解jsbridge原理，请google。

需求：

/**
 * 函数描述：js调用webview事件
 *
 * jsBridge.callHandler(method, data, callBack(response));
 * @param method {string} 方法名
 * @param data {Object} 参数
 * @return {Object} 回调
 */

/**
 * 函数描述：webView调用JS事件
 *
 * jsBridge.registerHandler(method, callBack(response));
 * @param method {string} 方法名
 * @return {Object} 回调
 */

const JsBridge = {
    init: function (callback) {
        const u = navigator.userAgent;
        const isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //判断手机系统
        if (!isiOS) {  //ios
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                //    注册事件，WebViewJavascriptBridge加载完成时调用
                document.addEventListener(
                    "WebViewJavascriptBridgeReady",
                    function () {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        } else { //Android
            //    如果有WebViewJavascriptBridge，则直接返回callback
            if (window.WebViewJavascriptBridge) {
                return callback(WebViewJavascriptBridge);
            }
            //    如果有WVJBCallbacks，则向WVJBCallbacks中注入事件
            if (window.WVJBCallbacks) {
                return window.WVJBCallbacks.push(callback);
            }
            //    否则创建WVJBCallbacks
            window.WVJBCallbacks = [callback];
            const WVJBIframe = document.createElement("iframe");
            WVJBIframe.style.display = "none";
            WVJBIframe.src = "wvjbscheme://__BRIDGE_LOADED__";
            document.documentElement.appendChild(WVJBIframe);
            setTimeout(function () {
                document.documentElement.removeChild(WVJBIframe)
            }, 0)
        }
    },

    first: function () {
        const u = navigator.userAgent;
        const isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (!isiOS) {
            const _this = this;
            _this.init(function (bridge) {
                bridge.init(function (message, responseCallback) {
                    responseCallback(data);
                })
            })
        }
    },

    registerHandler: function (name, fun) {
        const _this = this;
        _this.init(function (bridge) {
            bridge.registerHandler(name, fun);
        })
    },

    callHandler: function (name, data, fun) {
        const _this = this;
        _this.init(function (bridge) {
            bridge.callHandler(name, data, fun);
        })
    }
}

// 初始化
JsBridge.first();

超融合服务器混合云 php与web页面交互大数据与共享经济之间的联系 php与前端的交互 webrtc实现app与web视频聊天

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108827.html

web与APP之间的交互---WebViewJavascriptBridge

摘要：在实际项目之中，经常会遇到之中嵌入网页的情况，就需要网页与原生之间交互，比如获取当前用户信息等。一种简单的方式就是通过参数来搞定，但是这种方式异常死板，所以有了。本文章旨在记录的实现，如有错误，还请指正如有需要了解原理，请。在实际项目之中，经常会遇到app之中嵌入网页的情况（Hybrid），就需要web网页与原生app之间交互，比如获取当前用户信息等。一种简单的方式就是通过url参数...

mingzhong 2019-08-23 13:59 评论0 收藏0
WebViewJavascriptBridge原理解析

摘要：否则按照正常流程处理。如果是表示是初始化环境的消息，如果是则表示是发送消息。则立即发送消息。回调主动调用获取注册的函数调用中的对应函数处理把消息从发送到，执行具体的发送操作。处理从返回的消息。从而找到具体的实现执行。基本说明我们的项目是一个OC与javascript重度交互的app，OC与javascript交互的那部分是在WebViewJavascriptBridge的githu...

yck 2019-08-21 11:39 评论0 收藏0
WebViewJavascriptBridge原理解析

摘要：否则按照正常流程处理。如果是表示是初始化环境的消息，如果是则表示是发送消息。则立即发送消息。回调主动调用获取注册的函数调用中的对应函数处理把消息从发送到，执行具体的发送操作。处理从返回的消息。从而找到具体的实现执行。基本说明我们的项目是一个OC与javascript重度交互的app，OC与javascript交互的那部分是在WebViewJavascriptBridge的githu...

andot 2019-08-22 10:51 评论0 收藏0
WebViewJavascriptBridge原理解析

摘要：否则按照正常流程处理。如果是表示是初始化环境的消息，如果是则表示是发送消息。则立即发送消息。回调主动调用获取注册的函数调用中的对应函数处理把消息从发送到，执行具体的发送操作。处理从返回的消息。从而找到具体的实现执行。基本说明我们的项目是一个OC与javascript重度交互的app，OC与javascript交互的那部分是在WebViewJavascriptBridge的githu...

gougoujiang 2019-06-25 16:04 评论0 收藏0
WebViewJavascriptBridge原理解析

摘要：否则按照正常流程处理。如果是表示是初始化环境的消息，如果是则表示是发送消息。则立即发送消息。回调主动调用获取注册的函数调用中的对应函数处理把消息从发送到，执行具体的发送操作。处理从返回的消息。从而找到具体的实现执行。基本说明我们的项目是一个OC与javascript重度交互的app，OC与javascript交互的那部分是在WebViewJavascriptBridge的githu...

syoya 2019-08-26 11:25 评论0 收藏0