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
