一、问题(本轮实测)
`draw-ui` 与 `oil-motion` 目录里**各自带一个内嵌 `.git`** ⇒ 上一次提交把它们记成了 **gitlink(子模块指针)**
⇒ 仓库里只存了一个不属于任何远端的 commit id,**别人克隆下来这两份是空的** ✗(`git status` 显示 ` m draw-ui` / ` m oil-motion` = 子模块内容有改动)。
二、处置(可回退)
· 把两处的 `.git` **挪走**(⛔ 不是删除)⇒ `归档/内嵌git-20261008/{draw-ui,oil-motion}.git`;
· `git rm --cached` 掉那两个 gitlink,再 `git add` 两个目录 ⇒ **按正常文件入库**(内容才真的进仓库)。
三、副作用(如实记)
挪走 `.git` 后,这两个技能**不能再原地 `git pull` 取上游更新**(要更新得重新拉一份覆盖);
如需恢复其本地仓库,把 `归档/内嵌git-20261008/` 里的 `.git` 挪回原处即可。
2.7 KiB
2.7 KiB
HTML 与微信小程序实现
沿用已有设计说明,并按 测量与校准 固定参考基线。组件与素材的划分使用主流程;需要裁图、重绘或透明素材时转到 素材流程。
独立 HTML
用语义 HTML、CSS 与必要的 JavaScript 建立页面。采用正常文档流、Grid 或 Flex 组织区块,重复组件共用样式;不要用整图背景或大量任意定位承载正文与操作。完整长页先覆盖所有区块。
交互对应真实用途,覆盖主要操作及其状态。视觉演示没有后端能力时,明确演示边界,不伪造提交成功或可用服务。
微信小程序
直接使用目标项目的文件模型,不先生成 HTML 再机械转换:
| 文件 | 职责 |
|---|---|
*.wxml |
结构、卡片、控件与文字 |
*.wxss |
布局、rpx 尺寸、字体和视觉样式 |
*.ts/*.js |
页面数据、状态与交互 |
${miniprogramRoot}/assets/ |
独立图片素材,沿用项目目录约定 |
优先使用现有组件和图标。简单装饰用 WXSS;复杂插画使用质量足够的独立素材,是否重绘由素材流程判断。
资源路径从配置中的 miniprogramRoot 解析。例如该值为 miniprogram/ 时,文件放在 miniprogram/assets/,WXML 引用:
<image class="hero" src="/assets/hero.png" mode="aspectFit" />
<image class="banner" src="/assets/banner.png" mode="widthFix" />
aspectFit 用于固定容器内完整显示主体;widthFix 用于按宽度保持图片比例。每次只选一个合法 mode,明确容器宽度与页面重排方式。
小程序渲染必须在微信开发者工具或对应真机环境验证,普通浏览器只能验证 HTML 原型。自动化能力可使用 miniprogram-automator;固定设备预设、页面视口与 DPR,截图仅取与参考一致的页面区域,排除状态栏、胶囊和工具栏。像素对比走校准文档的非 DOM 分支,交互仍在小程序内实际操作;模拟器与真机结果分开记录。
排版实现要点
| 项目 | 实现时关注 |
|---|---|
| 字体 | 标题、正文、导航分别匹配家族和字重;使用实际可用字体并配置 fallback,近似字体注明差异 |
| 文本块 | 同时调整字号、行高、容器宽度和换行;必要时按词组拆分,不只匹配单行高度 |
| 细字与颜色 | 对照字距、文字灰度、按钮居中;不以模糊阴影模拟生成字形噪声 |
| 图片与装饰 | 明确容器比例、主体位置与窄屏裁切;斜边等装饰不改变正文的布局基准 |
校准次序、采集命令与验收项目以校准文档为准。实现文件只记录本项目取舍,不另建同义检查表。