概念三者是前端展示形态的划分, 区别体现在设备、交互方式、技术栈上。不同公司对这三个场景的边界划分是不同的WAPWireless Application Protocol原本是90 年代的功能机协议WML 标记语言现在已演变为移动H5 页面的同义词与原义脱钩。JSBridgeJavaScript Bridge 是 App原生壳和内嵌 H5 页面WebView之间的双向通信通道。它让 H5 里的 JavaScript 能调用 App 原生能力相机、定位、扫码、支付、推送、文件系统等反过来 App 原生代码也能调用 H5 里的 JS 函数。 JSBridge 混合开发里H5 调原生、原生调 H5的那个翻译层。纯 H5 跑在浏览器/WebView 沙箱里能力受限——拿不到通讯录、调不起支付宝/微信原生支付、扫不了码、推送不了。但完全用原生开发又不灵活每次改页面都要发版。所以混合开发Hybrid App的常见做法是UI 层用 H5 写方便迭代、跨端复用、不发版就能更新设备能力用原生实现性能好、能力全两者之间用 JSBridge 打通RN(React Native) 用 JavaScript/TypeScript React 的写法一套代码同时编译出 iOS 和 Android 原生 AppRN 不等于 H5/WAPH5/WAP 是网页跑在浏览器/WebView RN 编译出来是手机App发版要过应用商店维度WebWirelessWAP形态PC 端网页原生 App / 小程序移动端 H5 网页设备电脑、笔记本手机、平板安装 App手机浏览器、微信内置浏览器屏幕大屏≥1280px小屏手机原生尺寸小屏375×667 等交互鼠标 键盘hover、右键触摸、滑动、手势、原生组件触摸、滑动无 hover技术栈HTML/CSS/JS Vue/React复杂表格NativeiOS/Android、(React Native) RN、Flutter、小程序HTML5 Vue/React SPAURL 特征www.xxx.com / xxx.com无 URL走 API/JSBridgem.xxx.com / wap.xxx.com设备能力受限完整相机、定位、推送、本地存储受限WebAPI 沙箱网络稳定、宽带蜂窝/Wi-Fi需考虑弱网蜂窝/Wi-Fi需考虑弱网设计要点多列布局、信息密度高、复杂表单单列、大按钮、原生导航单列、大字体、纵向滚动、首屏优先