Vue项目与iOS，Android交互

• 项目需求：

在原生app里面打开web页面，进行操作。

• 说明：

此解决方法web端不需要引入插件，使用WebViewJavascriptBridge即可。

• 步骤：

1. 新建bridge.js文件

//iOS 交互声明
function connectWebViewJavascriptBridgeIOS(callback) {
    if (window.WebViewJavascriptBridge) {
        return callback(window.WebViewJavascriptBridge)
    }
    if (window.WVJBCallbacks) {
        returnwindow.WVJBCallbacks.push(callback)
    }
    window.WVJBCallbacks = [callback];
    let WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
        document.documentElement.appendChild(WVJBIframe);
    setTimeout(() => {
        document.documentElement.removeChild(WVJBIframe)
    }, 0)
}


//Android 交互声明
function connectWebViewJavascriptBridgeANDROID(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge);
    } else {
        document.addEventListener(
            "WebViewJavascriptBridgeReady",
            function () {
                callback(WebViewJavascriptBridge);
            },
            false
        );
    }
}

export default {
    callhandlerIOS(name, data, callback) { //iOS的方法
        connectWebViewJavascriptBridgeIOS(function (bridge) {
            bridge.callHandler(name, data, callback)
        })
    },
    registerhandlerIOS(name, callback) { //iOS的方法
        connectWebViewJavascriptBridgeIOS(function (bridge) {
            bridge.registerHandler(name, function (data, responseCallback) {
                callback(data, responseCallback)
            })
        })
    },
    callhandlerAndroid(name, data, callback) {  //Android方法
        connectWebViewJavascriptBridgeANDROID(function (bridge) {
            bridge.callHandler(name, data, callback)
        })
    },
    registerhandlerAndroid(name, callback) {  //Android方法
        connectWebViewJavascriptBridgeANDROID(function (bridge) {
            bridge.init(function (message, responseCallback) {
                if (responseCallback) {
                    // responseCallback(data);
                }
            });
            bridge.registerHandler(name, function (data, responseCallback) {
                callback(data, responseCallback)
            })
        })
    }
}

2. 在main.js文件里导入

import Bridge from "./bridge.js";

 Vue.prototype.$bridge=Bridge;    //在这里注入后, 页面里所有需要用到调用native的地方, 都可以直接调用this.$bridge.xxx

3. 在vue组件中使用（调用的方法名应和app端协商好）

        created() {
            this.$bridge.registerhandlerIOS("JS Echo", (data, responseCallback) => {
                console.log("JS Echo called with:", data);
                // this.responseCallback(data)
            });
            this.$bridge.registerhandlerAndroid(
                "registerAction",
                (message, responseCallback) => {
                    console.log("JS Echo called with:" + message);
                    // this.responseCallback(data)
                }
            );
        },
        methods:{
            callNative() {
                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
                    this.$bridge.callhandlerIOS(
                        "HY_H5_CALL_NATIVE",
                        { action: "param" },
                        data => {
                            // 处理返回数据
                        }
                    )
                }else if (/(Android)/i.test(navigator.userAgent)){
                    this.$bridge.callhandlerAndroid(
                    'action',
                    {message: 'param'},
                    res=>{
                           // 处理返回数据
                    }
                )
                }
            },
        }

参考链接