app-bridge.js 文件
import detector from 'detector';
let isInited = false;
export function isIOS() {
return !!detector.os.ios;
}
export function setupWebViewJavascriptBridge(callback) {
if (isIOS()) {
if (window.WebViewJavascriptBridge) {
return callback(window.WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
const WVJBIframe = document.createElement('iframe');
WVJBIframe.style.display = 'none';
WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(() => {
document.documentElement.removeChild(WVJBIframe);
}, 0);
} else if (window.WebViewJavascriptBridge) {
callback(window.WebViewJavascriptBridge);
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady',
() => {
callback(window.WebViewJavascriptBridge);
},
false
);
}
return false;
}
export function appBridge(api, params, callback) {
let printParams;
try {
printParams = JSON.stringify(params);
} catch (e) {
printParams = '';
}
console.log(
'------>>> appBridge: ',
'web -> native;',
`api: ${api};`,
`params: ${JSON.stringify(printParams)};`,
`callback: ${callback}.`
); // eslint-disable-line
setupWebViewJavascriptBridge(bridge => {
if (!isInited && !isIOS()) {
bridge.init();
}
isInited = true;
bridge.callHandler(api, params, callback);
});
}
export function appBridgeRegister(api, callback) {
console.log(
'<<<------ appBridgeRegister: ',
'native -> web;',
`api: ${api};`,
`callback: ${callback}.`
); // eslint-disable-line
setupWebViewJavascriptBridge(bridge => {
if (!isInited && !isIOS()) {
bridge.init();
}
isInited = true;
bridge.registerHandler(api, (data, responseCallback) => {
if (callback) {
callback(data, responseCallback);
}
});
});
}
bridge-opt.js文件
/**
* Internal dependencies
*/
import { appBridge, appBridgeRegister } from './app-bridge';
// toast
export function toast(msg) {
appBridge('toast', msg);
}
// 通知 Native 加载失败
export function loadingFail(msg) {
appBridge('loadingFail', msg);
}
// 获取用户的登陆状态
export function checkLoginState() {
return new Promise(resolve => {
appBridge('checkLoginState', null, res => {
if (!isIOS()) {
try {
res = JSON.parse(res);
} catch (e) {
res = {};
}
}
resolve(res);
});
});
}
// 获取用户的登陆状态-用于底部定制导航页中
export function checkLoginStateInTab() {
return new Promise(resolve => {
appBridge('react', { action: 'checkLoginState' }, res => {
if (!isIOS()) {
try {
res = JSON.parse(res);
} catch (e) {
res = {};
}
}
resolve(res);
});
});
}
//登录
export function loginReact() {
return new Promise(resolve => {
appBridge('react', { action: 'login' }, res => {
if (!isIOS()) {
try {
res = JSON.parse(res);
} catch (e) {
res = {};
}
}
resolve(res);
});
});
}
使用:
import {
loginReact, // 登录
} from 'libs/bridge/bridge-opt';
loginReact()
.then(res => {
if (res.isLogin) {
window.open('/annual-report');
}
})
.catch(() => {
this.setState({ loading: false });
});