工具实战|第3期 完全靠AI开发一个微信小程序 一文教会你
【☆】工具实战 | 第3期

今年听过好多朋友在讨论:
“我不是程序员,但我有个小想法,能用AI做成小程序吗?”
“想给家人做个记账小工具,需要学多久编程?”
“开店的,想做个点菜小程序,手把手教我行吗?”
好消息是:在 2026 年的今天,不懂编程的人也能开发出小程序。你不需要学代码,只需要描述你的想法。
今天这篇文章,我将手把手教你使用开源的 AI 编程工具 OpenCode,开发你的第一个微信小程序。全文也将为你举出5个好玩实用的小程序选题建议。
听上去很复杂?别担心。全文每一步都有具体的操作说明,保持耐心跟着做,一下午就能搞定。
一、先认识一下我们的工具:OpenCode
如果你看过我前面写的文章,应该知道 Claude Code、Codex 这些 AI 编程工具。OpenCode 就是它们的开源平替版。
|
OpenCode 是什么? 一个完全开源的 AI 编程助手,能在终端里通过自然语言写代码、改 Bug、做项目。GitHub 上已经拿到 5 万+ Star。 为什么选它?三个理由:完全免费、内置 4 个免费模型(GLM-4.7、Grok Code Fast等)、新手友好。 |
换句话说:它是一个不花钱的 AI 编程助手。对于我们想试试水的读者来说更合适。
二、开始前,准备两个工具
整个开发流程只需要两个工具:
工具一:OpenCode(AI 编程助手)
打开官网 https://opencode.ai/download,根据你的电脑系统下载桌面版(支持 Mac / Windows / Linux)。安装好之后打开,选择一个免费模型,就能开始使用。
推荐使用 Qwen3.6-Plus,这是阿里专门增强了编码能力的模型,免费而且对中文理解更好。
工具二:微信开发者工具
这是微信官方的小程序开发工具,用来预览和发布小程序。打开 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html,下载安装。
首次使用需要用微信扫码登录。如果你还没有小程序账号,去 https://mp.weixin.qq.com 先注册一个(个人账号免费,用邮箱就能注册)。
三、手把手开发:以「记账小工具」为例
为了让你看到完整流程,我们以一个简单的「记账小工具」为例。整个过程分五个步骤。
Step 1:先让 AI 帮你梳理需求
这一步非常重要!不要一上来就让 AI 写代码,而是先让它帮你想想。
打开 OpenCode,新建一个项目文件夹(比如在桌面创建一个名为 my-app 的空文件夹),然后在 OpenCode 中打开这个文件夹,输入以下提示词:
|
提示词模板(需求梳理): 我想开发一个微信小程序,是一个个人记账工具。 功能包括: 1. 添加记账(金额、类别、备注、日期) 2. 查看所有记账记录 3. 按月份统计支出总额 你先不要写代码,先给我列出: – 项目需要的文件结构 – 主要页面有哪些 – 数据如何存储 – 开发顺序建议 |
AI 会给你一份详细的方案。这一步的目的是:确认需求、让 AI 理解你想做什么。有了图纸再盖房子,不会踩坑。
Step 2:让 AI 生成完整代码
确认完方案之后,对 AI 说:
|
提示词模板(生成代码): 好的,按你刚才的方案,帮我生成完整的微信小程序代码。 要求: 1. 使用微信小程序原生语法(WXML + WXSS + JS + JSON) 2. 数据存储用微信的 wx.setStorageSync(本地存储) 3. UI 样式简洁美观,使用白色极简风 4. 每个文件都标注清楚的文件名和路径 结果每一步都写下来,方便我检查。 |
AI 会自动生成项目的所有文件:app.js、app.json、app.wxss、各个页面的代码。这个过程可能需要几分钟,耐心等待。
Step 3:在微信开发者工具中打开项目
打开微信开发者工具,点击「导入项目」,做四件事:
•项目目录:选择刚才的 my-app 文件夹
•AppID:填你的小程序 AppID(在微信公众平台看),暂时没有可以选「测试号」
•项目名称:随便填,比如「我的记账本」
•点击「确定」
如果这一步没有报错,你已经能在模拟器中看到小程序的页面了。
Step 4:测试、改错、继续完善
这一步是精髓。刚生成的代码多半有小问题——按钮点不了、样式丑、数据存不上。不要怕。自己试,找问题,丢给 AI 修。
比如你发现「添加记账」按钮点击后没反应,把问题复制给 AI:
|
提示词模板(排查问题): 我在微信开发者工具里点“添加记账”按钮,没有反应。 控制台报错:[粘贴错误信息] 请分析可能的原因,并修改代码。 |
记住一个原则:遇到问题不要自己猜,直接把错误信息复制给 AI。AI 分析错误的效率比你高很多。
Step 5:预览、体验、发布上线
代码没问题了,你可以做这几件事:
•预览:在开发者工具点「预览」,用你的微信扫码,就能在自己手机上体验。
•真机调试:手机扫码后打开小程序,用真实数据跑一遍。
•分享体验:点「上传」上传代码到微信后台,然后在微信公众平台「开发管理 > 开发版本」中,添加体验成员,朋友就能用你的小程序了。
•正式发布:提交审核(一般 1-7 天),通过后所有微信用户都能搜到你的小程序。
四、五个好玩又实用的小程序选题推荐
学会了开发流程,接下来就是“做什么”的问题了。推荐五个新手友好、效果又好的方向:
选题一:个人记账本
上面用的例子。每个人都需要,数据存在手机本地,不需要服务器。
加分点子:加个「月度消费图表」功能,用饼状图展示各类别占比。
选题二:家庭美食菜谱本
记录自家做的拿手菜。每道菜有图片、步骤、食材。可以按口味、时间筛选。
加分点子:让 AI 帮你接入微信的 AI 接口,自动根据食材推荐菜谱。
选题三:约会记忆小助手
情侣用的小程序。记录第一次见面、纪念日、第一次一起去的地方、照片等,自动计算在一起的天数。
加分点子:作为纪念日礼物送给对象,比买什么都感人。
选题四:习惯打卡小程序
跑步、读书、背单词、喝水这些习惯打卡。简单的点击即可打卡,点亮当日的徽章。
加分点子:加个「分享到朋友圈」的成就海报生成功能,准备好当分享神器。
选题五:小商户订单安排
若你开店、做手工、或者接个小生意。记录客户信息、预订时间、订单状态,比手写本子效率高几倍。
加分点子:加个到时提醒功能,不会再忘记客户预约。
五、开发心得:三个经验让你少踩坑
经验一:小步迭代,不要想一口气吃成胖子
不要一开始就让 AI 写一个完整的项目。而是分成小步骤:先把加法功能跑通,再加查看列表,再加统计图表。每完成一块跑一下,跑通再做下一步。
经验二:多多报错、复制错误给 AI 看
开发者工具的“控制台”每次报错,把错误原文复制给 AI。不要自己描述「好像不对了」、「加不上」,AI 看原文比看你描述准多了。
经验三:要求记录进度到文档
在项目文件夹根目录让 AI 创建一个PROGRESS.md 文件,记录完成了哪些、还要做哪些。每次继续开发前先让 AI 读这个文件,它就能记住上次的进度。
写在最后
五年前,开发一个微信小程序需要学 3 个月编程、读完微信官方文档、自己手写每一行代码。一个简单的记账小程序至少要花你一周周末。
今天,你只需要描述需求、跟着五个步骤做、耐心和 AI 迭代,一个下午就能做出小程序。
不是说你变强了,而是 AI 的进步让这个门槛消失了。
这其实就是 2026 年最积极的信号之一:将想法变成产品的能力,从「少数人的特权」变成了「所有人的权利」。
试试看。把你一直想做的那个小程序,今天下午就做出来。
本期术语卡片
|
OpenCode开源 AI 编程助手 SST 团队出品的开源 AI 编程工具,类似 Claude Code 但完全免费,内置多个免费模型。支持 Mac/Windows/Linux。 |
|
微信开发者工具微信小程序官方开发 IDE 用来预览、调试、发布小程序的工具。微信官方出品、免费、必需安装。 |
|
AppID小程序应用 ID 每个微信小程序的唯一标识,去微信公众平台 mp.weixin.qq.com 用邮箱注册一个个人账号即可免费获取。 |
|
WXML / WXSS微信小程序的前端语言 WXML 类似 HTML,负责页面结构;WXSS 类似 CSS,负责样式。不用你学,AI 为你写。 |
|
关注「AI奇妙实验室」 每天一篇,和你一起探索AI的奇妙世界 |
|
【评论】你想用 AI 做个什么样的小程序?评论区聊下你的想法,我能帮你想想怎么实现! |
夜雨聆风