用 AI 做微信小程序：从注册到上线实战

最后更新 2026-06-25

你将学到

知道原生小程序、uni-app、Taro 三条路各自适合谁，能做出技术选型决策
学会用 AI 工具从页面到逻辑一步步搭小程序，掌握真实的提需求写法
了解微信云开发和自建后端各自的取舍，选出 MVP 阶段最省力的方案
知道小程序审核/类目/包体积/授权登录等特有坑，避开常见翻车点

朋友上个月找我说：想做个工具，帮用户在手机上快速计算装修预算，不想让人下载 App，但微信里打开就能用。我说：做小程序。他问：要学多久？我说：你用 AI，一周能搭出来。

小程序是国内触达用户速度最快的载体。不需要应用商店审核等一个月，不需要用户下载，扫码或者搜索就进去了。对于 MVP 验证来说，这个发布链路比 App 短得多。

和做网站不一样的地方在于：小程序跑在微信的 WebView 容器里，有自己的组件体系和 API，不是标准的 HTML/CSS/JS 那套，有一套你要适应的规则。好消息是 AI 工具对这套规则的掌握程度相当不错，你描述清楚，它能生成能跑的代码。

技术选型：三条路，以熟悉为准

做微信小程序有三条路，选哪条取决于你的背景和目标：

1. 原生小程序

微信官方的框架，WXML + WXSS + JS，语法专属，学习曲线有一点，但文档最全，审核也最顺畅。如果你只做微信小程序、没有跨端需求，原生是最稳的。

2. uni-app

用 Vue 语法写，能编译成微信小程序、支付宝小程序、H5、App 等多个平台。如果你有 Vue 基础，或者将来要出多端，uni-app 是首选。AI 工具对 uni-app 的支持也很成熟。

3. Taro

用 React 语法写，同样支持多端。如果你的背景是 React，Taro 的学习曲线更平。

结论：以你熟悉的为准。没有绝对最优解，重要的是你能看懂 AI 生成的代码、能调试。AI 工具（Cursor、Claude Code）对这三套都有很好的支持，语法改一下，主体流程一样。

下面的例子以原生小程序为主讲流程，因为它的底层概念最清晰，学完之后理解 uni-app/Taro 更容易。

第一步：注册小程序账号

去微信公众平台（mp.weixin.qq.com）注册账号，选"小程序"类型。需要：

一个没有注册过微信开放平台的邮箱
填写主体信息（个人或企业）
个人主体可以注册，但部分类目只对企业主体开放（后面说）

注册完之后，进入后台找到 AppID，这个 ID 是你项目的身份证，后面配置开发工具和提审都要用。

第二步：装好开发工具

下载微信开发者工具（官网：developers.weixin.qq.com），安装后用微信扫码登录，新建项目时填入你的 AppID。

开发者工具自带模拟器，可以在电脑上预览页面效果，但真实体验要用真机预览（后面第五步说）。

第三步：用 AI 搭页面

工程建好之后，用 Cursor 或 Claude Code 打开项目文件夹，开始对 AI 提需求。

原生小程序的文件结构是这样的：

pages/
  index/
    index.wxml    ← 页面结构（类似 HTML）
    index.wxss    ← 页面样式（类似 CSS，不支持所有 CSS 选择器）
    index.js      ← 页面逻辑（生命周期、事件）
    index.json    ← 页面配置
app.js            ← 全局逻辑和生命周期
app.json          ← 全局配置（路由、导航栏）
app.wxss          ← 全局样式

搭页面时，AI 最需要你告诉它的是：页面长什么样、有哪些交互。越具体越好。

真实提法示例（搭一个预算计算页）：

我在做一个微信小程序，帮用户估算装修预算。
请帮我写 pages/index/index.wxml 和 index.wxss：

页面结构：
- 顶部一个标题"装修预算估算"
- 一个输入框，用户填写面积（平方米，数字输入）
- 一个下拉选择器，选装修风格（简约/现代/轻奢/全包豪华）
- 一个"开始估算"按钮
- 按钮下方，结果区域显示"预计总价：xx 元"

样式要求：
- 整体留足内边距，背景白色，字体大小适中
- 按钮用微信绿（#07C160），圆角
- 结果区域用浅灰背景块包裹，字体稍大

