157 lines
2.9 KiB
Markdown
157 lines
2.9 KiB
Markdown
# H5 到小程序样式检查工具
|
||
|
||
自动化检查 H5 到小程序迁移过程中的样式差异。
|
||
|
||
## 功能
|
||
|
||
- ✅ 自动提取 H5 中的 Tailwind 类
|
||
- ✅ 自动提取小程序中的样式
|
||
- ✅ 逐个对比每个属性
|
||
- ✅ 检查全局样式（line-height 等）
|
||
- ✅ 检查 font-size 和 line-height
|
||
- ✅ 检查 padding、margin、gap
|
||
- ✅ 检查 width、height
|
||
- ✅ 检查 border-radius
|
||
- ✅ 生成详细的 Markdown 报告
|
||
|
||
## 安装
|
||
|
||
```bash
|
||
# 无需安装依赖，使用 Python 3.6+ 即可
|
||
python --version # 确保 Python 3.6+
|
||
```
|
||
|
||
## 使用方法
|
||
|
||
### 基本用法
|
||
|
||
```bash
|
||
python scripts/check_h5_to_mp.py \
|
||
--h5 docs/h5_ui/pages/board-customer.html \
|
||
--wxss apps/miniprogram/miniprogram/pages/board-customer/board-customer.wxss \
|
||
--output report.md
|
||
```
|
||
|
||
### 参数说明
|
||
|
||
- `--h5`：H5 HTML 文件路径（必需）
|
||
- `--wxss`：小程序 WXSS 文件路径（必需）
|
||
- `--output`：输出报告路径（可选，默认 `report.md`）
|
||
|
||
## 输出示例
|
||
|
||
```markdown
|
||
# H5 到小程序样式对比报告
|
||
|
||
## 📊 问题统计
|
||
|
||
- ❌ 严重问题：5 个
|
||
- ⚠️ 警告：7 个
|
||
- ℹ️ 提示：3 个
|
||
- **总计**：15 个
|
||
|
||
## ❌ 严重问题
|
||
|
||
### ❌ 严重 page - line-height
|
||
|
||
- **位置**：page 全局样式
|
||
- **H5 值**：无全局设置
|
||
- **应该是**：无
|
||
- **实际是**：1.5
|
||
- **差异**：100.0%
|
||
|
||
### ❌ 严重 text-xs - line-height
|
||
|
||
- **位置**：.assistant-label
|
||
- **H5 值**：16px
|
||
- **应该是**：29rpx
|
||
- **实际是**：缺失
|
||
- **差异**：100.0%
|
||
```
|
||
|
||
## 检查项目
|
||
|
||
### 1. 全局样式
|
||
|
||
- [ ] page 的 line-height
|
||
- [ ] view 的 line-height
|
||
- [ ] 全局 font-size
|
||
- [ ] 全局 padding/margin
|
||
|
||
### 2. 文本类（text-xxx）
|
||
|
||
对每个 text-xxx 类：
|
||
- [ ] font-size
|
||
- [ ] line-height（必须检查）
|
||
|
||
### 3. 间距类（p-, m-, gap-）
|
||
|
||
对每个间距类：
|
||
- [ ] padding
|
||
- [ ] margin
|
||
- [ ] gap
|
||
|
||
### 4. 尺寸类（w-, h-）
|
||
|
||
对每个尺寸类：
|
||
- [ ] width
|
||
- [ ] height
|
||
|
||
### 5. 圆角类（rounded-）
|
||
|
||
对每个圆角类：
|
||
- [ ] border-radius
|
||
|
||
## 问题级别
|
||
|
||
- ❌ **严重**：差异 > 20%
|
||
- ⚠️ **警告**：差异 10-20%
|
||
- ℹ️ **提示**：差异 < 10%
|
||
- ✅ **正确**：差异 < 2%
|
||
|
||
## 扩展
|
||
|
||
### 添加自定义 Tailwind 配置
|
||
|
||
编辑 `check_h5_to_mp.py` 中的 `TAILWIND_CONFIG`：
|
||
|
||
```python
|
||
TAILWIND_CONFIG = {
|
||
'text': {
|
||
'text-xs': {'font-size': '12px', 'line-height': '16px'},
|
||
# 添加更多...
|
||
},
|
||
'spacing': {
|
||
'p-6': '24px',
|
||
# 添加更多...
|
||
},
|
||
}
|
||
```
|
||
|
||
### 调整换算比例
|
||
|
||
如果目标设备不是 412px，修改 `PX_TO_RPX`：
|
||
|
||
```python
|
||
# 375px 设备
|
||
PX_TO_RPX = 2.0
|
||
|
||
# 414px 设备
|
||
PX_TO_RPX = 1.8116
|
||
```
|
||
|
||
## 限制
|
||
|
||
1. 目前只检查类选择器（`.class`），不检查标签选择器
|
||
2. 不检查伪类和伪元素
|
||
3. 间距类的匹配逻辑需要根据实际情况调整
|
||
4. 不检查 JavaScript 动态样式
|
||
|
||
## 贡献
|
||
|
||
欢迎提交 Issue 和 Pull Request！
|
||
|
||
## 许可
|
||
|
||
MIT
|