微信小程序开发 Skill:面向 AI 编码的小程序全流程指南

前言

用 AI 写微信小程序时,常见问题不是「能不能生成页面」,而是上下文不对:把 Web 登录流程塞进小程序、没看 project.config.json 就建议预览、默认 Stable 版开发者工具却要用 Nightly 的 wechatide,或者项目并未接入云开发却强行套用 wx.cloud 约束。官方文档分散在微信开放文档、开发者工具与 CloudBase 文档里,Agent 一次对话很难对齐这些边界。

下面介绍 SkillHub 上的 微信小程序开发(@tencent-adm/miniprogram-development)。它把项目结构、调试预览发布、消息推送与可选的云开发集成,整理成 Agent 可遵循的 SKILL.md 与 reference,适合在 Cursor、Claude Code、Codex 等支持 Skills 的环境里启用。

这是什么

微信小程序开发 · WeChat Mini Program Development 是腾讯云 CloudBase 团队发布的企业来源 Skill(enterprise),当前版本 2.36.0,坐标 @tencent-adm/miniprogram-development,分类为 dev-programming。页面标注 requires_api_key=false,安装本 Skill 本身不需要额外 API Key。

定位一句话:面向 AI 编码场景 的微信小程序开发指南,覆盖项目脚手架、tabBar、路由、调试、预览、发布与 wx.cloud 集成;并说明何时应切换到同系列的 Web 开发、云函数、UI 设计等兄弟 Skill,避免范围混用。

  • SkillHub 展示页:https://www.skillhub.cn/skills/tencent-adm/miniprogram-development
  • 介绍入口:https://api.skillhub.cn/zcwl/miniprogram-development

核心功能

以下内容均来自该 Skill 的 SKILL.md 与 SkillHub 简介,按场景归纳。

项目结构与配置

  • 遵循 project.config.json 中的小程序根目录、appid、miniprogramRoot 等配置。
  • 页面需具备完整文件集(含页面 .json 配置);引用本地资源前确认文件存在。
  • tabBar:未明确要求图标时,默认推荐 纯文字自定义 tabBar(tabBar.custom = true,仅 pagePath 与 text),减少图标资源与留白问题;需要图标时再配置 iconPath / selectedIconPath 并落地资源文件。

构建、调试、预览与发布

  • 默认工作流指向 微信开发者工具 Nightly 及 wechatide CLI(内置 Skills/MCP),用于打开项目、编译、模拟器、控制台/网络调试、预览、上传等。
  • Nightly 下载说明见 SKILL 内链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly_backup.html。
  • 若环境中没有 wechatide,Skill 要求先说明这是 环境缺口、提示需要 Nightly,并等待用户决定是否安装;用户拒绝或无法安装时,再回退到 miniprogram-ci 预览/上传及 CloudBase MCP 等路径,并明确缺失的能力(如模拟器、控制台等)。
  • 涉及上传/发布前,需结合同插件中的 Change Safety Protocol 与 Deployment Gate 协议(路径在 SKILL 的 Sibling skills 小节中给出)。

云开发(按需)

  • 仅当用户或代码库明确使用 CloudBase、wx.cloud、腾讯云开发时,才应用云开发相关约束与 reference。
  • 覆盖账号与主体前提(个人/企业主体、测试号、云开发入口置灰、环境不可见等)的诊断指引,以及认证、文档库、微信支付/虚拟支付等场景的 兄弟 Skill 路由说明。

消息推送与客服

  • 消息推送(消息推送)、客服自动回复等走开发者工具 IDE + wxide CLI 的当前支持路径;客服回复需使用 cloud.openapi.customerServiceMessage.send 及 config.json 中的 openapi 权限,不能仅靠云函数返回值自动回复。

搜索与推广

  • 小程序搜索优化、页面收录、搜索推广等场景有独立 reference(含 mpcrawler、标题与缩略图等说明)。

明确不覆盖的范围

  • 纯 Web 前端 → 使用 web-development。
  • 纯后端服务 → 使用 cloudrun-development / cloud-functions。
  • 仅 UI 设计、无小程序开发上下文 → 使用 ui-design。

安装与启用

Skill 基于通用 SKILL.md 格式。在 SkillHub 上安装时,需把文件装到 当前 Agent 的 skills 目录,否则默认落到 ./skills/ 可能不会被识别。

1、安装 SkillHub CLI(若尚未安装)

先检查是否已有 skillhub:

