什么是 JS Bridge？
-
JS Bridge 是 JS 和 Native 之间的一种通信方式
-
js 无法直接调用 native api
-
需要通过一些特定的 格式 来调用
-
这些 格式 就统称为 JS-Bridge，例如微信 JSSDK
JS Bridge 的常见实现方式
- 注册全局api（不太适合异步的情况）
比如：
const version = window.getVersion();
- URL Scheme（适合所有情况）
<iframe id="iframe1"></iframe>
<script>
const iframe1 = document.getElementById("iframe1");
iframe1.onload = () => {
console.log("onload");
}
// url scheme
iframe1.src = "my-app-name://api/getVersion";
</script>
封装一个 js-bridge（注入 api 的方式）
export function native(funcObj) {
let u = navigator.userAgent;
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isiOS) {
window.webkit && webkit.messageHandlers.jsToOcWithPrams.postMessage(funcObj)
} else {
window.AndroidObj && window.AndroidObj.sendDataToAndroid(JSON.stringify(funcObj))
}
}
封装一个 js-bridge（js scheme 的方式）
// 封装 js-bridge
const sdk = {
invoke(url, data = {}, onSuccess, onError) {
const iframe = document.createElement("iframe");
iframe.style.visibility = "hiddle";
document.body.appendChild(iframe);
iframe.onload = () => {
const content = iframe.contentWindow.document.body.innerHTML;
onSuccess(JSON.parse(content));
iframe.remove();
}
iframe.onerror = () => {
onError();
iframe.remove();
}
iframe.src = `my-app-name://${url}?data=${JSON.stringify(data)}`;
}
}
