📱 从零到一搭建混合开发工程体系
📚 30章 · 系统化学习 · 企业级实战
📖
总章节
30
🚀
进阶之路
→
🎯
从零到一
01
混合开发概述
入门
什么是混合开发 · 为什么选择混合开发 · 主流技术对比 (WebView/RN/Flutter/小程序)
02
工程初始化
基础
项目结构设计 · Git初始化 · README与贡献指南编写
03
WebView基础
核心
Android/iOS WebView使用 · 配置 · 加载本地与远程H5页面
04
JSBridge原理
进阶
通信机制 · URL Scheme拦截 · JavaScript注入 · 回调处理
05
JSBridge实战
实战
封装统一SDK · 同步/异步调用 · 错误处理与超时机制
06
前端框架选型
决策
Vue vs React vs 原生JS · 组件化设计 · 状态管理 (Vuex/Pinia/Redux)
07
前端工程化
工具
Webpack/Vite配置 · Babel转译 · ESLint+Prettier · Husky提交钩子
08
H5与原生通信
通信
调用原生相机/相册 · 获取设备信息 · 调用原生支付/分享
09
原生调用H5
通信
原生主动调用H5方法 · 传递复杂数据 · H5事件监听与回调
10
离线包方案
架构
离线包原理 · 增量更新 · 资源版本管理 · CDN与本地缓存策略
11
性能优化（上）
优化
首屏加载优化 · 资源预加载 · 图片懒加载 · DOM操作优化
12
性能优化（下）
优化
WebView复用池 · 内存泄漏检测 · 滚动/动画性能优化
13
安全防护
安全
HTTPS与证书校验 · WebView安全配置 (XSS/CSRF) · JSBridge权限控制 · 数据加密传输
14
调试与测试
质量
Chrome DevTools远程调试 · vConsole/Eruda · 单元测试 (Jest) · UI自动化 (Appium)
15
持续集成/持续部署
DevOps
Jenkins/GitHub Actions配置 · 自动化构建/打包/部署到CDN
16
日志与监控
运维
前端/原生日志采集 · 日志上报策略 · 错误监控 (Sentry)
17
用户体验优化
体验
加载进度条 · 骨架屏 · 下拉刷新/上拉加载 · 过渡动画
18
多端适配
兼容
屏幕适配 (rem/vw/百分比) · 刘海屏适配 · WebView内核兼容性
19
组件库建设
工程
UI组件库设计 · 业务组件封装 · Storybook文档 · npm私有仓库发布
20
路由与导航
架构
前端路由 (Vue Router/React Router) · 原生导航栏定制 · 页面栈管理
21
状态同步
数据
H5与原生状态同步 · 登录态同步 · 主题/语言切换同步
22
数据存储
存储
H5存储 (localStorage/IndexedDB) · 原生存储 (SharedPreferences/UserDefaults) · 安全存储 (Keychain)
23
网络请求
网络
Axios/Fetch封装 · 请求/响应拦截 · 请求重试 · 离线请求队列
24
图片与多媒体
媒体
图片选择/裁剪/压缩 · 拍照/录像 · 音频/视频播放
25
推送与通知
推送
原生推送注册 · H5推送回调 · 本地通知 · 角标管理
26
地图与定位
LBS
原生地图集成 · H5地图调用 · 定位权限管理 · 地理围栏
27
蓝牙与硬件
硬件
蓝牙设备搜索/连接/通信 · NFC读写 · 传感器数据获取
28
国际化与本地化
i18n
多语言方案 · 日期/货币格式化 · RTL布局适配
29
灰度发布与A/B测试
运营
灰度发布策略 · A/B测试框架 · 数据埋点与效果评估
30
工程总结与展望
收官
混合开发最佳实践 · 常见坑点总结 · 未来趋势 (WebAssembly/PWA/ArkTS)