只写 WXML 和 WXSS，不写 JS 逻辑，我下一步单独来。

注意"只写 WXML 和 WXSS，不写 JS 逻辑"——把页面和逻辑分开两步，能让 AI 专注在一件事上，生成质量更稳定。

第四步：用 AI 写逻辑

页面结构搭完，再让 AI 写 JS 部分：

真实提法示例（写计算逻辑）：

帮我写 pages/index/index.js 的逻辑：

数据（data）：
- area: ''（面积，字符串，绑定输入框）
- style: '简约'（装修风格，绑定 picker）
- result: ''（计算结果）

计算规则（每平方米报价）：
- 简约：800 元
- 现代：1200 元
- 轻奢：1800 元
- 全包豪华：2500 元

事件：
- onAreaInput：更新 area
- onStyleChange：更新 style（picker 的 bindchange 事件，e.detail.value 是索引）
- onCalculate：用 area × 单价计算，结果赋给 result，
  如果 area 不是正数，wx.showToast 提示"请输入有效面积"

页面加载时 result 为空，不显示结果区域（用 wx:if 控制）。

这个提法的关键：把 data 结构、事件名、计算规则全部写清楚。AI 拿到这些信息之后能一次性生成可用的逻辑，不需要你再来回补充。

第五步：接后端——云开发 vs 自建后端

如果你的小程序只是纯前端计算（像上面的预算估算），可以跳过这步。

但如果需要存数据、用户历史记录、服务端验证，就要选一个后端方案：

方案 A：微信云开发（推荐 MVP 首选）

云开发是微信提供的 BaaS 服务，集成了数据库、云函数、云存储，在小程序开发者工具里直接开通，不需要自己搭服务器。

优点：不需要域名、不需要备案、不需要 SSL，接入快。缺点：跟微信生态深度绑定，迁移成本高，免费额度有限。

真实提法示例（用云开发存记录）：

我在用微信云开发。帮我写一个云函数 saveRecord，把用户的计算记录存入数据库：

数据库集合名：budget_records
字段：
- openid（从 cloud.getWXContext() 取，不要前端传）
- area（number）
- style（string）
- totalPrice（number）
- createdAt（Date.now()）

前端调用示例也给我，用 wx.cloud.callFunction 调用这个云函数。

方案 B：自建后端

如果你已经有 API 服务，或者不想绑定云开发，可以在小程序里调用自己的接口。注意：小程序只能请求已经在后台配置了的域名（request 合法域名），本地开发时要勾选"不校验域名"选项。

第六步：真机预览

在微信开发者工具顶部点"预览"或"真机调试"，用微信扫码，就能在手机上看到真实效果。这一步要早做，别等到最后——小程序在真机上的渲染细节和模拟器有差异，早发现早修。

真机调试模式下，手机屏幕上会出现 vConsole 面板，可以看到 console.log 输出和网络请求，调接口问题时非常有用。

第七步：提审上线要点

小程序上线需要经过微信的代码审核。几个关键点：

类目和资质：上传代码之前要在后台选好服务类目，不同类目对主体和资质的要求不一样。有些类目（比如医疗、金融、游戏、直播）需要额外的行业资质才能选，个人主体无法选某些类目。具体以微信官方文档为准，官方会实时更新。

审核内容：微信审核会检查小程序的实际功能是否和描述一致，截图也需要真实反映功能。

测试账号：如果有登录或特殊操作，提审时要填写测试账号供审核员使用，否则审核员进不去功能页会直接打回。

合规要求：隐私政策和用户协议是必须的，索取手机号、地理位置等授权要有明确说明，不能强制要求用户授权才能用基础功能。

小程序特有的坑

做过网页再来做小程序，有几个地方容易被绊倒：

1. 审核规范很细

小程序审核比 App Store 快，但规则同样严格。常见被拒原因：功能描述与实际不符、有诱导分享或诱导关注行为、使用了不合规的弹窗方式、涉及某些受限内容（博彩、招聘等类目有特殊要求）。第一次提审前认真读一遍《微信小程序平台运营规范》，以官方最新版本为准。

2. 包体积限制

