WorkBuddy
45e84722e1
根因：微信开发者工具（>=1.05.2112301）的 ignoreDevUnusedFiles 会按 WXML/JS 依赖分析过滤 "无依赖"文件。tabBar 图标仅在 app.json 中声明，不属于任何页面 WXML/JS 依赖，被误判为无用 文件从开发包剥离，导致 5 个图标全部加载失败（渲染为破图占位）。 修复： - 在 project.config.json 与 miniapp/project.config.json 的 setting 中显式关闭 ignoreDevUnusedFiles / ignoreUploadUnusedFiles（false），阻止图标被过滤。 - 同步关闭本地 gitignore 的 project.private.config.json（DevTools 运行时实际读取项）。 - 预览通道 scripts/preview-miniapp.mjs：补全 /assets 绝对路径→相对路径重写，并手动复刻 原生 tabBar（原生 tabBar 不在任何页面 WXML 中，静态预览需自行复刻）。 - 回归守卫 ui-tests/tabbar-icons.mjs 扩充为 5 段，覆盖根因（配置开关）+ 预览复刻。 - miniapp/assets/tabbar/DESIGN.md 增加根因警示，防止后续被误开开关。 验证：UI 契约 23/23 全绿（tabbar-icons.mjs 位于 [19/23]）；CDP 渲染实测 127 张图 0 破图， 5 个 tabBar 图标 naturalW=81 全部加载，选中色 rgb(233,107,107)、未选 rgb(153,153,153)， 与 app.json selectedColor/color 一致。
4.9 KiB
4.9 KiB
丹阳公益婚恋平台 - 底部导航栏图标设计规范
概述
为小程序 5 个底部导航 Tab 设计的圆润线性风格图标，包含未选中（灰色）和选中（玫瑰红）两种状态，适配三种屏幕密度（1x/2x/3x）。
⚠️ 改动本目录前必读 —— 图标整排变「破图」的头号原因
微信开发者工具自
1.05.2112301起默认开启**「过滤无依赖文件」（ignoreDevUnusedFiles）。 它的依赖分析只看 WXML/JS，而 tabBar 图标只在app.json里被引用， 于是被判定为「无依赖文件」并从开发包中剔除** → 模拟器/真机上 5 个图标全部加载失败， 表现为底部导航整排破图（而 WXML 引用的图片一切正常，极易误判为图片损坏）。本目录的
assets/tabbar/*.png是全仓库唯一「只被 app.json 引用」的图片资源，因此是唯一受害者。处置：
project.config.json（仓库根 +miniapp/）与本地project.private.config.json中setting.ignoreDevUnusedFiles/setting.ignoreUploadUnusedFiles必须为false。 已由守卫ui-tests/tabbar-icons.mjs强制校验，请勿改回true。
设计规范
| 属性 | 规范值 |
|---|---|
| 图标尺寸 | 81 × 81 px (基础) |
| 安全区域 | 53 × 53 px（最小边距 14px） |
| 线宽 | 4px（缩放到导航栏后约 1.3px） |
| 圆角 | 端点圆角 + 转折圆角 |
| 填充 | 默认态线性；选中态填充核心爱心 |
颜色规范
| 状态 | 颜色值 | 用途 |
|---|---|---|
| 未选中 | #999999 |
默认状态图标 |
| 选中 | #E96B6B |
激活状态图标 |
| 背景 | #FFFFFF |
透明背景（PNG 支持 alpha） |
图标清单
1. 首页 (home)
- 意象: 爱心小屋
- 元素: 圆角屋顶 + 房屋主体 + 门内爱心
- 文件:
home.png/home-active.png
2. 找对象 (discover)
- 意象: 双人缘分
- 元素: 两个人物轮廓 + 中央爱心
- 文件:
discover.png/discover-active.png
3. 消息 (message)
- 意象: 真诚沟通
- 元素: 圆角气泡 + 爱心
- 文件:
message.png/message-active.png
4. 活动 (activity)
- 意象: 公益相遇
- 元素: 日历主体 + 挂环 + 爱心
- 文件:
activity.png/activity-active.png
5. 我的 (mine)
- 意象: 个人守护
- 元素: 单人轮廓 + 胸前爱心
- 文件:
mine.png/mine-active.png
导出尺寸
| 尺寸 | 像素 | 适用场景 |
|---|---|---|
| 1x | 81 × 81 | 标准屏设备 |
| 2x | 162 × 162 | Retina 屏设备 |
| 3x | 243 × 243 | 超高清晰屏设备 |
文件名约定：{icon-name}.png / {icon-name}-active.png / {icon-name}_2x.png / {icon-name}_3x.png
SVG 源文件
所有图标均提供可编辑的 SVG 版本，位于 svg/ 目录：
- 可直接在 Figma 中导入编辑
- 可调整颜色、粗细、圆角等参数
- 颜色替换：将
stroke="#999999"改为stroke="#E96B6B"即可切换激活状态
文件位置
miniapp/assets/tabbar/
├── svg/ # SVG 源文件（可编辑）
│ ├── home.svg / home-active.svg
│ ├── discover.svg / discover-active.svg
│ ├── message.svg / message-active.svg
│ ├── activity.svg / activity-active.svg
│ └── mine.svg / mine-active.svg
├── home.png / home-active.png
├── home_2x.png / home-active_2x.png
├── home_3x.png / home-active_3x.png
├── discover.png / discover-active.png
├── discover_2x.png / discover-active_2x.png
├── discover_3x.png / discover-active_3x.png
├── message.png / message-active.png
├── message_2x.png / message-active_2x.png
├── message_3x.png / message-active_3x.png
├── activity.png / activity-active.png
├── activity_2x.png / activity-active_2x.png
├── activity_3x.png / activity-active_3x.png
├── mine.png / mine-active.png
├── mine_2x.png / mine-active_2x.png
└── mine_3x.png / mine-active_3x.png
更新说明
小程序 TabBar 配置无需修改，文件名与原有配置保持一致。
原配置 (app.json)：
{
"tabBar": {
"list": [
{ "pagePath": "pages/index/index", "iconPath": "assets/tabbar/home.png", "selectedIconPath": "assets/tabbar/home-active.png" },
{ "pagePath": "pages/discover/discover", "iconPath": "assets/tabbar/discover.png", "selectedIconPath": "assets/tabbar/discover-active.png" },
{ "pagePath": "pages/messages/messages", "iconPath": "assets/tabbar/message.png", "selectedIconPath": "assets/tabbar/message-active.png" },
{ "pagePath": "pages/activity/activity", "iconPath": "assets/tabbar/activity.png", "selectedIconPath": "assets/tabbar/activity-active.png" },
{ "pagePath": "pages/mine/mine", "iconPath": "assets/tabbar/mine.png", "selectedIconPath": "assets/tabbar/mine-active.png" }
]
}
}