h5 vue项目使用WebViewJavascriptBridge与ios和Android交互
vue项目可以使用WebViewJavascriptBridge与ios和Android交互。搜了一下找到了bridge.js的代码如下:function setupWebViewJavascriptBridge (callback) {if (window.WebViewJavascriptBridge) {return callback(window.WebViewJa...
vue项目可以使用WebViewJavascriptBridge与ios和Android交互。搜了一下找到了bridge.js的代码如下:
function setupWebViewJavascriptBridge (callback) {
if (window.WebViewJavascriptBridge) {
return callback(window.WebViewJavascriptBridge) }
if (window.WVJBCallbacks) {
return window.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)
}
export default {
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 Bridge from './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)
})
以上来自:
作者:w_zhuan
链接:https://www.jianshu.com/p/0dcb9699b703
来源:简书
但是在应用过程中发现还是有些问题,connectWebViewJavascriptBridge没有被调用导致收不到客户端传过来的数据。
所以加了一段调用它的:
connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
bridgeLog('默认接收收到来自Java数据: ' + message);
var responseData = '默认接收收到来自Java的数据,回传数据给你';
responseCallback(responseData);
});
})
ok,解决。
更多推荐
所有评论(0)