210 lines
5.8 KiB
Markdown
210 lines
5.8 KiB
Markdown
# 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 | 大标题 |
|
||
|
||
---
|
||
|
||
## 🏷️ 类名映射速查
|
||
|
||
### 任务卡片
|
||
```css
|
||
.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; }
|
||
```
|
||
|
||
### 客户标签
|
||
```css
|
||
.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); }
|
||
```
|
||
|
||
### 关系等级
|
||
```css
|
||
.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); }
|
||
```
|
||
|
||
### 助教等级
|
||
```css
|
||
.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 交互 → 数据驱动
|
||
```javascript
|
||
// ❌ H5 写法（禁止）
|
||
document.querySelector('.btn').classList.add('active');
|
||
|
||
// ✅ 小程序写法
|
||
this.setData({ isActive: true });
|
||
```
|
||
|
||
### 模式3：line-height 处理
|
||
```wxml
|
||
<!-- ❌ 错误：直接在 text 上设置 -->
|
||
<text style="line-height: 1.5;">文字</text>
|
||
|
||
<!-- ✅ 正确：在外层 view 上设置 -->
|
||
<view style="line-height: 1.5;">
|
||
<text>文字</text>
|
||
</view>
|
||
```
|
||
|
||
### 模式4：页面跳转
|
||
```javascript
|
||
// ❌ 错误：使用 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
|