乐于分享
好东西不私藏

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

工具实战|第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 做个什么样的小程序?评论区聊下你的想法,我能帮你想想怎么实现!