vue与原生app的对接交互的方法(混合开发)

对于vue项目想要和原生app进行对接交互的方法，可以采用混合开发的方式。下面是一些实现的方式和示例说明：

方式一：使用WebViewJavascriptBridge

1. 引入WebViewJavascriptBridge

在vue项目中引入WebViewJavascriptBridge.js，可以直接在head标签中引入以下代码：

<script src="https://cdn.bootcss.com/WebViewJavascriptBridge/6.0.0/WebViewJavascriptBridge.min.js"></script>

1. 创建一个WebViewJavascriptBridge实例

在vue项目中需要和原生app进行交互的组件中，可以创建一个WebViewJavascriptBridge对象：

mounted(){
    var that = this
    if (window.WebViewJavascriptBridge) {
      that.bridge = window.WebViewJavascriptBridge
      that.connectWebViewJavascriptBridge(that.bridge)
    } else {
      document.addEventListener('WebViewJavascriptBridgeReady', function () {
        that.bridge = window.WebViewJavascriptBridge
        that.connectWebViewJavascriptBridge(that.bridge)
      },
      false)
    }
},
connectWebViewJavascriptBridge(bridge) {
    bridge.init(function (message, responseCallback) {})
},

1. 给原生app发送消息

在vue项目中，如果需要给原生app发送消息，可以通过调用jsBridge的send方法来实现：

this.bridge.send(data, function (responseData) {
    //回调函数
});

1. 接收原生app发送的消息

在vue项目中，如果需要接收原生app发送的消息，可以通过jsBridge的registerHandler方法注册一个名为“jsToH5”的handler，并定义一个用于接收数据的回调方法：

this.bridge.registerHandler("jsToH5", function(data, responseCallback) {
    responseCallback('Response message from js.');
});

1. 在原生app中调用jsBridge的方法

在原生app中，如果需要调用vue项目中的方法，可以通过jsBridge的callHandler方法来实现，如下所示：

//调用jsBridge的方法
[webViewBridge callHandler:@"handleNativeAction" data:data responseCallback:^(id response) {
//在这里处理收到的消息
}];

例如，可以将原生app中的点击事件通过jsBridge传递到vue项目中，实现以下代码：

webViewBridge.registerHandler('handleWebAction', function(data, responseCallback) {
    if (data.action == 'clickbutton') {
        bridge.send("Button Clicked", function (responseData) {});
    }
});

方式二：使用JavaScriptCore

在vue项目中，可以通过使用JavaScriptCore来实现与原生app的对接交互，具体实现流程如下：

1. 引入JavaScriptCore

在vue项目中引入JavaScriptCore.js，可以直接在head标签中引入以下代码：

<script src="https://cdn.bootcss.com/JavaScriptCore/4.0.0/JavaScriptCore.min.js"></script>

1. 注册被原生调用的方法

在vue项目中，需要注册一个被原生调用的方法，并定义一个回调方法来接收原生app发送的消息：

window.webkit.messageHandlers.jsToH5.postMessage({
    msgType: "registerHandler",
    handlerName: "h5Func"
});
window.h5Func = function (data) {
    //处理数据的回调方法
};

1. 在原生app中调用方法

在原生app中，可以通过调用JavaScriptCore的evaluate方法，将调用请求传递到vue项目中的方法：

JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *funcToCall = [NSString stringWithFormat:@"window.h5Func('%@')", data];
[context evaluateScript:funcToCall];

例如，可以将原生app中的按钮点击事件通过JavaScriptCore传递到vue项目中，实现以下代码：

[webViewBridge registerHandler:@"handleWebAction" handler:^(id data, WVJBResponseCallback responseCallback) {
    if (data) {
        context[@"h5Func"] = ^(){
        [self.webViewBridge callHandler:@"jsToH5" data:data];
    };
}]

通过以上的两种方式，可以实现vue项目和原生app的对接交互，按照实际需求选择合适的方式实现即可。