一套代码四个平台
Web 应用多端适配技术实践笔记
事情的起因
前段时间，我给自家小朋友做了一个专属的小应用，Web 版的，里面有三个板块：玩游戏、培养习惯、听故事。
最初是用 React 写的——React 是一个前端开发框架，你可以简单理解为"一套搭建网页的工具箱"。做出来之后，在浏览器里打开就能用，手机上也能访问，样式也做了适配。
本来以为这就完事了。
但用了几天发现一个很烦的问题：每次在手机浏览器里打开，顶部和底部的浏览器工具栏总会遮挡一部分内容。小朋友点来点去，有时候会误触到浏览器的前进后退按钮，体验很不好。
于是我就想：能不能把它变成一个"正经的 App"？不需要打开浏览器，直接点图标就能用的那种。
这一折腾，就折腾出了好几个方向。
一、先搞桌面端：用 Electron 把网页变成桌面应用
我最先尝试的是把这个 Web 应用做成桌面端应用，就是你在电脑上双击图标就能打开的那种软件。
用到的技术叫 Electron。
Electron 是什么？
你可以这么理解：Electron 做的事情，就是把一个浏览器"藏"进了你的应用里。用户看到的是一个独立的桌面软件，但背后其实还是在跑网页代码。
很多你熟悉的软件其实都是用 Electron 做的，比如 VS Code（微软的代码编辑器）、Slack、Notion 桌面版。所以这个方案是很成熟的。
实际操作体验
这次转换的过程出乎意料地顺利。
我只是跟 Codex（OpenAI 的 AI 编程助手）说了一句"帮我把这个项目转换成 Electron 桌面应用"，它就自动帮我完成了所有配置。用的是 electron-builder 这个工具来打包，一条命令就能把 React 项目打包成完整的桌面应用。
我先构建了 Windows 版本，成功了；又试了试 macOS 版本，也成功了。整个过程几乎没有手动写什么代码，Codex 把脏活累活都干了。
打包出来的应用体积确实比较大，随随便便就上百兆——因为 Electron 内置了一整个 Chromium 浏览器内核。对于我这个小应用来说，属实有点"杀鸡用牛刀"了，但桌面端嘛，大一点倒也能接受。
二、再搞移动端：用 Capacitor 把网页变成手机 App
桌面端搞定之后，我又想：小朋友日常用的是 iPad 和手机，能不能做成原生的移动端 App？
这次用到的框架叫 Capacitor。
Capacitor 是什么？
简单来说，Capacitor 的思路和 Electron 有点像——它把你的网页代码塞进了手机系统自带的 WebView 里。
WebView 是什么？你可以理解为手机系统内置的一个"迷你浏览器组件"。很多 App 里打开一个链接，不会跳转到外部浏览器，而是直接在 App 内部展示网页，用的就是 WebView。
Capacitor 做的事情，就是把你的 Web 应用包装成一个原生 App 的壳子，里面用 WebView 来渲染你的网页内容。好处是：一套 Web 代码，稍微配置一下，就能生成安卓的 APK 安装包。
实际操作体验
和 Electron 一样，这次转换也是靠 Codex 完成的。
我跟它说"帮我把这个 Web 项目用 Capacitor 转成安卓应用"，它就推荐了 Capacitor 这个方案，然后自动帮我完成了所有配置和构建。
装到手机上一试——还真能用，效果比我预期的要好。没有了浏览器工具栏的遮挡，全屏展示，小朋友操作起来顺畅多了。
而且打包出来的体积比 Electron 小很多，毕竟 WebView 是系统自带的，不需要额外打包一个浏览器进去。
三、再试试小程序：用 Taro 把 React 项目转成微信小程序
既然桌面端和移动端都搞定了，我又冒出一个念头：要不顺便做个微信小程序？毕竟在国内，小程序的使用场景太普遍了，分享起来也方便。
这里用到的框架叫 Taro。
Taro 是什么？
Taro 是一个多端开发框架，它的卖点是：你用 React 的语法写一套代码，它帮你编译成微信小程序、支付宝小程序、H5 等不同平台的代码。听起来很美好对吧？
实际体验
说实话，跑通是跑通了——我确实成功把 React 项目通过 Taro 转成了微信小程序项目，在微信开发者工具里也能正常打开。
但是，样式偏差比较大。
按钮的位置不对、间距不对、有些组件的表现和 Web 端差异明显。背后的原因是 React 生态和小程序生态在样式处理上有不少差异，很多 CSS 属性在小程序里的表现不一样，需要单独去调。
总之这条路能走通，但没有 Capacitor 和 Electron 那么丝滑，需要额外花不少时间做适配和微调。
四、冷静下来想想：我真的需要这么多端吗？
折腾完上面这一大圈，我突然意识到一件事——
我给小朋友做一个应用，真的需要覆盖这么多平台吗？
仔细想想，我实际需要的其实就三个端：
- 手机端（日常随手用）
- iPad 端（在家里用，屏幕大，体验好）
- 网页端（偶尔在电脑上访问）
小程序暂时不急，桌面端也不是刚需。那些多出来的端侧方案，更多是我出于好奇心去做的技术探索。
这就是典型的"技术先行，需求在后"。
不过话说回来，我并不觉得这些探索是浪费时间。正是因为亲手试了一遍，我才真正理解了每个方案的优缺点和适用场景。下次再遇到类似需求的时候，我能很快做出判断，而不是在各种方案之间纠结。
五、下一步计划：用 Monorepo 统一管理多端代码
折腾完这一圈，我还发现了一个很现实的问题——我现在有四个代码仓库：
- React Web 项目（网页版）
- Electron 项目（桌面版）
- Capacitor 项目（安卓版）
- Taro 项目（小程序版）
每次改一个功能，我得在四个仓库里分别改一遍。哪怕核心逻辑是一样的，也得复制粘贴四次。时间一长，各个仓库之间的代码必然会出现不一致，维护成本越来越高。
查了一下，发现业界对这类问题有一个成熟的解决方案，叫 Monorepo（单体仓库）。
简单来说，就是把所有端侧的代码放在同一个仓库里管理，但内部按子工程拆分。公共的代码抽成共享模块，各端只保留自己独有的部分。这样改一个地方，所有端自动同步，不会出现到处复制、到处改的问题。
这个方案我还没开始做，打算下一步尝试搭建一下，到时候再单独写一篇记录实践过程。
六、技术方案对比总结
最后，把这次用到的几个技术方案做一个横向对比，方便大家快速了解它们的区别和适用场景。
Electron vs Capacitor
| 维度 | Electron | Capacitor |
|---|---|---|
| 目标平台 | 桌面端（Windows / macOS / Linux） | 移动端（iOS / Android） |
| 技术原理 | 自己内置了一个 Chromium 浏览器 | 借用系统自带的 WebView |
| 应用体积 | 比较大（因为要带一整个浏览器） | 比较轻量（WebView 是系统现成的） |
| 内存占用 | 偏高 | 更低，接近原生 App |
简单记就是：做桌面端用 Electron，做移动端用 Capacitor。
Capacitor vs React Native
- Capacitor 是 "Web First"：你的界面本质上还是网页（HTML + CSS + JS），只不过跑在了手机的 WebView 里。你几乎可以 100% 复用已有的 Web 代码。
- React Native 是 "Native First"：虽然你写的是 JS 代码，但它最终会被转换成真正的原生组件来渲染。
选择思路：
- 已经有一个 Web 项目，想最快速度搬到手机上 → Capacitor，改动最小
- 对性能和原生体验要求更高，愿意多投入一些开发成本 → React Native
一句话总结
| 场景 | 推荐方案 |
|---|---|
| Web 项目 → 桌面应用 | Electron |
| Web 项目 → 移动端 App（快速迁移） | Capacitor |
| 追求原生移动端体验 | React Native |
| React 项目 → 小程序 | Taro |
写在最后
回顾这一轮折腾，本质上就是一个 Web 开发者试图"一鱼多吃"的过程——用一套 Web 代码，尽可能多地覆盖不同平台。
现代前端生态确实提供了很多这样的工具和框架，让这件事变得越来越可行。而且有了 Codex 这样的 AI 编程助手，很多繁琐的配置工作都可以交给它来完成，大大降低了上手门槛。
但我也真切体会到：能做和该做是两件事。
技术上能跑通四五个端，不代表你真的需要维护四五个端。回到需求本身，想清楚用户到底在哪里用、怎么用，再做技术选型，才是更务实的做法。