跟着江哥从零狂虐H5+跨平台开发

这门课的主题落在 H5 与跨平台开发的结合上，标题里的「从零」不是客套——它默认你没有移动端 Web 与混合应用的工程经验，直接从页面结构、样式布局讲到打包成可安装的 App。资料按 24 个阶段组织，每阶段是视频加配套代码，适合边看边对照跑。

技术栈的边界在哪里

H5 部分覆盖的是移动端页面的基本功：viewport 适配、rem/vw 方案、Flex 布局、触摸事件、滚动穿透与惯性滚动处理。这些在 PC 上写页面时经常被忽略，但在手机浏览器里是直接决定体验的环节。跨平台部分则围绕 WebView 容器与桥接机制展开，讲的是如何把一份 H5 代码放进原生壳里，调用设备能力，再处理两端差异。

需要说清楚的是，这门课不是 React Native 或 Flutter 那种自绘渲染路线，它的重心在 Web 技术栈的复用上。如果你的目标是快速把已有前端能力延伸到移动端、并且能接受 WebView 的性能上限，这套内容对得上；如果你要的是原生级流畅度，应该去看别的方向。先想清楚这一点，再决定投入时间。

项目结构怎么读

24 个阶段的划分意味着它不是一个大而全的示例，而是逐层叠加的。前期集中在单个页面的还原与适配，中期开始出现多页面跳转、路由管理、本地存储，后期才进入混合打包与设备接口调用。配套代码按阶段独立存放，好处是可以直接跳到某一节，把该阶段的代码单独跑起来，不用先补完前面所有内容。

建议的读法是：先通读一遍某个阶段的视频，然后立刻打开对应代码，把关键文件按自己的理解改一遍。比如适配方案那一段，把基准值换掉、把单位改成另一种写法，看页面在不同设备模拟下的表现差异。这种改动比单纯跑通一遍更能暴露理解上的空白。

可以复用的模块

• 移动端适配层：屏幕尺寸计算、根字号设置、单位换算的封装，可以直接抽成项目里的一个工具文件。
• 请求与状态管理：接口封装、loading 与错误提示的统一处理，这部分在任何 H5 项目里都能复用。
• WebView 桥接：JS 调用原生、原生回调 JS 的通道设计，是混合开发绕不开的一层，写法值得记录成模板。
• 打包与调试流程：真机调试、日志抓取、资源更新机制，这些工程细节在文档里通常写得很少，课程里能听到实际操作顺序。

这些模块的价值在于它们不依赖课程本身。你换一个业务场景，把适配层和桥接层搬过去，剩下的只是业务页面的事。

自学路径建议

不要按顺序从头看到尾。先跳到混合打包那几节，看看最终产物长什么样、和原生是怎么通信的，心里有个全貌，再回头补 H5 适配和布局的基础。遇到具体问题时再回到对应章节，效率比线性推进高。

每完成一个阶段，用一句话写下「这一节解决了什么问题」，积累下来就是一份可检索的笔记。面试或做新项目时，翻这份笔记比翻视频快得多。如果时间允许，把其中某一个阶段的代码重构成自己习惯的组织方式，这个动作本身就是一次小型工程练习。