微信小程序全栈开发 skill,支持项目初始化、云开发(数据库/存储/云函数/聚合查询/事务)、用户登录鉴权、微信支付(JSAPI/统一下单/支付通知/退款)、直播/实时音视频(TRTC)、数据分析/埋点、分享海报/朋友圈分享、TypeScript 泛型封装、云托管(容器化后端)、客服消息、订阅消息、客服自动回复、内容安全(文本/图片/音视频审核)、小程序互跳(APP↔小程序/URL Scheme/扫码)、硬件能力(蓝牙/GPS/NFC/Wi-Fi/扫码)、Skyline 高性能渲染、WXS 脚本、性能优
微信小程序全栈开发 Skill是一项面向实际任务的技能,主要用于整合腾讯云官方认证最佳实践 + Skyline 官方 Worklet 动画规范 + 工程化 CI/CD 配置,一站式覆盖从项目初始化到生产发布的全链路;📋 元信息;
≥ 2.2.3(云开发)/ ≥ 3.0(Skyline);🚀 快速上手;Step 1:安装;SkillHub CLI 未安装时。它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。
实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;涉及批量任务时,还应保存进度,避免中断后重复操作。该技能适合用于一次性任务,也可以接入自动化工作流,与其他技能或上层代理配合完成更完整的业务链路;在组合使用时,应明确每一步的输入输出关系,并避免不同步骤之间出现参数冲突。
整合腾讯云官方认证最佳实践 + Skyline 官方 Worklet 动画规范 + 工程化 CI/CD 配置,一站式覆盖从项目初始化到生产发布的全链路。
| 属性 | 值 |
|---|---|
| 版本 | 1.6.0 |
| 更新日期 | 2026-04-12 |
| 适用基础库 | ≥ 2.2.3(云开发)/ ≥ 3.0(Skyline) |
| 许可证 | MIT |
| 官方文档 | https://developers.weixin.qq.com/miniprogram/dev/framework/ |
Step 1:安装
skillhub install wechat-miniprogram-toolkit
SkillHub CLI 未安装时,告诉 AI「安装 SkillHub」即可自动完成。
Step 2:初始化项目(AI 帮你生成)
告诉 AI:"帮我创建一个微信小程序项目,包含云开发、分包、登录功能" AI 将参照 references/project-init.md 自动生成完整项目结构
Step 3:运行分包分析(上线前必做)
告诉 AI:"分析我的小程序分包,给我最优分包方案" AI 运行 scripts/analyze_subpackages.py,输出 app.json 配置
Step 4:配置 CI/CD(可选)
告诉 AI:"配置 GitHub Actions 自动发布" AI 参照 references/ci-cd.md 生成完整流水线
本 skill 大部分能力开箱即用,无需额外安装。以下为可选场景所需的额外工具,按需安装:
| 工具 | 用途 | 状态 | 说明 |
|---|---|---|---|
| Python ≥ 3.7 | 运行 analyze_subpackages.py 分包分析 |
✅ 通常已内置 | AI 内置,无需手动安装 |
| Node.js ≥ 16 | CI/CD GitHub Actions | ✅ 通常已内置 | GitHub Actions 环境自带,无需本地安装 |
以下是小程序项目开发时可能用到的 npm 依赖(通过
npm install安装到项目目录):
| 依赖 | 用途 | 安装命令 |
|---|---|---|
| miniprogram-ci | 自动构建/上传/提交审核 | npm install miniprogram-ci -D |
| ESLint | 代码规范检查 | npm install eslint -D |
| eslint-plugin-wxmp | 微信小程序专用 ESLint 规则 | npm install eslint-plugin-wxmp -D |
| 工具 | 用途 | 安装命令 |
|---|---|---|
| matplotlib | 公式渲染(LaTeX → PNG) | pip install matplotlib |
提示:如果环境中没有安装这些工具,告诉 AI「帮我安装 miniprogram-ci」即可自动处理。
上线前需要在微信公众平台和本地完成以下账号/工具配置:
| 准备项 | 用途 | 获取/操作方式 |
|---|---|---|
| 微信开发者工具 | 预览、调试、上传代码 | 下载:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html |
| 微信小程序 AppID | 小程序唯一标识,创建项目必需 | 登录 https://mp.weixin.qq.com → 设置 → 基本设置 → AppID |
| 云开发环境 | 数据库/存储/云函数 | 开发者工具内点击「云开发」按钮开通,创建生产/测试两个环境 |
| 商户号(微信支付) | JSAPI 调起支付(可选,支付场景必需) | https://pay.weixin.qq.com → 申请商户号并完成认证 |
| GitHub 账号 + 仓库 | CI/CD 流水线(可选) | https://github.com → 创建私有仓库存放小程序代码 |
| miniprogram-ci | 自动构建上传(可选) | npm install miniprogram-ci -D |
| Node.js ≥ 16 | CI/CD 构建环境(可选) | GitHub Actions 已内置,无需本地安装 |
提示:以上大部分为微信官方平台操作,AI 可以帮你完成代码层面的所有工作,但账号注册/认证需要你本人操作。
skillhub install wechat-miniprogram-toolkitreferences/project-init.md 生成完整项目结构| 需求 | 操作 |
|---|---|
| 新增功能页面 | 告诉 AI「参照 project-init.md 在项目中新增一个 XX 页面」 |
| 分析分包是否合理 | 告诉 AI「运行 analyze_subpackages.py 分析分包,输出 app.json 配置」 |
| 配置微信支付 | 告诉 AI「参照 payment.md 配置 JSAPI 支付,商户号为 XXX」 |
| 遇到报错 | 告诉 AI「运行时报错:[错误信息],查看常见错误处理表」 |
| 查看能力清单 | 告诉 AI「列出这个 skill 支持的全部能力」 |
告诉 AI:「这个 skill 支持 XX 能力吗?」,AI 将判断:
wechat-miniprogram-toolkit/
│
├── SKILL.md # 本文件(入口)
│
├── scripts/
│ └── analyze_subpackages.py # 自动分包分析工具(Python)
│
└── references/
├── project-init.md # 项目初始化模板(必读)
├── cloud-dev.md # 云开发全指南(含聚合/事务/安全)
├── auth.md # 登录鉴权指南(含手机号/UnionID)
├── payment.md # 微信支付全流程(JSAPI/退款/通知)
├── live-stream.md # 直播 & 实时音视频(TRTC)
├── analytics.md # 数据分析 & 用户行为埋点
├── share.md # 分享能力(朋友圈/海报/卡片)
├── typescript.md # TypeScript 类型定义 & 泛型封装
├── cloudhosting.md # 云托管(容器化后端/Docker)
├── messaging.md # 客服消息 & 订阅消息推送
├── content-safety.md # 内容安全(文本/图片/音视频审核)
├── miniapp-handoff.md # 小程序互跳(APP↔小程序/URL Scheme)
├── hardware.md # 硬件能力(蓝牙/GPS/NFC/Wi-Fi/扫码)
├── subpackage.md # 分包策略(必读)
├── advanced-render.md # Skyline/公式/表格(按需)
├── wxs-performance.md # WXS & 性能优化(按需)
├── ci-cd.md # CI/CD 流水线(按需)
└── error-log.md # 错误台账 & 进化记录
符合以下任一场景,立即加载本 skill:
| 任务 | 先读文档 |
|---|---|
| 云开发(CRUD/聚合/事务/权限) | references/cloud-dev.md |
| 用户登录鉴权 | references/auth.md |
| 微信支付(JSAPI/下单/退款) | references/payment.md |
| 直播 / 实时音视频 | references/live-stream.md |
| 数据分析 / 埋点 | references/analytics.md |
| 分享 / 朋友圈 / 海报 | references/share.md |
| TypeScript 泛型封装 | references/typescript.md |
| 云托管 / 容器化后端 | references/cloudhosting.md |
| 客服消息 / 订阅消息 | references/messaging.md |
| 内容安全 / 内容审核 | references/content-safety.md |
| 小程序互跳 / URL Scheme | references/miniapp-handoff.md |
| 硬件能力 / 蓝牙/GPS/NFC | references/hardware.md |
| 分包策略/分包分析 | references/subpackage.md |
| Skyline / 动画 | references/advanced-render.md |
| 性能优化 / WXS | references/wxs-performance.md |
| 项目初始化配置 | references/project-init.md |
| 能力模块 | 参考文档 | 优先级 | 说明 |
|---|---|---|---|
| 项目初始化 & 规范 | project-init.md |
🔴 必读 | 目录结构、project.config.json、app.json |
| 云开发(DB/存储/函数) | cloud-dev.md |
🔴 必读 | CRUD、聚合查询、事务、权限规则 |
| 登录鉴权(openid/unionid) | auth.md |
🔴 必读 | 静默登录、按钮授权、手机号、权限守卫 |
| 微信支付(JSAPI/下单/退款) | payment.md |
🔴 必读 | 统一下单、支付通知、订单查询、退款、安全规范 |
| 直播 & 实时音视频 | live-stream.md |
🟡 按需 | live-player、TRTC、视频通话、直播带货 |
| 数据分析 & 埋点 | analytics.md |
🟡 按需 | DAU/MAU、行为追踪、转化漏斗、错误监控 |
| 分享能力 | share.md |
🟡 按需 | onShareAppMessage、朋友圈分享、海报生成 |
| TypeScript 泛型封装 | typescript.md |
🟡 按需 | 类型定义、泛型封装、云函数 TS、项目配置 |
| 云托管(容器化后端) | cloudhosting.md |
🟡 按需 | Docker 部署、HTTP API、定时任务、自动扩缩 |
| 客服消息 & 订阅消息 | messaging.md |
🟡 按需 | 订阅消息、客服组件、自动回复、AccessToken 缓存 |
| 内容安全(文本/图片审核) | content-safety.md |
🟡 按需 | msgSecCheck、imgSecCheck、昵称审核、配额管理 |
| 小程序互跳(APP↔小程序) | miniapp-handoff.md |
🟡 按需 | 跳转APP、URL Scheme、开放标签、扫一扫太阳码 |
| 硬件能力(蓝牙/GPS/NFC/Wi-Fi) | hardware.md |
🟡 按需 | BLE、iBeacon、室内定位、NFC、Wi-Fi 配网 |
| 分包策略(≤ 2MB) | subpackage.md |
🔴 必读 | 分包结构、预加载、跨包通信 |
| Skyline Worklet 动画 | advanced-render.md |
🟡 按需 | Worklet API、SharedValue、组合动画 |
| 数学公式 & 表格 | advanced-render.md |
🟡 按需 | Unicode/KaTeX/WebView 三方案 |
| WXS 脚本 & 性能优化 | wxs-performance.md |
🟡 按需 | 过滤器、setData 优化、内存管理 |
| CI/CD 流水线 | ci-cd.md |
🟢 可选 | GitHub Actions、自动审核、通知 |
| 自动分包分析工具 | analyze_subpackages.py |
🔴 工具 | 贪心算法,自动生成 app.json 分包配置 |
| 错误台账 & 进化记录 | references/error-log.md |
🟢 自动 | 用户反馈/报错自动记录,≥3次自动提升 |
1. 参照 project-init.md 生成目录结构 2. 配置 project.config.json(注意 cloudfunctionRoot 路径) 3. 配置 app.json(pages + subpackages + tabBar + usingComponents) 4. 在 app.js 中初始化云开发 + 静默登录
// app.js 全局初始化
wx.cloud.init({ env: 'your-env-id', traceUser: true }) // 或 wx.cloud.DYNAMIC_CURRENT_ENV
// 云函数内自动获取 openid(无需前端传参)
// cloudfunctions/login/index.js
const openid = cloud.getWXContext().OPENID // 微信自动注入
// 页面按钮授权
const db = wx.cloud.database()
// 增
await db.collection('posts').add({ data: { title: '标题', _openid, createdAt: db.serverDate() } })
// 查
await db.collection('posts').where({ _openid: wx.getStorageSync('openid') }).get()
// 改
await db.collection('posts').doc(id).update({ data: { title: '新标题' } })
// 删
await db.collection('posts').doc(id).remove()
python scripts/analyze_subpackages.py <项目目录> --main-max 2 --pkg-max 2 # 工具输出 app.json 分包配置片段,直接复制使用
// onReady 中绑定一次样式(只绑定一次)
onReady() {
const { shared, spring } = wx.worklet
this._scale = shared(1)
this.applyAnimatedStyle('#box', () => {
'worklet'
return { transform: `scale(${this._scale.value})` }
})
},
// 触发动画(只更新 SharedValue)
handleTap() {
'worklet'
const { spring } = wx.worklet
// spring(toValue, options):toValue=目标值,options=弹簧参数
this._scale.value = spring(1.2, { damping: 15, stiffness: 200 })
}
{{utils.formatPrice(price)}} {{utils.timeAgo(timestamp)}}
| ❌ 不要这样做 | ✅ 正确做法 |
|---|---|
| 在小程序里做 Web 风格登录页 | 用按钮 open-type="chooseAvatar" + input type="nickname" + 云函数自动鉴权 |
| 把 openid 从云函数返回给前端再传回来 | openid 在云函数内通过 cloud.getWXContext() 自动获取,无需传输 |
| 在云函数内写死 env ID | 用 cloud.DYNAMIC_CURRENT_ENV 自动匹配当前环境 |
解构 this.data 后修改值 |
直接修改 this.data.xxx,然后 setData() |
| 在 Worklet 中直接调用 wx API | 通过 runOnJS() 回调到 JS 线程再调用 |
Worklet 函数缺少 'worklet' 声明 |
所有 worklet 函数第一行必须是 'worklet' |
| 跨分包 require 组件 | 改用 wx.cloud.callFunction 或 eventBus |
| 主包引用分包内的组件 | 分包组件只能分包内使用 |
| 大量小图超过 2MB | 合并雪碧图、压缩图片、移动到云存储 |
| 使用 wx.getUserInfo / getUserProfile(已废弃) | 改用 button open-type="chooseAvatar" + input type="nickname" 组合 |
| setData 传整个列表 | 用 this.setData({ 'list[' + index + '].field': value }) 精准更新 |
阶段一:初始化 1. 参照 project-init.md 生成完整目录 2. 配置 project.config.json(cloudfunctionRoot + miniprogramRoot) 3. 配置 app.json(pages + subpackages 骨架) 阶段二:开发 4. 开发主包页面 + 组件(保持在 1.5MB 以内) 5. 按需引入云开发能力(cloud-dev.md) 6. 实现登录鉴权(auth.md) 阶段三:分包优化(上线前必须) 7. 运行 python scripts/analyze_subpackages.py 8. 根据报告创建 subpackages/ 目录结构 9. 移动页面 + 更新 app.json 分包配置 10. 验证包大小(微信开发者工具 → 详情 → 包大小分析) 阶段四:发布 11. 配置 CI/CD 流水线(references/ci-cd.md) 12. GitHub Actions 自动构建 + 提交审核
| 错误 | 原因 | 解决方法 |
|---|---|---|
app.json not found |
工作目录不对 | 确保在项目根目录,project.config.json 的 miniprogramRoot 指向正确 |
| 分包页面 404 | root 路径不匹配 | 检查 app.json root 与实际目录一致,路径不带前缀 / |
| 云函数 500 | 权限不足 / env 未初始化 | 云函数内用 cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) ✅;小程序端用字符串环境 ID wx.cloud.init({ env: 'your-env-id' }) ✅,cloud.DYNAMIC_CURRENT_ENV 在小程序端是 undefined ❌ |
| 包超 2MB 警告 | 资源过大 | 压缩图片、移动到分包、使用 CDN 链接 |
| require 失败(跨分包) | 分包 A 引用了主包模块 | 用 wx.cloud.callFunction 或 eventBus 解耦 |
| wx.getUserInfo / wx.getUserProfile 失效 | 微信已废弃这些 API(2021 年起逐步停用) | 改用 button open-type="chooseAvatar" + input type="nickname" 组合(2024+ 标准方案) |
| Worklet 动画无效 | 缺少 'worklet' 声明 |
函数第一行必须写 'worklet' |
| SharedValue 替换失效 | offset = 100 替换了整个对象 |
用 offset.value = 100 |
| 分包图片加载 404 | 分包内相对路径错误 | 用绝对路径或云存储 CDN |
| setData 卡顿 | 在滚动/手势回调中频繁 setData | 用 Worklet SharedValue 替代 |
| 错误 | 原因 | 解决方法 |
|---|---|---|
errMsg: "invalid credential" |
access_token 过期 | 重新获取(有效期 2 小时,存 storage 需加缓存逻辑) |
errMsg: "cloud.callFunction:fail" |
云函数超时/未部署/入口文件报错 | 检查云函数是否已上传,确认入口文件名(通常是 index.js) |
errMsg: "chooseImage:fail auth deny" |
用户拒绝相册/相机权限 | 引导用户在设置页开启权限,或提供降级方案 |
errMsg: "request payment:fail" |
支付参数签名错误 | 检查 prepay_id / 时间戳 / 随机串 / 签名算法是否与文档一致 |
errMsg: "database:permission denied" |
数据库权限规则拒绝读写 | 检查 database permission 规则,确认用户身份字段(_openid) |
errMsg: "chooseAvatar:fail cancel" |
用户取消头像选择 | 引导选择头像或允许使用默认头像 |
| setData 后视图不更新 | 在 Worklet 中直接修改 this.data | Worklet 只修 SharedValue,setData 须在 JS 线程调用 |
| 订阅消息发送失败 | 用户未授权 / 模板 ID 错误 | 确认 tmplIds 存在、用户在授权弹窗点了允许 |
| 云存储上传失败 | 文件超过 50MB | 分片上传(云托管)或改用 CDN 直传 |
| 云函数返回 500 但本地正常 | 云端环境 env 不一致 | 确认云函数部署的环境与小程序 init 的 env ID 一致 |
| 文档 | 链接 |
|---|---|
| 官方开发文档 | https://developers.weixin.qq.com/miniprogram/dev/framework/ |
| 云开发指南 | https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/ |
| 分包加载 | https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/ |
| Skyline 渲染 | https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/skyline/ |
| Worklet 动画 | https://developers.weixin.qq.com/miniprogram/dev/framework/view/skyline/worklet-animation.html |
| WXS 参考 | https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/ |
| miniprogram-ci | https://www.npmjs.com/package/miniprogram-ci |
本 skill 具有自我进化能力。当用户反馈错误、或发现更好的方案时,AI 会自动记录并改进。
当出现以下任一情况时,AI 自动记录到 skill 的错误台账:
| 触发场景 | 记录内容 |
|---|---|
| 用户说"不对"、"错了"、"应该..." | 用户纠正的错误内容 |
| AI 生成的代码运行报错 | 错误信息 + 报错场景 |
| 微信官方 API 变更 | 变更内容 + 更新后的正确写法 |
| 用户提出 skill 没有覆盖的能力 | 需求描述 + 优先级 |
## 进化记录 ### LRN-YYYYMMDD-NNNN **时间**: YYYY-MM-DD **触发场景**: <用户反馈/报错/新需求> **错误内容**:**正确内容**: <正确的做法> **修复文件**: <修改了哪个文件>
用户反馈 / 发现错误
↓
立即修复当前答案(本次回答正确)
↓
记录到 `references/error-log.md`(永久积累)
↓
若同一错误出现 ≥ 3 次 → 自动更新到 SKILL.md / 对应 reference 文件
↓
下次遇到相同场景 → 直接从 skill 文件中读取正确答案
告诉 AI:「查看这个 skill 的错误台账」即可查看所有历史记录。
暂无记录(每次反馈都会自动追加)
版本历史:v1.0.0(初始版本)→ v1.1.0(新增 WXS / CI-CD / 激活契约 / 自我进化机制)→ v1.5.0(新增内容安全/互跳/硬件能力)→ v1.6.0(修复废弃 API、全面支持 2024+ 登录方案、修复支付 MCH_ID 错误)
相关专题
热门下载
相关下载
精品课程
共6课时 | 54.6万人学习
共89课时 | 133.4万人学习
共49课时 | 82.2万人学习