adminzy/ai-c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
ff4c7b7e09
ai-c/前端样式修复经验.md
zhiyun ff4c7b7e09 feat: 更新小程序代码 - 2026-02-02
2026-02-02 18:21:32 +08:00

4.9 KiB
Raw Blame History

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

本文整理了在本项目里做“像素级对齐 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：
.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 规范文档与组件模板。