zoukankan      html  css  js  c++  java
  • vuejs里封装的和IOS,Android通信模块

      项目需要,在vuejs开发的web项目中与APP进行通信,实现原理和cordova一致。使用WebViewJavascriptBridge。

    其实也是通过拦截url scheme,支持ios6往前的系统

    iOS与H5交互的方案

    纵观所有iOS与H5交互的方案,有以下几种:

    • 第一种:有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互,通常是通过拦截url scheme判断是否是我们需要拦截处理的url及其所对应的要处理的功能是什么。任意版本都支持。
    • 第二种:iOS7之后出了JavaScriptCore.framework用于与JS交互,但是不支持iOS6,对于还需要支持iOS6的app,就不能考虑这个了。
    • 第三种:WebViewJavascriptBridge开源库使用,本质上,它也是通过webview的代理拦截scheme,然后注入相应的JS。
    • 第四种:react-native

     

    /**
     * 函数描述: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} 回调
     */
    
    var JsBridge = {
        init: function(callback) {
            var u = navigator.userAgent;
            var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (!isiOS) {
                if (window.WebViewJavascriptBridge) {
                    callback(WebViewJavascriptBridge)
                } else {
                    document.addEventListener(
                        'WebViewJavascriptBridgeReady',
                        function() {
                            callback(WebViewJavascriptBridge)
                        },
                        false
                    );
                }
            } else {
                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)
            }
        },
    
        first: function() {
            var u = navigator.userAgent;
            var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (!isiOS) {
                var _this = this;
                _this.init(function(bridge) {
                    bridge.init(function(message, responseCallback) {
                        responseCallback(data);
                    })
                })
            }
        },
    
        registerHandler: function(name, fun) {
            var _this = this;
            _this.init(function(bridge) {
                bridge.registerHandler(name, fun);
            })
        },
    
        callHandler: function(name, data, fun) {
            var _this = this;
            _this.init(function(bridge) {
                bridge.callHandler(name, data, fun);
            })
        }
    }
    
    JsBridge.first();
    
    export {
        JsBridge
    };
  • 相关阅读:
    MY_0003:设置界面显示单位
    H5_0024:对于事先无法确定css大小的情况,可以通过JS动态修改
    H5_0023:html页面禁止放大缩小页面
    MY_0002:导出单位设置
    MY_0001:添加命令到自定义工具栏
    H5_0020:判断安卓苹果平台
    Web_0003:关于PHP上传文件大小的限制
    H5_0019:JS中定义json结构
    H5_0018:z-index失效的原因
    H5_0017:通过元素自定义属性值获取元素对象,并获取属性值
  • 原文地址:https://www.cnblogs.com/johnzhu/p/6121286.html
Copyright © 2011-2022 走看看