手帐 Blog

主题

22 · 跨端进阶：小程序与 uni-app 对照 ​

目标：说清 H5 与微信小程序差异；包体积、条件编译、原生能力边界；能对照 Journal（uni-app）讲踩坑。

1. 背景与目标 ​

同一套 Vue 写法，运行时不是浏览器。进阶不是背 API 列表，而是建立「这端能不能、代价多大」的判断。

2. 核心概念 ​

维度H5微信小程序
运行时浏览器 DOM双线程逻辑层 + 渲染层，无 DOM
路由history/hash 或框架路由小程序页面栈 / navigateTo 等
存储localStorage 等Storage 有配额与同步异步差异
包体HTTP 缓存、拆包主包限制严，分包是日常
CSS灵活选择器与部分特性受限；常用 rpx

uni-app：一套代码多端；用条件编译填坑：

js
// #ifdef MP-WEIXIN
// 微信专有
// #endif

// #ifdef H5
// H5 专有
// #endif

3. 最小实践（对照清单） ​

对着 Journal client 想清楚：

  • [ ] 主包体积从哪冒出来（组件、静态图、一次引入过大库）
  • [ ] 哪些页进分包
  • [ ] H5 有、小程序无的 API（如部分 DOM 测量、浏览器下载）如何降级
  • [ ] navigationStyle: custom 与安全区
  • [ ] 登录：小程序 wx.login vs H5 粘贴 JWT（开发态）差异

记 3 条「双端行为不一致」案例（例如：图片路径、弹层层级、滚动穿透）。

4. 踩坑与取舍 ​

  1. 当浏览器写小程序：依赖 DOM / 任意 npm 包直接炸。
  2. 忽略分包：主包超限才拆，返工痛苦。
  3. 条件编译滥用：业务全是 ifdef，失去跨端意义——抽平台适配层。
  4. 一套 UI 硬凹所有端：平板 / 小程序 / H5 交互可有差异（对照平板适配思路）。

5. 验收清单 ​

  • [ ] 能口述双线程 / 无 DOM 对开发的影响（1 分钟）
  • [ ] 列出本项目 2 个分包或体积相关决策
  • [ ] 写 3 条 H5 vs MP 差异笔记
  • [ ] 知道何时该原生能力、何时降级

6. 下一步 ​

→ 23 · SSR / 同构与水合（决策向）

参考链接 ​