Hybrid混合开发：原生壳里跑网页

Hybrid（混合）开发在移动端里指的是：原生 App + Web 技术（HTML / CSS / JS）一起用。App 本身是用 iOS / Android 原生写的，但其中一部分页面不是原生页面，而是放在 App 里的 WebView 中运行的网页，这些网页通常就是前端用 Vue / React 写的 H5 页面。

Hybrid 的核心思想是：外面是原生壳，里面跑网页。前端代码运行在 WebView 里，通过一种叫 JSBridge 的机制，和原生代码互相通信，从而调用原生能力，比如相机、扫码、定位、支付、打开原生页面、获取设备信息等。对前端来说，本质还是写 Web，只是运行环境从浏览器变成了 App 的 WebView。

之所以用 Hybrid，是因为它在效率和能力之间做了折中：相比纯 H5，它能用到更多原生能力、体验更接近 App；相比纯原生开发，它可以一套代码同时跑在 iOS 和 Android 上，开发和迭代速度快，很多业务页面甚至不用发版就能更新。

需要注意的是，Hybrid 页面本质仍然是网页，性能和体验通常不如完全原生，但在“业务页面、活动页、列表页、配置类页面”这类场景非常常见。它也和 React Native、Flutter 不一样，Hybrid 用的是真正的 WebView 和 DOM，而 RN / Flutter 渲染的是类原生组件，不是网页。对前端来说，Hybrid 的关键就是 JS 调原生、原生调 JS。

一个最简单的 JS 调原生示例（概念版）：

// JS 调用原生方法
window.NativeBridge.openCamera({
  quality: 80,
  success(imgUrl) {
    console.log('拍照结果：', imgUrl)
  },
  fail(err) {
    console.error(err)
  }
})

原生调用 JS 的常见形式（WebView 里暴露给原生）：

// 给原生调用的全局方法
window.onLoginSuccess = function (userInfo) {
  console.log('原生登录成功', userInfo)
}

在真实项目里，通常会再包一层，避免直接用 window，比如：

export function openCamera() {
  return new Promise((resolve, reject) => {
    window.NativeBridge.openCamera({
      success: resolve,
      fail: reject
    })
  })
}

一句话记忆：Hybrid 页面本质是 Web，能力靠 JSBridge 补齐；代码看起来像前端，但运行在 App 里。