Ionic 概览
Web 技术栈移动壳。
25 分钟
Ionic 概览
Ionic 基于 Web 标准(HTML/CSS/JS) 提供移动 UI 组件与 Capacitor 原生壳——适合 已会 react-essentials 或 Vue/Angular、要把同一套 UI 打进 App Store 的团队。
学习目标
- 理解 Ionic 组件层 + Capacitor 原生桥的分工
- 对比 Ionic/Capacitor 与 PWA、Flutter 的选型位置
- 知道与 frontend-toolchain-essentials 联动的构建流
架构
你的 App(React/Vue/Angular + Ionic 组件)
↓
Capacitor WebView(iOS/Android)
↓
原生插件(Camera、Filesystem、Push…)
Ionic 不负责 路由与状态——常与 React Router 或框架自带路由共用;样式可用 Ionic 主题变量,也可叠 html-css-essentials 的自定义 CSS(注意 Shadow DOM 组件的穿透限制)。
Capacitor 工作流(概念)
npm run build # Web 产物,如 dist/ 或 .next export
npx cap sync # 同步到 ios/ android/
npx cap open android # Android Studio 打包
与纯 ft-deploy 静态托管相比,多 签名、权限、商店审核;与 http-protocol-essentials 相比,WebView 内 fetch 仍受 CORS、Cookie、混合内容 约束。
Ionic vs 其他方案
| PWA | Ionic + Capacitor | Flutter | |
|---|---|---|---|
| 商店分发 | 有限 / PWA 商店 | ✅ 常规 App | ✅ |
| 复用 React 代码 | ✅ 最高 | ✅ 高 | ❌ 需重写 UI |
| 原生感 | 中 | 中(依赖组件与优化) | 高 |
| 包体积 | 最小 | 中 | 中 |
Ionic 甜区:B 端表单、内容 App、已有 Web 管理后台要快出移动端。
性能与体验注意
- 长列表用虚拟滚动(Ionic 提供
IonVirtualScroll等模式) - 避免在 WebView 里跑过重 DOM;图片与 API 策略同 cpf-mobile
- 插件 API 调用是 异步 的,错误处理与 react-effects 模式一致