10+年产品经理聊聊产品、测测产品,产品人交流学习成长平台,按 Ctrl+D 收藏我们
关于我 留言板 小程序 标签云

苏米客

  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
  • 登录
  • 首页
  • AIGC
    • AI最新动态
    • AI学习教程
    • AI工具集合
    • AI产品百科
    • AI编程开发
    • AI提示词
    • AI开源项目
    • AI智能体
  • Axure
    • Axure动态
    • Axure教程
  • 产品
    • 用户体验
    • 产品设计
    • 苏米杂谈
  • 资源
    • 产品UI组件库
    • 开源图标库
    • 中后台框架
  • 书单
    • AI书籍
    • 用户体验
    • UI视觉
    • 产品研究
    • 其他类型
  • 下载
    • Axure组件
    • Axure原型
    • 文档报告
    • 素材资源
当前位置: 首页 » AI学习教程

手把手教你 0 基础 10 分钟用 AI 开发微信小程序完整流程实战教程

1小时前 AI学习教程 12 0

摘要:本教程详解如何使用 AI 编程工具(Claude Code)在 10 分钟内开发一个微信小程序并上线。从工具准备、小程序注册、备案审核到开发、预览、上传,完整走通从 0 到 1 的全流程。适合零基础用户参考。

本文将用一个简单的 BMI 计算器例子,演示如何用 AI 编程工具 10 分钟开发一个计算类的微信小程序并上线。

工具准备

1. AI 编程工具

这里使用 Claude Code,目前顶级的 AI 编程工具之一。使用 Claude Code 不需要有 Claude 的账号,可以通过第三方服务使用。

2. 微信开发者工具

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

微信开发者工具下载页面

选择符合自己电脑版本的下载,安装完成后扫码登录,进入开发界面。

微信开发者工具主界面

3. 注册小程序

地址:https://mp.weixin.qq.com/

微信公众平台首页

点击"立即注册",选择"小程序",前往注册页面。

小程序注册入口

使用自己的邮箱注册,主体类型选择"个体"(个人开发者)。一个身份证可以注册 5 个小程序,每个小程序需要新的邮箱。

填写信息、备案、审核

注册完成后,用微信扫码进入小程序管理页面。

小程序管理后台

苏米注:开发前建议把信息备案和认证都完成,因为小程序备案会消耗 1-14 天,这个时间纯看审核速度。

1. 填写基本信息

填写小程序名称和头像,头像可以用 AI 绘图工具生成。

2. 申请类目

作为个人开发者,一般申请"工具"类目,因为工具类目不需要行业资质和证明。

点击右上角"添加类目",选择对应的类目即可。

3. 备案和认证

备案和微信认证是四个环节中最消耗时间的。根据提示上传所需材料:

  • 前置审批项:选择"以上都不涉及"
  • 发票选项:选择"不开发票"
  • 职业认证:选择"无"(可能会快一点)
  • 支付 30 元认证费用

全部完成后等待审核,审核速度因人而异,快则一天,慢则一周。

开发、预览、上传

1. 使用 AI 开发小程序

新建一个文件夹,打开 Claude Code,使用以下万能提示词模板:

帮我做一个微信小程序。功能是【一句话说清楚做什么】。
用户打开小程序后看到【首页是什么样的】,可以进行以下操作:
【操作 1】、【操作 2】、【操作 3】。
数据存储在本地。
界面风格要求【简洁/活泼/商务/其他】,主色调用【蓝色/绿色/红色/其他】。

以 BMI 计算器为例,完整提示词如下:

帮我做一个微信小程序,名称暂定为「BMI 计算器」。

功能是:让用户快速输入身高和体重,自动计算 BMI(身体质量指数),
并根据结果判断身体状态,帮助用户快速了解自己是偏瘦、正常、超重还是肥胖。

用户打开小程序后,首页看到的是一个简洁清爽的 BMI 计算界面,页面包含:
1. 小程序标题和一句简短说明,比如"快速计算你的 BMI 健康指数"
2. 身高输入框(单位:cm)
3. 体重输入框(单位:kg)
4. 一个醒目的"立即计算"按钮
5. 计算结果展示区域

用户可以进行以下操作:
1. 输入身高和体重,一键计算 BMI 数值
2. 查看 BMI 对应的身体状态,例如"偏瘦 / 正常 / 超重 / 肥胖"
3. 查看简单的健康建议,例如"建议保持运动""注意控制饮食""继续保持"

数据存储在本地,要求:
1. 自动保存用户最近一次输入的身高和体重
2. 用户下次打开小程序时,自动回显上次输入的数据
3. 不需要接入服务器,不需要登录注册

界面风格要求:简洁、清爽、易用,适合大众用户
主色调:蓝色

Claude Code 输入提示词

发送提示词后等待几分钟,AI 会自动完成小程序开发。

AI 开发完成输出

苏米注:这里使用的是国产 GLM-5.1 模型,实际开发时间约 5 分钟。使用不同的 AI 模型,开发速度可能有所差异。

2. 配置小程序 AppID

在小程序页面左下方点击名称进入设置,拉到底部找到"账号信息",复制 AppID。

获取小程序 AppID

将 AppID 提供给 Claude Code,让它帮忙配置:

帮我配置一下 AppID:[你的 AppID]

配置 AppID 到项目

