前言¶
微信小程序 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。
