# 前端样式修复经验（小程序为主）

本文整理了在本项目里做“像素级对齐 Figma”时，高频踩坑与可复用修复策略，重点覆盖微信小程序（WXML/WXSS）场景。

## 1. 先判断：是样式问题还是“没生效”

很多“样式不对”的根因不是写错了，而是没有加载到新代码：

- **确认正在编辑的就是运行中的项目目录**：开发者工具「详情」里的项目路径必须指向当前仓库的 `miniprogram` 目录。
- **清缓存再编译**：开发者工具经常缓存 WXSS，建议「清缓存（全部）」+ 重新编译。
- **确认页面路径一致**：例如 `pages/cooperation/cooperation` 与 `pages/profile/cooperation/cooperation` 可能并存，确保你改的是当前路由实际打开的页面。

## 2. 小程序的“宽度为什么只居中一小块”

在小程序里，`button` + `scroll-view` + `flex` 的组合经常出现“看起来只占中间一小块”的情况。

**典型症状**
- 卡片明明写了 `width: 100%`，但实际渲染仍像居中固定宽度。
- 文本被挤到很窄，标题变成 `休...` 或出现逐字竖排。

**常见原因**
- 父容器未明确 `width: 100%`，或 `scroll-view` 的布局约束导致子项无法 stretch。
- `button` 在某些布局里会表现为“内容宽度”，需要额外强制伸展。
- 文本容器缺少 `min-width: 0`，导致 flex 收缩异常。

**可复用的修复模板**
- 父级容器明确宽度：
  - `scroll-view`：`width: 100%`
  - 外层容器：`width: 100%`
- 列表容器强制 stretch：
  - `display: flex; flex-direction: column; align-items: stretch; width: 100%;`
- 按钮强制占满：
  - `width: 100%; min-width: 100%; align-self: stretch; box-sizing: border-box;`
- 文本区域允许正确收缩：
  - `min-width: 0;`

## 3. 文本“逐字竖排/奇怪换行”的处理

**典型症状**
- 标题被拆成一列：`休 / 闲 / 娱 / 乐`
- 或者标题过早省略/换行，不符合设计稿

**处理策略**
- 让标题与副标题稳定单行：
  - `display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`
- 对于 flex 子项的文本容器，必须补：
  - `min-width: 0;`

## 4. scroll-view 下“底部被遮挡/露出不完整”

**典型症状**
- 最底部按钮/卡片被 tabBar、底部安全区、或页面 padding 覆盖。
- 看起来像是“卡片被裁掉一截”。

**根因**
- `.safe-bottom` 加在 page 上不等于加在 `scroll-view` 的可滚动内容上。
- `scroll-view` 本身高度固定，但内容缺少足够的 `padding-bottom`。

**推荐修复**
- 直接给 `scroll-view` 增加安全区 padding：

```css
.content {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 48rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 48rpx);
}
```

并给最后一个卡片额外 `margin-bottom`，确保视觉呼吸感与可点击区域安全。

## 5. gap 兼容性：能不用就不用

WXSS 对 `gap`（尤其是 `flex-gap`）在不同基础库/机型上可能出现不一致（或表现和浏览器不同）。

**建议**
- 列表纵向间距优先用：
  - `.item + .item { margin-top: 32rpx; }`
- 行内间距用 margin（例如 `icon` 与文本之间 `margin-right`）。

## 6. button 默认样式与点击态

小程序 `button` 默认会带：
- 内边距/圆角/背景
- `::after` 的边框
- 不同平台的点击态

**建议**
- 统一使用 `.btn-reset`（项目已有全局定义）清除默认干扰：
  - `padding:0; margin:0; background:transparent;`
  - `.btn-reset::after { border:none; }`

## 7. 像素级对齐的工作流（推荐）

1. **先拿到 Figma 的“明确数值”**：宽高、圆角、阴影、字体、行高、padding/gap。
2. **结构先对齐，再对齐视觉**：先搭 WXML 的盒子结构，保证布局稳定，再上阴影/渐变/图标。
3. **把关键 UI 组件 token 化**：比如统一 `cardRadius/btnHeight/shadow`，避免每个页面都手写一套。
4. **最小化依赖**：图标/插画尽量用导出的资源或现有 icon 组件，减少渲染差异。
5. **用“对照图”验收**：左侧 Figma，右侧真机预览；优先修复影响布局的约束（宽度/对齐/滚动）。

## 8. 本项目中一次典型问题复盘（合作入驻页）

**问题 1：入口卡片居中变窄**
- 原因：按钮在 scroll-view + flex 下未伸展 + 文本容器可用宽度被压缩。
- 修复：父容器/列表容器/按钮三层都强制 `width:100%`，并给文本容器补 `min-width:0`。

**问题 2：底部“我的订单”卡片露出不完整**
- 原因：`scroll-view` 缺少安全区 padding-bottom。
- 修复：给 `scroll-view.content` 增加 `padding-bottom: calc(env(safe-area-inset-bottom)+48rpx)`，并给最后卡片加 `margin-bottom`。

---

如果你希望把这套经验进一步沉淀成“组件级规范”（卡片/列表项/按钮/导航栏 token + 通用 mixin），我也可以基于当前项目结构继续抽象一套可复用的 UI 规范文档与组件模板。

