跳到主要内容

从头构建一个 AI 友好的小程序

场景​

从零创建一个小程序，让它具备 AI 理解并执行业务功能的能力——用户说"帮我点一杯拿铁"或"挂明天下午的号"，AI 就能自动完成操作。

本文不要求你有现成的小程序代码，只需一个 AppID。

前置条件​

  • 微信开发者工具 Nightly 版 已安装
  • 小程序 AppID 已获取（微信公众平台 → 开发 → 开发管理 → 开发设置）
  • 小程序已在微信公众平台 申请开通 AI 开发模式（基础功能 → AI 能力 → 接入模式选择「开发模式」）
  • Node.js ≥ 18（node -v 确认）
  • npx mp-skills --version 可正常输出版本号

实现步骤​

第 1 步：创建项目​

npx mp-skills new my-ai-app

预期输出：

* 创建项目: my-ai-app
  ok  项目骨架已生成
  ok  git 仓库已初始化

[OK] 项目已创建: my-ai-app

进入项目目录：

cd my-ai-app

第 2 步：理解项目结构​

├── project.config.json       小程序项目配置
├── README.md                 项目说明
├── .mcp.json                 AI 工具配置
├── cloudfunctions/           云函数目录
│   └── getOpenId/            内置示例云函数
└── miniprogram/              小程序代码根目录
    ├── app.json              全局配置（已包含 AI 开发模式配置）
    ├── app.js                应用入口
    ├── app.wxss              全局样式
    ├── pages/index/          示例首页
    └── skills/               SKILL 分包目录
        ├── greet-skill/      内置欢迎 SKILL（可直接使用）
        └── _shared/          共享工具库

miniprogram/app.json 中的 AI 相关配置：

{
  "lazyCodeLoading": "requiredComponents",   // 按需注入
  "subPackages": [                            // SKILL 独立分包
    { "root": "skills", "name": "skills", "pages": [], "independent": true }
  ],
  "agent": {
    "skills": [                                // AI 引擎认识的 SKILL 清单
      { "name": "greet", "description": "...", "path": "skills/greet-skill" }
    ]
  }
}

agent.skills 就是 AI 的功能清单，增加一条记录 AI 就多会一个功能。

第 3 步：配置 AppID​

编辑 project.config.json，在顶层添加 appid 字段：

{
  "appid": "wx你的小程序AppID",
  "description": "AI 小程序 — 由 mp-skills 创建",
  "miniprogramRoot": "miniprogram/",
  ...
}

第 4 步：搜索并安装业务 SKILL​

内置的 greet-skill 只能打招呼，要开放真实功能需要安装业务 SKILL。

先看看有哪些可用：

npx mp-skills find

安装一个试试（以点餐 order-skill 为例）：

npx mp-skills add TencentCloudBase/awesome-miniprogram-skills -s order-skill

预期输出：

* 安装 Skill: order-skill
   * miniprogram/skills/order-skill/
   * miniprogram/skills/_shared/mp-skills-shared/
   * 已记录版本

[OK] 安装完成！

安装后 CLI 自动完成：

  • 拷贝 SKILL 文件到 miniprogram/skills/order-skill/
  • 更新 app.json 的 agent.skills（AI 现在知道你能点餐了）
  • 更新 project.config.json 的 packOptions.include
  • 写入 skills-lock.json 版本锁

第 5 步：环境搭建​

有些 SKILL 依赖云开发服务（云函数、数据库）：

npx mp-skills setup

首次需要扫码授权，之后自动创建云函数和数据库集合。

可跳过。SKILL 自带预览模式，用本地 Mock 数据即可运行。

第 6 步：在开发者工具中打开​

# macOS
/Applications/wechatwebdevtools.app/Contents/MacOS/cli open --project /your/path/to/my-ai-app

# Windows
"C:\Program Files (x86)\Tencent\微信web开发者工具\cli.bat" open --project "D:\...\my-ai-app"

在开发者工具中：

  1. 右上角基础库版本切换到 3.16.1 或以上（先切到其他版本再切回来，触发重新下载）
  2. 编译模式切换到「小程序 AI 编译」
  3. 如果看不到该选项，重新登录后重试

第 7 步：验证效果​

在「小程序 AI 编译」模式下：

  1. 左侧 SKILL 列表能看到 greet 和 order
  2. 选中 order-skill，右侧显示 4 个原子接口
  3. 点选 searchRestaurants，填入 {"keyword": "川菜"} 执行
  4. 或启动对话输入"附近有什么好吃的"，看 AI 自动调用原子接口返回结果

验证清单​

  • 开发者工具显示「小程序 AI 编译」选项
  • SKILL 列表中包含 greet 和 order
  • 原子接口可正常调用并返回数据
  • 对话模式下输入触发语可正常响应

常见问题​

看不到「小程序 AI 编译」选项

  • 确认已申请开通 AI 开发模式
  • 重新登录开发者工具、重新打开项目
  • 基础库版本切到其他版本再切回 3.16.1

扫码授权 setup 失败

安装 SKILL 报错 "未找到"

  • 先运行 npx mp-skills find 确认 SKILL 名称

参考​