更新小程序开发文档,新增2026-03-03的最佳实践记录,优化个人中心类页面的卡片区边距规范,确保一致性与可用性。调整相关页面以反映最新设计稿,提升用户体验与功能一致性。

This commit is contained in:
Alex-larget
2026-03-04 19:06:06 +08:00
parent 7064f82126
commit 5a5f0087d2
66 changed files with 2555 additions and 1059 deletions

View File

@@ -0,0 +1,27 @@
# 2026-03-03 经验
## 我的页面卡片区边距优化
### 问题/场景
用户反馈「我的」页面的卡片区域左右边距过大,内容区在水平方向上显得较窄,未充分利用屏幕横向空间。
### 解决方案
将卡片区域及上下关联区块的左右边距统一缩小:
| 区块 | 修改前 | 修改后 |
|------|--------|--------|
| `.main-content` | 32rpx | 16rpx |
| `.header-block` | 40rpx | 16rpx |
| `.guest-block` | 48rpx | 16rpx |
| `.card` padding | 40rpx | 32rpx |
| `.card` margin-bottom | 32rpx | 24rpx |
### 提炼规则
个人中心、设置类页面(如「我的」)的卡片区左右边距宜紧凑,**推荐 16rpx**;卡片内边距 32rpx、卡片间距 24rpx以充分利用横向空间。
### 适用
- `miniprogram/pages/my/` 及类似个人中心、设置页

View File

@@ -3,3 +3,4 @@
| 日期 | 摘要 | 文件 |
|------|------|------|
| 2026-02-28 | input 边距口诀、match 资源对接弹窗修正 | [2026-02-28.md](./2026-02-28.md) |
| 2026-03-03 | 我的页面卡片区边距优化16rpx 推荐值 | [2026-03-03.md](./2026-03-03.md) |

View File

@@ -24,6 +24,7 @@
|------|------|------|------------|------|
| 2026-02-27 | 小程序、团队 | 最佳实践 | SKILL-小程序开发 §6、SKILL-管理端开发 §4.1 | 输入框 padding 用 view/div 包裹 |
| 2026-02-28 | 小程序、管理端 | 最佳实践 | miniprogram §6、admin §4.1 | input 边距口诀「外边包 view、内部 width 100%」match 弹窗已修正 |
| 2026-03-03 | 小程序 | 最佳实践 | miniprogram §8 | 我的页面卡片区边距 16rpx个人中心类页面布局规范 |
---
@@ -34,4 +35,4 @@
---
**最后更新**2026-02-28
**最后更新**2026-03-03

View File

@@ -20,9 +20,10 @@
| 2026-02-27 | 吸收经验:输入框 padding 用 view 包裹,已升级 SKILL-小程序开发 §6 | 已完成 |
| 2026-02-28 | stitch_soul 需求评审:首页/目录/导师/会员/资料五类页面,待需求与接口确定后分阶段实现 | 待续 |
| 2026-02-28 | 吸收经验input 边距口诀「外边包 view、内部 width 100%」写入 Skill §6match 资源对接弹窗已按规范修正 | 已完成 |
| 2026-03-03 | 吸收经验我的页面卡片区边距优化16rpx 为个人中心类页面推荐值,已升级 SKILL §8 | 已完成 |
> **格式说明**:每次开发后在此追加一行,日期格式 YYYY-MM-DD状态用已完成 / 进行中 / 待续 / 搁置
---
**最后更新**2026-02-28
**最后更新**2026-03-03