Files

T

zhangxiang 810081ac0a feat: 小程序端 UI 优化与纯客户端化改造

- 移除微信订阅推送功能（云函数/订阅管理页），回归纯客户端零后端架构
- 新增今日黄历默认展示卡片 TodayAlmanacCard（9 语言翻译）
- i18n 修复：启用 globalInjection 修复 $t 未注入，插值消息全部改为
  Messages Functions 适配小程序端（63 处）
- 修复底部导航切换失效与运势页数据不刷新
- 统一设计令牌（深褐主色 + 印红强调色），组件 UI 规范重构
- 图标 iconfont 化（FontAwesome 子集化，修复 Android 豆腐块）
- 新增 postcss-px2rpx 机型自适应（仅 mp-weixin 构建生效）
- 新增 5 个用户旅程 E2E 测试（31 用例）与验收报告
- 补充微信小程序项目配置（appid）

2026-08-28 07:51:02 +08:00

4.2 KiB

Raw Permalink Blame History

小程序 UI 层级用户旅程验收报告

验收时间: 2026-08-19
验收对象: 微信小程序构建产物 dist/build/mp-weixin（万事宜 v1.0.0）
验收方式: UI 层级（视觉/结构）+ 用户旅程自动化 + 静态审计
验收结论: ✅ 通过（发现并修复 1 个 P1 UI 缺陷）

一、验收范围

针对微信小程序最终交付物进行 UI 层级（视觉、布局、组件、导航）的用户旅程验收，覆盖 4 个页面：

页面	用户旅程要点
黄历搜索（首页）	今日黄历默认展示、模板搜索、搜索条件面板、宜忌展示、底部导航
紫微排盘	出生信息表单、日期/时辰选择、排盘结果、底部导航
运势分析	排盘数据读取、日运/月运切换、订阅入口、底部导航
订阅管理	订阅状态、推送时间设置、独立页面

二、小程序构建产物静态 UI 审计

工具：ui-audit-mp-weixin.mjs

审计维度	结果
页面结构（wxml 根元素/区块/组件引用）	✅ 通过
样式（wxss 完整性）	✅ 通过
页面配置（json 导航栏/组件）	✅ 通过
app.json（pages/tabBar/window）	✅ 通过
组件引用完整性（14 个组件目录）	✅ 通过
通过项	25 项，0 问题

三、UI 视觉验收（渲染截图）

工具：ui-screenshots.mjs 渲染环境：uni-app H5（与小程序共享同一套源码与 SCSS 样式），390×844 移动视口。

页面	元素检查	截图
黄历搜索	9/9 ✅（今日黄历/宜/忌/搜索模板/搜索条件/底部导航）	01-almanac-search.png
紫微排盘	4/4 ✅（标题/出生信息/排盘/底部导航）	02-ziwei.png
运势分析	2/2 ✅（标题/底部导航）	03-fortune.png
订阅管理	1/1 ✅（订阅内容，独立页无底部导航=设计预期）	04-push-subscription.png

视觉验收发现并修复 1 个 P1 UI 缺陷：

紫微排盘页、运势分析页缺失底部导航组件 三个 tab 页（黄历/排盘/运势）中仅黄历页有 BottomNavigation。用户从黄历页通过底部导航切换到排盘/运势页后，无法再通过底部导航切换（进入"死胡同"）。

根因：pages/ziwei/index.vue、pages/fortune/index.vue 模板中未放置 <BottomNavigation> 组件

修复：两个页面已添加 <BottomNavigation currentTab="ziwei/fortune" />

回归防护：navigation-journey.spec.ts 新增目标页底部导航断言（STEP 2/3）

四、用户旅程自动化测试

旅程	用例	结果
J-ZIWEI 紫微排盘	7	✅
J-ALMANAC 黄历搜索	6	✅
J-FORTUNE 运势分析	6	✅
J-SUBSCRIBE 订阅管理	6	✅
J-NAV 跨页导航	6	✅
合计	31	31/31 通过

补充：单元测试 696/696 通过（含 i18n 配置/插值防回归测试）。

五、验证方式说明（诚实声明）

自动化部分：静态 UI 审计在小程序构建产物（wxml/wxss/json）上执行；UI 视觉渲染截图在 H5 端执行（uni-app 同源码同样式，视觉与小程序一致）
限制：微信开发者工具 UI 自动化（miniprogram-automator）因 macOS 环境权限（CLI EPERM 无法写入工具配置目录）与自动化服务会话不匹配，未能实现小程序端自动化截图
建议最终确认：在微信开发者工具/真机走查 4 页 UI 视觉（底部导航高亮、今日黄历卡片、排盘表单），Automator 连接恢复后可补充小程序端自动化截图

六、结论

小程序 UI 层级用户旅程验收通过。4 页面 UI 结构完整、视觉渲染正常、底部导航三页齐全、31 条用户旅程全部通过、静态 UI 审计 0 问题。发现并修复 1 个 P1 UI 缺陷（排盘/运势页缺底部导航）。

4.2 KiB Raw Permalink Blame History Unescape Escape