vue与原生app交互 混合开发

vue与原生app交互 混合开发

vue 通过路由vue-router。 (例如： this.$router.push("home"), 就可以跳转到home界面)，实现原生需要跳转的位置！

两者交互，可以通过第三方库来实现，你也可以不用。

下面介绍我怎么在 vue 项目中使用 WebViewJavascriptBridge

1、创建 src/config/bridge.js 文件，用于封装 WebViewJavascriptBridge

2、将以下代码拷贝到 bridge.js 文件中

functionsetupWebViewJavascriptBridge (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)

}

exportdefault {

callhandler (name, data, callback) {

setupWebViewJavascriptBridge(function (bridge){

bridge.callHandler(name, data, callback)

})

},

registerhandler (name, callback) {

setupWebViewJavascriptBridge(function (bridge){

bridge.registerHandler(name, function (data, responseCallback){

callback(data, responseCallback)

})

})

}

}

在 main.js 中引入该文件

import Bridgefrom'./config/bridge.js'

Vue.prototype.$bridge = Bridge

在需要调用客户端方法的组件中（事先需要与客户端同事约定好方法名）

this.$bridge.callhandler('ObjC Echo', params, (data) => {

// 处理返回数据

})

当客户端需要调用 js 函数时,事先注册约定好的函数即可

this.$bridge.registerhandler('JS Echo', (data, responseCallback) => {

alert('JS Echo called with:', data)

responseCallback(data)

})

下面介绍：iOS与vue交互(OC传值到Vue.js)

1、原生调用vue.js 某个vue组件下的方法。

methods:{

   hwajax:function(strings){

    this.tokenString = strings;

   }

}

methods:function(){

    window.hwajax=this.hwajax;

   }

}

在oc 里面调用

// 页面加载完成之后调用在iOS里面调用js方法：

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {

    NSString *jsStr = @"hwajax('lvkaike')";

    NSLog(@"%@",jsStr);

    [webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable d, NSError * _Nullable error) {

        NSLog(@"%@",d);

        NSLog(@"%@",error);

    }];

}

原文：https://blog.csdn.net/zgpeterliu/article/details/79571677