WebView,JSBridge

简单来说，WebView是容器，JSBridge是桥梁，他们共同构成了现在主流的混合开发（Hybrid App）模式的基础

1. 什么是WebView？（容器）

WebView是移动端（iOS和Android）操作系统提供的一个UI组件。可以理解为嵌在App里的一个简易浏览器窗口。

• 功能：具备浏览器的核心功能（渲染引擎），可以解析HTML、CSS和执行JavaScript
• 作用：允许App在不跳出应用的情况下展示网页

2. 什么是JSBridge？（桥梁）

JSBridge（JavaScript Bridge）是一种通信机制。

• 背景：WebView虽然能运行网页，但它是一个“沙盒”环境。网页里的JavaScript无法直接调用手机的原生能力（比如：打开摄像头、获取通讯录、读取地理位置、调用指纹支付）。
• 作用：JSBridge就像一座桥，连接了JavaScript（网页端）和Native（原生端，iOS/Android），让它们可以互相发送消息、调用函数。

3. JSBridge是如何工作的？

JSBridge的核心是双向通信。

A. Native (App) 调用 JS (网页) 这方向比较简单。因为 WebView 本身就是 App 的一部分，原生代码可以直接告诉浏览器：“嘿，执行这段 JS 代码。”

• Android：使用webview.loadUrl("javascript:func()")或evaluateJavascript。
• iOS：使用evaluateJavaScript。
• 场景：App获取用户的定位信息，需要传给网页展示，App会主动调用JS函数把坐标传进去

B. JS (网页) 调用 Native (App) 这方向比较复杂，因为网页出于安全考虑，不能随便访问系统底层。JSBridge 通常通过以下几种“黑科技”来实现：

1. URL Schema 拦截 (经典做法):
   1. JS 发起一个特殊的网络请求，比如myapp://openCamera?id=123
   2. WebView 拦截到这个请求，发现前缀是 myapp://，于是它不加载网页，而是解析这个链接，去执行打开摄像头的原生代码。
2. 对象注入 (注入 API):
   1. Native 直接向 WebView 的 window 对象里注入一个全局对象（比如 window.Android 或 window.webkit）。
   2. JS 就像调用普通函数一样调用 window.Android.openCamera()，直接触发原生代码。
3. 弹窗拦截 (alert/prompt):
   1. JS 调用 prompt() 弹窗。
   2. WebView 拦截这个弹窗事件，读取里面的内容，根据约定执行原生操作。

4. 优缺点与应用场景

将 WebView 和 JSBridge 结合使用（Hybrid 开发），是目前大厂 App 的标配（如微信小程序、支付宝、抖音 H5）。

优点

• 灵活性极高（热更新）： 页面内容在服务器端，改了 HTML/CSS，用户打开 App 就能看到最新效果，不需要用户去应用商店更新 App。
• 跨平台： 写一套网页代码，可以在 Android 和 iOS 上同时运行。
• 开发效率高： Web 开发速度通常比原生开发快。

缺点

• 性能略差： 渲染速度和流畅度不如纯原生 App（Native），尤其是在做复杂动画时。
• 内存占用： WebView 比较吃内存。

H5与WebView、JSBridge的关系

• App（Native）：是房子
• WebView：是房子里的电视机
• H5:是电视机里播放的节目画面
• JSBridge：是遥控器