小程序主包有大小限制，分包后单个分包也有限制（具体数值以官方文档为准）。图片不要直接放进包里，用 CDN 外链；如果功能多，要规划好分包策略。AI 工具可以帮你分析哪些模块可以做成分包：

提法示例：

我的小程序主包目前 2.8MB，已经超限。帮我分析 pages/ 目录下哪些页面用户不在首次加载时访问，
给出一个分包建议，包括如何修改 app.json 的 subpackages 配置。

3. 授权登录和 openid

微信的用户体系和普通网站不一样。小程序登录流程是：前端调 wx.login() 拿到 code → 把 code 传给服务端 → 服务端用 code 换 openid + session_key。openid 只能在服务端拿，不能前端直接获取，这个流程很多人没搞清楚。

如果用云开发，cloud.getWXContext() 帮你封装了这一步，比自建后端简单。

4. 支付需要资质

微信支付不是小程序自带的，需要单独申请微信支付商户号，要求企业主体，有审核流程，不是即申即用。MVP 阶段如果还没申请下来，先用"联系客服"或"预约咨询"代替支付按钮，等资质到位再接。

5. CSS 不完全支持

WXSS 不支持通配符选择器（*）、部分伪类、部分 CSS 变量写法，flex 布局是最安全的方案。遇到样式不生效，先查微信官方文档确认该属性是否支持，再问 AI。

故障排查表

症状	可能原因	排查方向
真机上样式和模拟器不一样	某些 CSS 属性在真机 WebView 上不支持	改用 flex 布局，避免用不兼容的 CSS；在真机调试模式查具体报错
request 请求直接报错，不走网络	接口域名没有配置到小程序合法域名列表	后台「开发管理 → 开发设置 → 服务器域名」添加你的域名；开发阶段勾选"不校验合法域名"
云函数调用无响应或报云函数不存在	云函数没有部署，只写了代码没上传	右键点击云函数目录 → "上传并部署：云端安装依赖"
wx.login 拿到的 code 过期或失效	code 只有 5 分钟有效期，不能复用	每次需要 openid 时重新调 wx.login，不要缓存 code
提审打回，提示功能描述不符	截图和实际功能不匹配，或测试账号未填	更新截图为真实页面截图，在提审表单里填写可用的测试账号

常见问题

Q：不会原生小程序，只会 Vue，能直接用 uni-app 吗？

完全可以。uni-app 的 Vue 2/3 语法和你熟悉的基本一样，框架文档也很完善。AI 工具（Cursor / Claude Code）对 uni-app 的支持很好，提需求时说明"我用 uni-app"就行。如果你参考这篇用 AI 从 0 做一个 SaaS 的提需求方式，迁移到 uni-app 的流程是一样的。

Q：个人主体可以做小程序吗？

可以注册，也可以开发和发布。但部分类目（电商、金融、医疗等）只对企业主体开放，个人主体能选的类目有限制。如果你的业务需要这些类目，需要先注册公司。具体限制以微信官方最新规定为准。

Q：MVP 阶段最应该砍掉什么？

分享功能（可以有但不做复杂的裂变逻辑）、用户中心（先只存必要数据）、消息通知（订阅消息申请流程麻烦，MVP 阶段不必要）、复杂的积分或等级体系。这些都是验证核心价值之后再加的东西，先让核心流程跑通。

Q：AI 生成的小程序代码跑不通，怎么调？

两步：一是把完整报错信息贴给 AI，不要只说"报错了"——包括控制台的错误文字、出错的文件和行号；二是打开真机调试的 vConsole，看实际的 network 请求和 console 输出，比描述问题更直接。参考这篇用 AI 做表单机器人和自动化工具里关于调试循环的方法，小程序调试逻辑是一样的。

Q：提审多久能过？

通常 1-3 个工作日，但遇到节假日或者类目敏感会更慢。如果被拒，后台会有具体原因，按原因修改后可以重新提审，不需要重新排队。

下一步

这一节讲的是从注册账号到小程序上线的完整路径。

小程序上线之后，你会遇到两类新问题：用户从哪里来（搜索、扫码、朋友圈分发），和怎么把用户转化成付费（对于工具类，变现路径和 SaaS 不太一样，小程序内的虚拟商品支付有特殊规则）。这些是后续运营和变现阶段的内容。