JSBridge

JSBridge

参考：https://zhuanlan.zhihu.com/p/110923534

https://juejin.cn/post/6844904070881214471#heading-0

1. 引入

jsbridge 是随着 Hybrid App 的流行而产生的一种技术。那么 Hybrid App 是啥？Hybrid App又称混合App，即同时使用了前端 web 技术 (js,css,html) 和原生 native 技术 (java,kotlin,swfit,object-c) 进行开发的移动应用。

1.1 混合开发的优缺点

• 优点：开发快，易更新，开发周期短，跨平台
• 缺点：性能问题，兼容性问题

1.2 常见的混合开发框架

• webview渲染：Cordova，uni-app
• 原生渲染：React Native，Weex，Flutter
• 混合渲染：小程序

2. JsBridge

现在很多App的页面，不一定都是原生实现的，可能是通过 webview 直接加载一个线上的 h5 站点。

如点击分享图标，可以把当前页面分享到第三方平台，分享后，web 页面需要知道是否分享成功。

这里就涉及了 native 端和 web 端的通信：native 分享的内容，需要 web 端的 js 进行设置（js -> native）；native 分享成功后，需要把消息通知给 js (natvie -> js)。为实现两端的双向通信机制，就需要 jsbridge 技术了。

2.1 Native通知JS

因为 h 5网页是通过原生端的 webview 加载的，所以原生端对当前网页拥有很高的权限：Native 端可以直接在当前 webview 里执行 js 代码。

// web端
function nativeCallback(data) {
  console.log('data', data);
}

我们在 js 的执行环境里定义了一个全局方法 nativeCallback，native 端可以直接执行nativeCallback(123) 方法，也就把数据传给了 js。

2.2 JS通知Native

native端通过拦截url请求，从而调用原生方法。

2.3 双向通信