🚀 两年小程序开发,我把踩过的坑做成了开源 Skills

还记得第一次用 miniprogram-automator 写自动化测试时的绝望吗?

  • querySelector() 死活选不到自定义组件里的元素
  • waitFor() 不知道该等什么,测试时好时坏
  • wx.request Mock 不生效,每次测试都打真实接口
  • 截图对比总是因为时间戳、动画而误报

还有 CI 发布时的噩梦:

  • 上传到微信后台经常超时,CI 流水线红成一片
  • pnpm 项目的 npm 包打不进去,shamefully-hoist 是什么鬼?
  • GitHub Actions 里 secrets 配置错了,排查半天才发现是 IP 白名单问题

我决定不再让其他人重复踩这些坑。


📦 wechat-miniprogram-skills

这是我开源的微信小程序 AI 编程技能包,基于 Skills 规范,支持 40+ AI 编程工具(Claude Code、Cursor、Windsurf、Continue、Copilot 等)。

包含两个核心 Skill:

1️⃣ miniprogram-automation - 自动化测试不再是玄学

核心能力:

  • ✅ 生成可复用的 Node.js 自动化脚本(不强制 Jest)
  • ✅ 处理自定义组件边界问题(.shadow()、>>> 选择器)
  • ✅ 智能 waitFor 策略(等待元素、网络、页面栈)
  • ✅ wx.request Mock 方案(mockWxMethod / restoreWxMethod)
  • ✅ 截图 + 回归验证(console / exception 监听)
  • ✅ 基于官方 miniprogram-demo 实际验证

常见触发词: "小程序自动化"、"automator"、"E2E 测试"、"选不到元素"、"mock wx.request"

实际案例:

javascript 复制代码
// 自动生成的脚本会处理这些细节:
const input = await page.$('.custom-input >>> input')
await input.input('测试内容')
await page.waitFor(500) // 智能等待策略

2️⃣ miniprogram-ci - 让 CI/CD 稳如老狗

核心能力:

  • ✅ 生成 pack-npm / preview / upload 独立脚本
  • ✅ 内置超时重试机制(3次重试,每次等待 5 秒)
  • ✅ 完整 GitHub Actions 模板(npm / pnpm 双版本)
  • ✅ pnpm 兼容性配置(shamefully-hoist / public-hoist-pattern)
  • ✅ secrets 管理 + IP 白名单检查
  • ✅ 自动创建 GitHub Release

常见触发词: "上传小程序"、"CI 部署"、"miniprogram-ci"、"预览二维码"、"自动化发布"

实际案例:

yaml 复制代码
# 自动生成的 GitHub Actions 会帮你:
- name: Upload to WeChat
  run: node scripts/upload.js
  env:
    PRIVATE_KEY: ${{ secrets.WX_PRIVATE_KEY }}

🎯 为什么要做成 Skills?

1. AI 编程时代,让 AI 直接生成正确的代码

  • 不用再翻文档、查 Stack Overflow
  • AI 知道如何处理自定义组件、如何配置 CI

2. 知识可复用、可迭代

  • 把经验固化成 Skill,团队共享
  • 遇到新坑就更新 Skill,让 AI 帮后来者避坑

3. 支持 40+ AI 工具

  • 不绑定特定 IDE 或 AI 助手
  • Claude、Cursor、Copilot 都能用

📥 如何使用?

bash 复制代码
# 安装整个仓库
npx skills add whinc/wechat-miniprogram-skills

# 只安装自动化测试 Skill
npx skills add whinc/wechat-miniprogram-skills --skill miniprogram-automation

# 只安装 CI 发布 Skill
npx skills add whinc/wechat-miniprogram-skills --skill miniprogram-ci

安装后,直接在 AI 编程工具中说:

  • "帮我生成小程序自动化测试脚本"
  • "配置小程序 CI 自动上传"

AI 会基于这些 Skills 生成经过实战验证的代码。


🤝 欢迎贡献

如果你也在小程序开发中踩过坑、总结过经验,欢迎提交 PR 补充新的 Skill!

比如:

  • 小程序性能监控
  • 分包加载优化
  • 云开发自动化部署
  • ...

让我们一起让小程序开发不再痛苦 💪


🔗 链接

相关推荐
Helix2509 小时前
Chrome 开发者工具进阶:长截图、网络调试与性能分析
前端·chrome·chrome devtools·使用技巧·性能分析·开发者工具·长截图
liangshanbo121510 小时前
面试题:Webpack 的 publicPath 有什么作用?
前端·webpack·node.js
mjhcsp10 小时前
DeepSeek V4.1 Flash 批量处理效能实测
java·前端·数据库
CHEEVEN_QY11 小时前
新能源汽车电池托盘FSW量产的工艺稳定性控制
java·前端·汽车
熊猫钓鱼>_>11 小时前
Kotlin Multiplatform for OpenHarmony 实战:为 MVIKotlin 实现单向数据流适配
华为·ai编程·鸿蒙·openharmony·适配·数据流·mvkotlin
Alice-YUE11 小时前
前端 × AI:从 Cursor 到 Transformer,一份完整认知路径
前端·人工智能·transformer·ai编程·前端开发·cursor
Code_Solitude11 小时前
C语言:关于二维数组的作业总结
java·c语言·前端
acd1200912 小时前
前端随笔:数据明明变了,Vue 页面就是不更新
前端·javascript·vue.js
FanetheDivine12 小时前
学习Agent开发 10.延迟工具 deferred tools
agent·ai编程