微信小程序

微信小程序

平台概述

微信小程序是小程序生态的开创者和标杆。2017 年 1 月上线，依托微信 13 亿+ 月活用户，日活小程序用户超 4.5 亿。

核心定位：用完即走、触手可及 —— 通过扫一扫、搜索、分享、公众号关联等入口快速触达用户，无需安装卸载。

典型场景：

• 电商零售：京东、拼多多、瑞幸咖啡
• 生活服务：美团、滴滴出行、同城到家
• 工具效率：腾讯文档、石墨文档、滴答清单
• 政务民生：健康码、电子社保卡、交通违章查询

设计规范

尺寸单位

• 使用 rpx（responsive pixel）：750rpx = 屏幕宽度，适配不同分辨率
• 字号推荐使用 rpx，间距推荐使用 rpx

组件规范

• 微信小程序提供丰富的原生组件：<view>, <text>, <image>, <scroll-view>, <swiper>, <map>, <canvas> 等
• 表单组件：<input>, <textarea>, <picker>, <switch>, <slider>, <checkbox>, <radio>
• 导航组件：<navigator>, <tab-bar>（自定义 TabBar 支持）

导航模式

• TabBar 导航：底部标签栏切换（app.json 中 tabBar 配置）
• 堆栈导航：wx.navigateTo（可返回）/ wx.redirectTo（不可返回）/ wx.reLaunch（重置）
• 页面栈最大深度：10 层

主题与暗黑模式

• 支持 darkmode 配置（app.json 中声明）
• 可通过 @media (prefers-color-scheme: dark) 适配样式

审核规范

常见被拒原因

1. 类目不符：小程序内容与所选类目不匹配
2. 虚拟支付：iOS 上不得提供虚拟商品购买（实物商品可用微信支付）
3. 用户隐私：收集用户信息未明示或未获授权
4. 网页套壳：仅嵌入 H5 网页而无原生体验
5. 内容违规：含政治敏感、色情、赌博等违禁内容

审核周期

• 首次提交：通常 2-3 天
• 版本更新：通常 1-2 天
• 个人主体 vs 企业主体：企业主体审核更宽松

个人主体限制

• 不支持微信支付
• 不支持直播能力
• 类目选择受限（不能选"餐饮""医疗"等）

开发指南

快速上手

最小可运行示例：

// app.js
App({
  onLaunch() {
    console.log('小程序启动')
  }
})

// pages/index/index.js
Page({
  data: { msg: 'Hello 微信小程序' },
  onLoad() {
    console.log('页面加载')
  }
})

// pages/index/index.wxml
<view class="container">
  <text>{{msg}}</text>
  <button bindtap="handleTap">点我</button>
</view>

常见陷阱

1. setData 性能：频繁调用 setData 会造成渲染阻塞，建议合并更新；数据量不宜超过 64KB
2. 页面栈限制：最大 10 层，超出需使用 wx.redirectTo 或 wx.reLaunch
3. wx.request 并发限制：最多 10 个并发请求
4. onShareAppMessage 必须定义：否则右上角菜单不会出现"转发"选项
5. npm 使用：需要先在开发者工具中"构建 npm"才能引用 node_modules
6. rpx 在 iPhone X+ 的表现：底部安全区域需额外适配（env(safe-area-inset-bottom)）

从支付宝迁移

微信 AI 小程序（小程序 AI 开发模式 · beta）

微信在 2026 年开放了小程序 AI 开发模式（内测）：开发者把小程序的业务能力抽象成「原子接口 + 原子组件」，封装为 SKILL，供小程序 AI（微信内置的 AI 助手）在对话中调用。用户与小程序 AI 对话时，AI 通过小程序 MCP 协议推理并选择合适的原子接口执行，再把结果整合返回给用户。

⚠️ 当前为内测阶段：小程序 AI 开发模式的代码尚未开放提审。请勿将该模式相关代码合入正式版本提交审核，否则会影响正常版本发布。

两种接入方式

在「微信公众平台 → 基础功能 → AI 能力」或小程序「微信开发者助手 → 管理 → 微信 AI 管理」中选择接入模式并申请。

核心概念

• 小程序 MCP：向小程序 AI 暴露可调用能力的协议（适配小程序开发，不同于标准 MCP）。开发者提供完整 SKILL 实现，AI 据此推理并执行原子接口。
• 原子接口（Atomic Interface）：最小执行单元，封装单一业务功能，标准化入参/出参，运行在微信客户端内独立的 JS 环境中（不是小程序运行环境）。
• 原子组件（Atomic Component）：原子接口的可视化单元，把返回的结构化数据渲染为 GUI 卡片，展示在对话流中（暂不支持调试）。
• SKILL：完成特定场景任务的完整能力封装。一个小程序可声明最多 30 个 SKILL，每个 SKILL 含业务说明、能力声明与实现。

