前言¶
微信小程序 canvas 项目的视觉问题，往往不在某个语法错误，而在「看起来不对」：线条粗细不对、内容没居中、重绘后残留上一帧、导出图片和预览不一致。这类问题单元测试覆盖不到，靠肉眼看预览又难复现。下面介绍的 Skill 把「起预览服务—执行 JS—截图—按区域裁剪—回归对比」串成一条固定流程，并用 8 项清单约束 preview.html 的验证范围。
这是什么¶
小程序 Canvas 预览+截图视觉验证（8项清单），坐标 @user_3ff3c268/miniprogram-canvas-verify，由社区发布者 user_3ff3c268 维护，当前版本 1.2.0，分类 dev-programming，来源标记为 community，标签 requires_api_key=false。
它解决的问题是：把小程序 canvas 渲染结果放到浏览器里预览后，如何用同一套截图与对比手段，反复确认渲染是否符合预期，而不是每次改动后都重新肉眼核对。
核心功能¶
- 启动本地静态预览服务，默认端口
:9099，支持指定任意根目录与端口，把 canvas 项目目录挂成可访问的静态站点。 - 用 Selenium 打开预览页，执行页面 JS 后截图，获取渲染完成后的真实画面，而不是源码静态文本。
- 按场景 YAML 做区域裁剪与回归对比，把关注区域从整页截图中切出，并与基线对比，用于判断改动是否引入视觉差异。
- 内置 8 项 preview.html 验证清单，覆盖：白屏、线条、居中、即时重绘、导出、色值、控制台、一致性。
触发词包括：预览 canvas、截图验证、视觉回归、验证渲染效果、小程序 canvas 验证、起预览服务。
工具链为纯前端 + Python，零业务依赖，不需要额外 API Key。
安装与启用¶
该 Skill 基于通用 SKILL.md 格式。已抓取资料中未给出官方安装命令、安装目录或具体配置字段；https://api.skillhub.cn/user_3ff3c268/miniprogram-canvas-verify 与 SkillHub 页面在本次核对时无法访问，因此不在此编造命令。
启用方式按通用流程处理：先拿到 Skill 的 SKILL.md 与配套文件，再将其放入对应 Agent 的 Skill 目录，或按当前环境（Cursor / Codex CLI / Claude Code）的 Skill 加载方式注册。具体目录路径与加载命令以官方页面和本地环境说明为准，本文不代拟。
典型用法¶
按 Skill 简介描述的工作流，一次验证大致分三步：
- 用静态预览服务把项目目录挂到
:9099（或自定端口），浏览器打开预览页。 - 用 Selenium 对预览页执行 JS 并截图，确认页面不是白屏、控制台无报错。
- 按场景 YAML 指定裁剪区域，与基线截图做回归对比，并逐项核对 8 项清单：白屏、线条、居中、即时重绘、导出、色值、控制台、一致性。
其中第 1 步对应「起预览服务」，第 2 步对应「截图验证 / 验证渲染效果」，第 3 步对应「视觉回归」。场景 YAML 的具体字段名、裁剪坐标格式、基线管理方式，已抓取资料未提供，需查阅 Skill 自带文件，本文不推断。
适用场景与注意¶
适合需要反复确认小程序 canvas 渲染结果的开发者：改了绘制逻辑后想确认线条、居中、重绘是否正常，或者想做截图层面的回归比对。
需要注意的限制：
- 它是视觉验证，不替代业务逻辑测试；逻辑正确但坐标错误的问题靠截图发现，逻辑错误但视觉正常的问题它覆盖不到。
- 截图对比受浏览器渲染、视口尺寸、字体与抗锯齿影响，跨环境对比前需固定这些条件。
- 场景 YAML 与基线截图需要自己维护，Skill 提供流程与清单，不自动产生项目基线。
- 涉及导出图片一致性时，预览环境与小程序真机 canvas 的像素差异需单独确认。
结尾¶
这个 Skill 的价值在于把「起预览—截图—裁剪—对比」固定成可重复流程，并用 8 项清单把易漏的渲染问题列出来，减少每次改动后的肉眼核对成本。官方地址：https://api.skillhub.cn/user_3ff3c268/miniprogram-canvas-verify，SkillHub 页面：https://www.skillhub.cn/skills/user_3ff3c268/miniprogram-canvas-verify。
