手帐 Blog

主题

多端实践教程系列 ​

面向：已有 Vue / React 与前端工程经验，想把 Web 能力推到「可安装 / App 壳 / 小程序 / 原生多端」的学习者。
原则：官方文档优先；一事一文；每篇有验收清单；选型口述可复用。
本系列顺序：PWA → Capacitor → uni-app 打包 → React Native（入门 → 深潜）。
进度：01～14 正文已齐（07～08 入门收束；09～14 由杂记拆分的 RN 深潜）。

怎么读 ​

节奏建议
平日 50～80′读 1 篇 + 按文内步骤在本机敲通最小验收
周末冲阶段里程碑（02 可安装 PWA / 04 Capacitor 真机包 / 05 Journal 双端构建 / 08 选型口述 / 09～11 Fabric 与手势动画）
卡壳时先打开文内「官方入口」，再问 AI；把 AI 答案对照官方验收
与算法 / Go 并行时多端线用周里程碑，不与主线抢每日配额

与「前端进阶」的关系 ​

文档职责
前端进阶 · 18 · PWA概念速览：缓存策略与何时上 PWA
前端进阶 · 22 · 跨端对照运行时差异：H5 vs 小程序、条件编译心智
本系列工程落地：Manifest/SW 更新、Capacitor 进壳与打包、uni-app 多端构建、RN 导航/原生模块/发布与深潜

建议：18 / 22 可先扫一眼；本系列从 01 按序做，实践深度以本目录为准。

技术路线（已定） ​

text
阶段 A  心智 + PWA 工程落地（01～02）
阶段 B  Capacitor 进壳与双端发布（03～04）
阶段 C  uni-app 多端打包与对照（05～06）
阶段 D  RN 入门到发布 + 总复盘（07～08）
阶段 E  RN 深潜：Fabric / 手势动画 / 系统能力 / 组件（09～14）

Flutter / Taro / Ionic 仅在 01 选型表一句带过，正文不展开。
不做完整业务 App 从 0 到上架长文；uni-app 业务开发细节以 22 为准，本系列只从打包视角引用。

文章索引（建议顺序） ​

阶段 A · 心智与 PWA（01～02） ​

#文档你学完应能做什么
01多端路线图与选型心智口述 PWA / Capacitor / uni-app / RN 定位与何时选谁；划清本系列边界
02PWA 工程落地：Manifest 与 SW 更新Vite 落地 manifest + SW；缓存策略；「有新版本」提示

阶段 B · Capacitor（03～04） ​

#文档你学完应能做什么
03Capacitor 入门：Web 进原生壳脚手架、cap add、Web 同步到原生工程；说清与纯 PWA 边界
04Capacitor 插件与双端打包发布常用插件心智；Android/iOS 本地构建；签名与调试踩坑清单

阶段 C · uni-app 打包（05～06） ​

#文档你学完应能做什么
05uni-app 多端打包全景：H5 / 小程序 / App对照 Journal 跑通 H5 / 微信小程序构建；理解 App 打包链路与包体意识
06uni-app 打包踩坑与 Capacitor 差异对照云打包 vs 本地打包；证书/权限常见坑；一张表对比 uni-app App 与 Capacitor

阶段 D · React Native 入门与收束（07～08） ​

#文档你学完应能做什么
07React Native 入门：环境、导航与 Web 心智差异Hello World；React Navigation 最小栈；与 DOM / uni-app 心智差异
08RN 原生模块、打包与多端总复盘桥接直觉；双端打包要点；四条路线选型口述 + 面试能讲清单

阶段 E · React Native 深潜（09～14） ​

由 ReactNative.md 杂记去重拆分；读完 07～08 再进本阶段更顺。

#文档你学完应能做什么
09RN Fabric：三线程模型与渲染流水线口述 JS / 布局后台 / UI 三线程；Render → Commit → Mount；为何需要 Fabric
10RN Fabric：C++ 核心与跨平台一致性用「轻量浏览器内核」类比 Shadow Tree + Yoga；说清 JNI 隐藏成本
11RN 手势与 Reanimated 动画RNGH 声明式手势；useSharedValue 与 UI 线程动画心智
12RN 权限、推送与后台能力权限四步法；本地/远程通知；Expo 推送与后台定位路径
13RN 安全区、状态栏与核心组件StatusBar vs Safe Area；View/Text/FlatList/Pressable 打底与坑
14RN 生产进阶清单划清 FlashList / OTA / Native Module / MMKV 等后续补强方向

官方总入口（收藏） ​

与 blog 其他文档的关系 ​

  • 履历 / 暑期总计划在 blog/ 根目录；本目录放 多端自学教程与笔记。
  • Journal 产品方案在 docs/spec/；本系列对照 client/ 构建命令，不改产品交付口径。
  • 练习默认独立最小 demo；uni-app 篇优先对照本仓库根目录 pnpm build:h5 / pnpm build:mp-weixin。