app.json 配置

每个 SKILL 必须放在独立分包中，并全局开启按需注入 lazyCodeLoading，通过 agent 字段声明 SKILL 列表与全局提示词：

// app.json
{
  "lazyCodeLoading": "requiredComponents",
  "subPackages": [
    { "root": "skills-pkg", "independent": true, "pages": [] }
  ],
  "agent": {
    "instruction": "skills-pkg/AGENTS.md",
    "skills": [
      { "name": "weather", "description": "查询天气业务", "path": "skills-pkg/weather-skill" },
      { "name": "shopping", "description": "购物业务", "path": "skills-pkg/shopping-skill" }
    ]
  }
}

agent.instruction 指向全局提示词（AGENTS.md，≤ 10000 字节，非必填），用于说明服务范围、行为逻辑、回答风格，以及多个 SKILL 之间的关联关系，帮助模型选择合适的 SKILL。

SKILL 目录结构

skills-pkg/weather-skill
├── SKILL.md          # 业务说明（单文件，不支持引用其他 md，≤ 16000 字节）
├── index.js          # 注册本 SKILL 所有原子接口（必填）
├── mcp.json          # 模型可调用能力声明（必填，≤ 24000 字节）
├── apis/             # 原子接口实现（建议）
└── components/       # 原子组件实现（建议）

mcp.json 中每个原子接口用 JSON Schema 声明 inputSchema / outputSchema，并通过 _meta.ui.componentPath 指定渲染组件（路径相对 SKILL 目录）：

{
  "apis": [
    {
      "name": "getWeather",
      "description": "查询某地未来一段时间的天气",
      "inputSchema": {
        "type": "object",
        "properties": {
          "location": { "type": "string", "description": "地点，如城市名或经纬度；不传默认取当前位置" },
          "days": { "type": "number", "description": "预报天数 1-15，默认 7" }
        }
      },
      "_meta": { "ui": { "componentPath": "components/weather-card" } }
    }
  ]
}

name 必须与 index.js 中导出的原子接口函数名一致。计算 mcp.json 长度时会除去所有 outputSchema 字段及空格、换行符。

登录态与调试

• 登录身份与原小程序一致：可通过 storage 接口共享小程序内的登录凭证，也可在原子接口中调用 wx.login / wx.getPhoneNumber 等完成登录。
• 调试：需下载微信开发者工具（Nightly Electron Build 最新版），按调试指南开发接入；原子组件暂不支持调试。
• 能力范围：该模式支持小程序环境下绝大部分内置组件与 API，并新增若干模式特有 API（详见组件 / API 支持列表）。

AI 小程序成长计划（2026）

微信 2026 年推出「AI 小程序成长计划」，覆盖线上工具、AI 原生及娱乐类小程序，提供混元大模型 Token 额度（1 亿）、免费云开发资源与 AI 算力支持，激励期为 2026 全年。

官方文档

• 接入指南（能力介绍）：https://developers.weixin.qq.com/miniprogram/dev/ai/guide.html
• 接入方式：https://developers.weixin.qq.com/miniprogram/dev/ai/integration.html
• 运行机制：https://developers.weixin.qq.com/miniprogram/dev/ai/operating-mechanism.html
• 调试指南：https://developers.weixin.qq.com/miniprogram/dev/ai/debugging.html
• 最佳实践：https://developers.weixin.qq.com/miniprogram/dev/ai/best-practices.html
• 组件支持列表：https://developers.weixin.qq.com/miniprogram/dev/ai/reference/component.html
• API 支持列表：https://developers.weixin.qq.com/miniprogram/dev/ai/reference/api.html
• 评测指南：https://developers.weixin.qq.com/miniprogram/dev/ai/evaluation-guide.html

生态资源

推荐框架

推荐 UI 库

社区资源

• 官方社区：developers.weixin.qq.com/community
• 微信开放社区：活跃的开发者问答社区
• GitHub Trending：搜索 wechat-miniprogram 可找到大量开源项目

版本更新

近期重要变更

• 基础库 3.x：支持 Skyline 渲染引擎，性能大幅提升
• 自定义组件：支持 Component 构造器、组件间通信、Behaviors 混入
• 小程序云开发：Serverless 能力，免鉴权调用云函数/数据库/存储
• 订阅消息：替代模板消息，需用户主动授权