混合开发时,安卓和IOS同事用的WebView库不同,在与我(H5)交互时用的js方法也不同。
jsBridge.js 是IOS定义api
var JsBridge = {
install: function (Vue) {
Object.defineProperty(Vue.prototype, 'JsBridge', { value: JsBridge })
},
init: function (callback) {
if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0)
},
registerHandler: function (name, fun) {
this.init(function (bridge) {
bridge.registerHandler(name, fun);
})
},
callHandler: function (name, data, fun) {
this.init(function (bridge) {
bridge.callHandler(name, data, fun);
})
}
}
export default JsBridge
app.js 是对两端的api简单包装了一下
import JsBridge from './jsBridge.js'
export function getAppParams (resolve, reject) {
var userAgent = navigator.userAgent
var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
if (isAndroid) {
//注册事件监听
function connectWebViewJavascriptBridge (callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function () {
callback(WebViewJavascriptBridge)
},
false
);
}
}
//注册回调函数,第一次连接时调用 初始化函数
connectWebViewJavascriptBridge(function (bridge) {
bridge.init(function (data, responseCallback) { //收到原生发来的数据 data
data = JSON.parse(data)
if (data) {
resolve(data)
} else {
reject("no data")
}
var responseData = 'js got it';
responseCallback(responseData);
});
})
} else {
JsBridge.registerHandler(
'XXXFun',//注册的方法名,供原生调用
(data, responseCallback) => { //收到原生发来的数据 data
data = JSON.parse(data)
if (data) {
resolve(data)
} else {
reject("no data")
}
var responseData = "js got it";
responseCallback(responseData);
})
}
}
使用时也很简单,可以在mouted里使用,把客户端交互的参数拿到后再做业务流程。
import {getAppParams} from './app.js'
var p = new Promise(getAppParams)
p.then((res) => {
console.log(res)
}).catch((error) => {
console.log(error)
})