105 lines
2.4 KiB
Markdown
105 lines
2.4 KiB
Markdown
# 使用示例
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
# 从项目根目录运行
|
||
cd c:\NeoZQYY
|
||
|
||
# 检查 board-customer 页面
|
||
python tools\h5-to-mp-checker\check_h5_to_mp.py ^
|
||
--h5 docs\h5_ui\pages\board-customer.html ^
|
||
--wxss apps\miniprogram\miniprogram\pages\board-customer\board-customer.wxss ^
|
||
--output docs\miniprogram-dev\board-customer-reports\auto-check-report.md
|
||
```
|
||
|
||
## 输出示例
|
||
|
||
运行后会生成类似这样的报告：
|
||
|
||
```markdown
|
||
# H5 到小程序样式对比报告
|
||
|
||
> 生成时间：2026-03-14 07:36:00
|
||
|
||
## 📊 问题统计
|
||
|
||
- ❌ 严重问题：2 个
|
||
- ⚠️ 警告：3 个
|
||
- ℹ️ 提示：1 个
|
||
- **总计**：6 个
|
||
|
||
## ❌ 严重问题（2 个）
|
||
|
||
### ❌ 严重 page - line-height
|
||
|
||
- **位置**：page 全局样式
|
||
- **H5 值**：无全局设置
|
||
- **应该是**：无
|
||
- **实际是**：1.5
|
||
- **差异**：100.0%
|
||
|
||
### ❌ 严重 text-xs - line-height
|
||
|
||
- **位置**：.assistant-label
|
||
- **H5 值**：16px
|
||
- **应该是**：29rpx
|
||
- **实际是**：缺失
|
||
- **差异**：100.0%
|
||
```
|
||
|
||
## 集成到开发流程
|
||
|
||
### 1. 提交前检查
|
||
|
||
```bash
|
||
# 添加到 pre-commit hook
|
||
python tools\h5-to-mp-checker\check_h5_to_mp.py --h5 ... --wxss ... --output report.md
|
||
if [ $? -ne 0 ]; then
|
||
echo "样式检查失败，请修复后再提交"
|
||
exit 1
|
||
fi
|
||
```
|
||
|
||
### 2. CI/CD 集成
|
||
|
||
```yaml
|
||
# .github/workflows/check-styles.yml
|
||
name: Check Styles
|
||
on: [push, pull_request]
|
||
jobs:
|
||
check:
|
||
runs-on: ubuntu-latest
|
||
steps:
|
||
- uses: actions/checkout@v2
|
||
- name: Check styles
|
||
run: |
|
||
python tools/h5-to-mp-checker/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
|
||
- name: Upload report
|
||
uses: actions/upload-artifact@v2
|
||
with:
|
||
name: style-check-report
|
||
path: report.md
|
||
```
|
||
|
||
## 更多页面
|
||
|
||
检查其他页面：
|
||
|
||
```bash
|
||
# 检查 board-coach 页面
|
||
python tools\h5-to-mp-checker\check_h5_to_mp.py ^
|
||
--h5 docs\h5_ui\pages\board-coach.html ^
|
||
--wxss apps\miniprogram\miniprogram\pages\board-coach\board-coach.wxss ^
|
||
--output docs\miniprogram-dev\board-coach-reports\auto-check-report.md
|
||
|
||
# 检查 board-finance 页面
|
||
python tools\h5-to-mp-checker\check_h5_to_mp.py ^
|
||
--h5 docs\h5_ui\pages\board-finance.html ^
|
||
--wxss apps\miniprogram\miniprogram\pages\board-finance\board-finance.wxss ^
|
||
--output docs\miniprogram-dev\board-finance-reports\auto-check-report.md
|
||
```
|