Web 原型转微信小程序

Web 原型转小程序时，最常见的问题不是组件不会写，而是把浏览器里的 index.html 习惯直接搬过来：多个 screen 用一个页面加本地状态模拟，Web Header / BottomNav 被复制到每个页面，底部导航塞进 WXML，wx.navigateTo 去打开 tabBar 页面。这些做法在微信生态里会产生错误的页面栈、导航层级和适配问题。

核心约束

该技能的核心不是解释基础 WXML、WXSS、TypeScript，而是先约束架构：

• 页面必须对应真实 route，不能用单页状态机伪造多页面。
• app.json 优先设计 pages、window、tabBar。
• 原生导航栏、底部主导航、安全区、跳转 API 按小程序平台规则处理。

工作流程

1. 识别输入：HTML、React、Vue、静态截图或已有 Web App。
2. 将 screen/route 映射为 miniprogram/pages/** 下的独立页面目录。
3. 页面标题默认写入页面 .json，而不是在每个页面重复实现假 Header。
4. 底部主导航必须放进 app.json tabBar，Tab 图标使用本地文件。
5. 页面间跳转使用正确的 wx.navigateTo、wx.switchTab 等 API；打开 tabBar 不使用 navigateTo，传参不使用 switchTab 的 query，改用 storage 或小型本地 store。
6. 为 tab 页面和固定底部操作栏补足安全区 padding，避免遮挡原生 tabBar 或内容。
7. 生成本地 mock 数据；除非用户明确要求，不假设后端存在。
8. 完成后运行 TypeScript/build 检查，并尽量通过微信开发者工具验证导航与 UI 交互。

注意点

• 本技能适合将已有 Web 原型迁移成微信小程序结构。
• 不负责通用前端教学；如果当前代码库只是需要解释基础语法，不建议展开。
• 远程 tab 图标、手写 BottomNav、假顶部导航都属于明确禁止的反模式。