5.8 KiB
5.8 KiB
H5→MP 迁移快速参考
用途：AI 代码生成时的快速查阅手册
更新：2026-03-17
范围：单位换算、颜色映射、类名对应、常见模式
📌 核心决策
| 项目 | 规则 |
|---|---|
| 框架 | 微信原生小程序（WXML + WXSS + JS） |
| 单位 | rpx 为主（布局、间距），px 为辅（发丝线、阴影） |
| 交互 | 数据驱动（禁用 DOM API） |
| 验收宽度 | 412 CSS px |
| 能力分级 | A类直迁、B类条件迁、C类禁迁 |
🎨 颜色映射速查
任务分类
| 类型 | 颜色 | 渐变 |
|---|---|---|
| 高优先召回 | #dc2626 | #b91c1c → #dc2626 |
| 优先召回 | #f97316 | #ea580c → #f97316 |
| 客户回访 | #14b8a6 | #0d9488 → #14b8a6 |
| 关系构建 | #f472b6 | #ec4899 → #f472b6 |
客户标签
| 标签 | 字体色 | 背景色 |
|---|---|---|
| 客户基础 | #0052d9 | #ecf2fe |
| 消费习惯 | #00a870 | #e6f7f0 |
| 玩法偏好 | #ed7b2f | #fff3e6 |
| 促销偏好 | #d4a017 | #fffbeb |
| 社交关系 | #764ba2 | #f3e8ff |
| 重要反馈 | #e34d59 | #ffe6e8 |
关系等级
| 等级 | 渐变 | 分数 |
|---|---|---|
| 很好 | #e91e63 → #f472b6 | > 8.5 |
| 良好 | #ea580c → #fb923c | 6-8.5 |
| 一般 | #eab308 → #fbbf24 | 3.5-6 |
| 待发展 | #64748b → #94a3b8 | < 3.5 |
AI 图标配色
| 配色 | 主色 | 浅色 | 深色 |
|---|---|---|---|
| Red | #e74c3c | #f39c9c | #c0392b |
| Orange | #e67e22 | #f5c77e | #ca6c17 |
| Yellow | #d4a017 | #f7dc6f | #b8860b |
| Blue | #2980b9 | #7ec8e3 | #1a5276 |
| Indigo | #667eea | #a78bfa | #4a5fc7 |
| Purple | #764ba2 | #c084fc | #5b3080 |
📏 单位换算速查
公式
rpx = px × 1.8204
px = rpx ÷ 1.8204
常用换算
| px | rpx | 用途 |
|---|---|---|
| 4 | 7 | 发丝线、极小间距 |
| 8 | 15 | 小间距 |
| 12 | 22 | 标签、小组件 |
| 16 | 29 | 标准间距 |
| 24 | 44 | 卡片间距 |
| 32 | 58 | 大间距 |
| 48 | 87 | 区块间距 |
字号换算
| px | rpx | 用途 |
|---|---|---|
| 12 | 22 | 辅助文字 |
| 14 | 26 | 小文字 |
| 16 | 29 | 正文 |
| 18 | 33 | 标题 |
| 20 | 36 | 大标题 |
🏷️ 类名映射速查
任务卡片
.task-card--high_priority { border-left-color: #dc2626; }
.task-card--priority_recall { border-left-color: #f97316; }
.task-card--callback { border-left-color: #14b8a6; }
.task-card--relationship { border-left-color: #f472b6; }
.task-card--pinned { box-shadow: 0 5rpx 7rpx rgba(245,158,11,0.12), 0 0 0 8rpx rgba(245,158,11,0.08); }
.task-card--abandoned { border-left-color: #d1d5db; opacity: 0.55; }
客户标签
.clue-tag-primary { color: #0052d9; background: rgba(0,82,217,0.1); }
.clue-tag-success { color: #00a870; background: rgba(0,168,112,0.1); }
.clue-tag-orange { color: #ed7b2f; background: rgba(237,123,47,0.1); }
.clue-tag-gold { color: #d4a017; background: rgba(212,160,23,0.1); }
.clue-tag-purple { color: #764ba2; background: rgba(118,75,162,0.1); }
.clue-tag-error { color: #e34d59; background: rgba(227,77,89,0.1); }
关系等级
.rel-level-excellent { background: linear-gradient(135deg, #e91e63, #f472b6); }
.rel-level-good { background: linear-gradient(135deg, #ea580c, #fb923c); }
.rel-level-normal { background: linear-gradient(135deg, #eab308, #fbbf24); }
.rel-level-poor { background: linear-gradient(135deg, #64748b, #94a3b8); }
助教等级
.coach-level-junior { color: #0052d9; background: #ecf2fe; }
.coach-level-middle { color: #ed7b2f; background: #fff3e6; }
.coach-level-senior { color: #e91e63; background: #ffe6e8; }
.coach-level-star { color: #fbbf24; background: #fffef0; }
🔄 常见迁移模式
模式1：Tailwind → WXSS
Tailwind: class="flex items-center gap-2 p-4"
WXSS: display: flex; align-items: center; gap: 15rpx; padding: 29rpx;
模式2：DOM 交互 → 数据驱动
// ❌ H5 写法（禁止）
document.querySelector('.btn').classList.add('active');
// ✅ 小程序写法
this.setData({ isActive: true });
模式3：line-height 处理
<!-- ❌ 错误：直接在 text 上设置 -->
<text style="line-height: 1.5;">文字</text>
<!-- ✅ 正确：在外层 view 上设置 -->
<view style="line-height: 1.5;">
<text>文字</text>
</view>
模式4：页面跳转
// ❌ 错误：使用 history
history.push('/pages/detail');
// ✅ 正确：使用 wx.navigateTo
wx.navigateTo({ url: '/pages/detail/detail' });
// ✅ TabBar 页面用 switchTab
wx.switchTab({ url: '/pages/task-list/task-list' });
⚠️ 能力分级
A 类（可直迁）
- flex、grid（基础）、position（relative/absolute）
- transition、animation
- border、box-shadow、border-radius
- opacity、transform
B 类（条件迁）
- position: sticky → 用 scroll-view 的 sticky-section
- grid（复杂布局）→ 改为 flex
- backdrop-filter → 用半透明背景替代
- CSS 变量 → 改为 WXSS 变量或 JS 常量
C 类（禁迁）
- document.、window.、localStorage
- DOM 操作（classList、innerHTML、appendChild）
- 浏览器事件（resize、scroll 等）
- 第三方 JS 库（jQuery、lodash 等）
📖 详细文档位置
| 需求 | 查阅文档 |
|---|---|
| 完整迁移规范 | h5-migration/h5-to-mp-bridge.md |
| Spacing 详细字典 | h5-migration/appendix/spacing-dictionary.md |
| 字体/排版详细字典 | h5-migration/appendix/typography-dictionary.md |
| 颜色详细字典 | h5-migration/appendix/color-dictionary.md |
| 布局类详细字典 | h5-migration/appendix/layout-dictionary.md |
| VI 设计系统完整版 | design-system/VI-DESIGN-SYSTEM.md |
| VI 可视化指南 | design-system/vi-guide.html |
版本：1.0 | 最后更新：2026-03-17