1

tools/h5-to-mp-checker/README.md

@@ -0,0 +1,156 @@
+# 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