H5 到小程序样式检查工具
自动化检查 H5 到小程序迁移过程中的样式差异。
功能
- ✅ 自动提取 H5 中的 Tailwind 类
- ✅ 自动提取小程序中的样式
- ✅ 逐个对比每个属性
- ✅ 检查全局样式（line-height 等）
- ✅ 检查 font-size 和 line-height
- ✅ 检查 padding、margin、gap
- ✅ 检查 width、height
- ✅ 检查 border-radius
- ✅ 生成详细的 Markdown 报告
安装
# 无需安装依赖，使用 Python 3.6+ 即可
python --version # 确保 Python 3.6+
使用方法
基本用法
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）
输出示例
# 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：
TAILWIND_CONFIG = {
'text': {
'text-xs': {'font-size': '12px', 'line-height': '16px'},
# 添加更多...
},
'spacing': {
'p-6': '24px',
# 添加更多...
},
}
调整换算比例
如果目标设备不是 412px，修改 PX_TO_RPX：
# 375px 设备
PX_TO_RPX = 2.0
# 414px 设备
PX_TO_RPX = 1.8116
限制
- 目前只检查类选择器（
.class），不检查标签选择器 - 不检查伪类和伪元素
- 间距类的匹配逻辑需要根据实际情况调整
- 不检查 JavaScript 动态样式
贡献
欢迎提交 Issue 和 Pull Request！
许可
MIT