fix(miniapp): 修复底部 tabBar 图标全部消失(开发者工具误删 app.json 专属图标)
根因:微信开发者工具(>=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 一致。
This commit is contained in:
@@ -4,6 +4,20 @@
|
||||
|
||||
为小程序 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`。
|
||||
|
||||
|
||||
## 设计规范
|
||||
|
||||
| 属性 | 规范值 |
|
||||
|
||||
Reference in New Issue
Block a user