这是第十六篇笔记,也是“动手实践”系列的第二篇。
上篇我用AI做了个治愈动画,这次挑战升级——做一个能用的微信小程序。
名字我都想好了,叫“这顿吃什么”。每天纠结午饭吃啥,就让小程序帮我随机选一个。听起来简单,但放在一个月前,我绝对不敢想自己能做出来——毕竟我是个连HTML都看不懂的小白。
结果呢?我花了一个下午,真把它做出来了。全程没写一行代码,全靠和AI“聊天”。
做小程序需要编程工具。教程推荐的是Trae,字节跳动出品的AI编程工具,免费,而且有中文界面。
下载、安装、登录,一路下一步。点开右上角设置,把语言切成中文,初始工作就完成了。
整个过程和下载一个普通软件没什么区别。我原本有点紧张——怕打开后全是看不懂的英文和代码界面。结果还好,就是一个干干净净的对话框。
Trae的核心功能,就是通过对话让AI自动生成代码。
我建了一个空文件夹作为项目目录,然后在右侧的聊天框里输入需求:
“我想做一个微信小程序,名字叫‘这顿吃什么’,功能是点击按钮后随机帮我选择一种正餐或零食。”
写完后,点了一下“优化输入内容”,AI自动把我的话润色得更清晰。然后发送。
等待了大概两三分钟,屏幕上开始出现代码文件。左边目录里,一堆我不知道名字的文件自动生成了。绿色的数字代表新增的代码行数,红色是删除的。我完全看不懂,但也不需要看懂。
我们是不懂编程的小白,不需要审阅每一行代码,交给AI就行。
代码是生成了,但我完全看不懂,以后想改点东西怎么办?
我继续在对话框里输入:
“请帮我给重要的代码加上中文注释,方便我理解。另外生成一个README文档,用于后续维护。”
AI开始在每行代码旁边加注释。比如有一段代码原本是 items: ['披萨', '汉堡'],注释写的是“这里可以修改食物选项”。
它还自动生成了一份README文档,里面详细写了这个小程序的实现逻辑。比如“如果想增加新的食物类型,可以在 app.js 文件的 foodTypes 数组里添加”。
我按照它说的,找到那个位置,果然看到了一串列表:饺子、三明治、沙拉、披萨……我随手加了“螺蛳粉”,保存。
零基础的我也能看懂、能修改了。这种感觉很神奇——以前觉得编程是魔法,现在发现,只要有AI帮忙,魔法咒语也能自己改几句。
小程序代码有了,但怎么看到它长什么样?
教程里说,需要用到微信开发者工具——微信官方提供的工具,可以在电脑上预览小程序效果。
下载、安装、扫码登录,然后新建项目,把刚才那个文件夹选进去。点开的一瞬间,界面里弹出一堆红色报错。
我第一反应是:完了,哪步错了?
但教程里提前打了预防针:指望AI一次性生成完美代码是不现实的。遇到问题别慌,把报错信息复制给AI就行。
我照做,把调试器里的错误提示复制下来,粘贴到Trae的对话框里,点发送。
AI开始分析,然后自动修改了几处代码。我点“全部接受”,回到微信开发者工具,报错消失了。
模拟器里出现了小程序的预览界面——一个简单的页面,写着“这顿吃什么”。还有正餐和零食两个选项。
我点了一下正餐。
页面随机显示出来了:“烧烤”。
再返回选一下零食
显示:“冰淇淋”。
还可以选择其他手机型号展示
虽然界面很简单——白色背景,几个字,一个emoji,几个按钮——但这是我亲手“做”出来的小程序。虽然一行代码都没写,但我知道怎么改里面的食物选项,知道出了问题该找谁修。
这种“我能控制它”的感觉,比直接下载一个App要奇妙得多。
做完之后的几点感受
第一,AI编程和我想象的不一样。
我原以为“用AI编程”就是AI把代码写好,我什么都不用管。但实际操作下来,更像带一个实习生——你告诉它想要什么,它生成初稿;你发现有问题,把错误反馈给它,它修改;你想加点功能,告诉它,它帮你加。
我不需要懂代码,但需要懂“怎么和AI沟通”。
第二,门槛真的被拉平了。
以前想做个小程序,得学编程语言、学开发框架、学怎么部署上线,没几个月下不来。现在呢?一个下午,一个对话框,搞定。
当然,我做的是最简单的那一类。想做个复杂的、漂亮的、用户量大的,肯定还得学更多。但至少,“从0到1”这一步,被AI抹平了。
第三,最难的部分,还是“想清楚要什么”。
和AI聊的时候我发现,最耗时间的不是等它生成代码,而是想清楚:我到底想要个什么东西?功能是啥?界面长啥样?按钮点完之后发生什么?
如果我自己都没想明白,AI再聪明也帮不上忙。这和写提示词做图是一个道理:限制从“能不能做到”转向了“知不知道想要什么”。