建立一个jsbridge.js
const utils = {
setupWebViewJavascriptBridge: (callback) => {
var sysPlatform;
var ua = navigator.userAgent.toLowerCase();//判断浏览器类型
if (/iphone|ipad|ipod/.test(ua)) {//调用设备对象的test方法判断设备类型
sysPlatform = "IOS";
} else if (/android/.test(ua)) {
sysPlatform = "ANDROID";
}
if(sysPlatform == "IOS"){
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)
}else if(sysPlatform == "ANDROID"){
if (window.WebViewJavascriptBridge) {
console.group("window.WebViewJavascriptBridge had init")
callback(WebViewJavascriptBridge);
} else {
console.group("window.WebViewJavascriptBridge init");
document.addEventListener(
'WebViewJavascriptBridgeReady', function() {
WebViewJavascriptBridge.init(function(message, responseCallback) {
// console.log('JS got a message', message);
var data = {
'Javascript Responds': 'Wee!'
};
// console.log('JS responding with', data);
responseCallback(data);
});
callback(WebViewJavascriptBridge)
},
false
);
}
}
},
WebViewJavascriptBridge: function(fuc,json) {
return new Promise(function (resolve, reject) {
utils.setupWebViewJavascriptBridge(function (bridge) {
var sysPlatform;
var ua = navigator.userAgent.toLowerCase();//判断浏览器类型
if (/iphone|ipad|ipod/.test(ua)) {//调用设备对象的test方法判断设备类型
sysPlatform = "IOS";
} else if (/android/.test(ua)) {
sysPlatform = "ANDROID";
}
if(sysPlatform == "IOS"){
bridge.registerHandler('h5UserInfo', function (data, responseCallback) {
var responseData = { 'Javascript Says': 'Right back atcha!' }
responseCallback(responseData);
resolve(data)
})
bridge.registerHandler('h5func', function (data, responseCallback) {
var responseData = { 'Javascript Says': 'Right back atcha!' }
// utils.getPopup(responseData);
responseCallback(responseData);
resolve(data)
})
bridge.callHandler(fuc, json, function (response) { //h5调用原生 能够获取原生的值
resolve(response);
})
}else if(sysPlatform == "ANDROID"){
bridge.registerHandler('h5UserInfo', function (data, responseCallback) {
var responseData = { 'Javascript Says': 'Right back atcha!' }
// utils.getPopup(responseData);
responseCallback(responseData);
resolve(data)
})
bridge.registerHandler('h5func', function (data, responseCallback) {
var responseData = { 'Javascript Says': 'Right back atcha!' }
// utils.getPopup(responseData);
responseCallback(responseData);
resolve(data)
})
bridge.callHandler(fuc, json, function (response) {
resolve(JSON.parse(response))
})
}
})
});
}
}
export default utils;
用的时候只要 import 进来
这样使用
utils.WebViewJavascriptBridge("AppLogin",{}).then((data) => {
});
因为以前有版本没有用jsbridge 我们可以用 try catch去捕获错误。