3. 导入微信开发者工具预览

打开微信开发者工具,点击"导入"项目。

导入小程序项目

选择刚才 AI 创建的文件夹,会自动识别 AppID,点击"创建"。

确认 AppID 并创建项目

点击"信任并运行",右侧会显示小程序预览页面。

小程序预览界面

输入测试数据验证功能是否正常。

BMI 计算器测试运行

4. 上传代码

测试无误后,在微信开发者工具中点击"工具" → "上传"。

输入版本信息(如版本号 1.0.0、项目备注等),点击上传。

上传成功后,进入小程序管理后台的"版本管理"页面,可以看到提交的代码。

之后提交审核,审核完毕后即可上线发布。

注意事项

1. 选题很重要

想要小程序有流量,正确的选题和推广是关键。计算类、工具类小程序相对容易过审,但竞争也激烈。

2. 备案时间预留

小程序备案需要 1-14 天,建议提前完成,不要等到开发完才想起来。

3. 类目选择

个人开发者优先选择"工具"类目,避免需要行业资质的类目(如医疗、金融等)。

4. 测试要充分

上传前务必在微信开发者工具中充分测试,避免审核被拒。

总结

本教程带大家走完了小程序从 0 到 1 的完整流程:

  1. 准备工具:Claude Code + 微信开发者工具
  2. 注册小程序并完成备案审核
  3. 使用 AI 编写代码
  4. 导入微信开发者工具预览测试
  5. 上传代码并提交审核

整个过程最快可以在 10 分钟内完成开发,但备案和审核时间需要额外预留。

参考资料:

  • 微信开发者工具下载
  • 微信公众平台
声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。
未经允许不得转载:手把手教你 0 基础 10 分钟用 AI 开发微信小程序完整流程实战教程
#微信小程序 #AI 编程 #Claude Code #小程序开发 #零基础教程 
收藏 1
Obsidian 本地 AI 知识库实战指南:基于 Karpathy LLM Wiki 方法
Hermes Agent v0.10.0 从入门到精通,支持 MCP 协议与 16 个消息平台
推荐阅读
  • Cherry Studio + Skills 技能大公开(附 Agent 设计教程)
  • OpenRouter 免费 Qwen3.6-Plus 接入 OpenClaw 教程:2 种配置方法详解
  • Hermes Agent 微信配置完整教程:个人微信与企业微信接入指南
  • 手把手教你使用CV声音克隆工具(Clone Voice),完全免费、免部署、带WEB界面一键上传的声音克隆工具
  • 手把手教你用 OpenClaw + MiniMax-M2.1/GLM-4.7 + QQ/飞书快速搭建 AI 智能助手
评论 (0)
请登录后发表评论
分类精选
Cursor永久免费攻略:无限邮箱注册+重置机器码+Cursor试用期重置工具实现永久免费使用
46711 1年前
手把手教你如何使用扣子Coze搭建“文生图” AI Bot
19430 1年前
n8n新手入门指南:5 分钟本地部署 + 中文汉化 + 快速启动,玩转工作流(Docker版)
18218 10月前
安装字节Trae登录提示App Unavailable(应用程序不可用)解决办法,这份官方指南请收好!
17569 1年前
Gemini CLI 装好了,登录异常怎么办?手把手教你解决 Gemini CLI 登录问题
14685 10月前
零基础上手 VSCode + Claude Code + GLM-4.6 保姆级安装配置教程
14567 6月前
一文搞懂什么是 Vibe Coding?Vibe Coding工具推荐及Cursor编程开发实践
14163 11月前
AI 概念篇:Token是什么?一文讲清楚Token分词、窗口、计费与常用计算工具
13402 4月前
手把手教你使用 Gemini 2.5 Pro 免费 API搭建本地知识库,一键接入 Gemini!
13167 9月前
手把手教你快速入门OpenCode + GLM-4.7 + Oh-My-Opencode + Skills 安装配置与高效使用指南
11793 3月前

文章目录

关注「苏米客」公众号

订阅推送更及时,手机查看更方便
分类排行
1 Hermes Agent v0.10.0 从入门到精通,支持 MCP 协议与 16 个消息平台
2 手把手教你 0 基础 10 分钟用 AI 开发微信小程序完整流程实战教程
3 Obsidian 本地 AI 知识库实战指南:基于 Karpathy LLM Wiki 方法
4 Obsidian x Agent 终极指南,从零打造个人 Agent 系统
5 Hermes Agent 安装完整教程:一键部署 + 四种安装方式 + 问题急救指南
6 手把手教你在飞牛NAS部署Hermes Web UI 完整教程,Docker Compose 可视化部署方案
7 ima知识库+WorkBuddy 完全入门指南:30 分钟跑通你的 AI 工作流
8 手把手教你在飞牛NAS部署Hermes Agent 完整教程,彩SSH 原生安装方案详解
9 手把手教你从OpenClaw迁移至Hermes Agent 完整教程,3 步实现无缝切换
10 手把手教你 在Hermes 接入 NVIDIA 免费使用 MiniMax-m2.7 模型教程
©2015-2024 苏米客XMSUMI 版权所有 · WWW.XMSUMI.COM 闽ICP备14005900号-6
微信文章助手 程序库 免费影视APP 免费字体下载 Axure RP 10 免费Axure模板 Axure元件库下载 申请友联