114 lines
4.9 KiB
Markdown
114 lines
4.9 KiB
Markdown
# 前端样式修复经验（小程序为主）
|
||
|
||
本文整理了在本项目里做“像素级对齐 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 规范文档与组件模板。
|
||
|