command -v skillhub && skillhub --version

未安装时可执行官方完整安装(CLI + 默认 Skill):

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

仅 CLI:

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

说明与路径以 https://skillhub.cn/install/skillhub.md 为准;若文档中的 COS 域名与上略有差异,以该页面当前内容为准。

2、安装本 Skill

skillhub install @tencent-adm/miniprogram-development --dir <skills 目录>

常见 Agent 的 skills 目录(来自 skillhub.md):

环境 目录
Cursor ~/.cursor/skills/
Claude Code ~/.claude/skills/
Codex ~/.codex/skills/ 或项目下 .agents/skills/
Windsurf ~/.codeium/windsurf/skills/ 或 .windsurf/skills/

也可将下面提示词发给 AI,让其按 skillhub.md 完成安装:

请根据 https://skillhub.cn/install/skillhub.md,安装 `@tencent-adm/miniprogram-development`。

安装后按你所用客户端要求重启或刷新 Skills 缓存(以各客户端文档为准)。

典型用法

启用 Skill 后,Agent 会按 SKILL.md 中的 Activation Contract 判断是否进入本 Skill,并按任务类型跳转到对应 reference。下面是可以直接对照官方 SKILL 复现的两类示例。

简单 tabBar 默认写法

在不需要 tab 图标时,app.json 可采用纯文字自定义 tabBar:

{
  "tabBar": {
    "custom": true,
    "list": [
      { "pagePath": "pages/index/index", "text": "首页" },
      { "pagePath": "pages/travel/travel", "text": "行程" },
      { "pagePath": "pages/my/my", "text": "我的" }
    ]
  }
}

再在自定义 tabBar 组件里只做文字布局,避免预留图标位导致的空白。

最小项目骨架

app.js:

App({
  onLaunch() {
    console.log("Mini Program launched");
  },
});

pages/index/index.js:

Page({
  data: {
    message: "Hello CloudBase Mini Program",
  },
});

pages/index/index.wxml:

<view class="page">
  <text>{{message}}</text>
</view>

pages/index/index.json:

{
  "navigationBarTitleText": "Home"
}

project.config.json(预览/上传前需替换为真实 appid):

{
  "appid": "your-mini-program-appid",
  "projectname": "cloudbase-mini-program",
  "miniprogramRoot": "./",
  "compileType": "miniprogram"
}

实际开发中,若涉及 Nightly、wechatide 参数、消息推送绑定或云开发初始化,应让 Agent 先读取 SKILL 内列出的 references/ 文档再改代码,而不是一次性生成整仓。

适用场景与注意

适合谁

  • 用 AI 辅助创建、修改、调试、预览或发布微信小程序的开发者。
  • 项目可能接入腾讯云开发,需要 Agent 区分「通用小程序」与 wx.cloud 路径的团队。
  • 需要统一 tabBar、项目配置、DevTools/Nightly 工作流说明,减少 Agent 误用 Web 模式或错误预览方式的情况。

限制与注意

  • Skill 依赖同目录下的 CloudBase 兄弟 Skill(如 cloudbase-platform、auth-wechat-miniprogram 等);若本地只装了本包、缺少兄弟 Skill,SKILL 要求向用户说明需安装完整 CloudBase 插件或缺失项,不要通过 HTTP 拉取远程 skill 文档凑上下文。
  • CLI 自动化默认面向 Nightly;Stable 版工具可能不含 Nightly Skills/wechatide,不要静默降级为「手动导入」而不告知用户。
  • 云开发、微信支付、主体类型(个人/企业)有硬性业务限制,Skill 内强调先确认售卖类型再推荐主体,避免后期主体变更成本。
  • SkillHub 页面展示的评分为 100000,下载 46019,安装 7(统计随 SkillHub 更新而变化,以页面为准)。

结尾

微信小程序开发 Skill 把小程序工程约定、DevTools/Nightly 调试发布路径、可选云开发与消息推送等知识收敛到 Agent 可读的结构里,减少 AI 在小程序场景下的常识性错误。若你正在用 Cursor 或同类工具写小程序,可先按上文安装 @tencent-adm/miniprogram-development,再在对话中明确是否使用云开发、是否需要预览/上传,以便 Agent 命中正确的 reference。

官方介绍与安装入口:https://api.skillhub.cn/zcwl/miniprogram-development
SkillHub 详情页:https://www.skillhub.cn/skills/tencent-adm/miniprogram-development

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