「AI开发小程序教程」四、AI开发小程序(基础篇)

2026-05-20 | 5 分钟阅读 | 分类: 微信小程序

从本篇开始,我们就要正式进入小程序开发了。本篇主要会讲解使用AI开发微信小程序的基本方法和流程,从微信小程序原生开发开始,做一个简单的待办事项TodoList的小程序,并且不会涉及到服务器,所有将数据存储到本地。主要目的是让不是程序员的你们掌握最基本的AI编程方法。

对于非程序员来说,最大的挑战是不懂程序员熟知的那些词语,有时候不知道怎么向AI表达。但是如果我们把很多常见词语都讲完再开始的话,未免有些啰嗦了,所以我们直接进入开发阶段,遇到的时候再解释。好在现在的AI非常聪明,有时候不用说也能做得很好。

准备工作

你需要做以下准备

  • 一台电脑(Windows系统电脑或者苹果电脑都可以)
  • 安装Trae CN(字节跳动出品的AI编程工具软件)
  • 安装微信开发者工具(微信小程序官方的开发工具软件)

Trae CN界面介绍

图片

可以暂时不管代码区域,你现在只需要知道把你的要求打在聊天框里,然后按回车键发给AI就行。

虽然你可以直接在Trae中直接创建一个全新的空项目,然后直接告诉AI,从0开始实现一个微信小程序项目,但是我们暂且不这么做,先用微信开发者工具直接创建一个初始的微信小程序项目,防止一开始就遇到问题。

创建一个小程序项目

打开微信开发者工具,微信扫码登录后,新建一个项目(此图为旧版本界面,与新版差距不大)

图片

  1. 选择【小程序】
  2. 输入项目名称,最好不要用中文
  3. 选择项目保存的位置(比如D盘)
  4. 选择你注册过的微信小程序的AppID(一般情况下,你应该只注册了一个,直接选择就好。如果你已经为小程序设置了名称,那么可以看到名称)(AppID可以在小程序后台mp.weixin.qq.com-左下角小程序名称-账号设置-基本设置-账号信息部分找到)
  5. 开发模式选择【小程序】
  6. 选择【不使用云服务】,【微信云开发】实际上就是微信提供的云服务器环境,本教程我们全程不会使用这个
  7. 选择一个最简单的【JS-基础模板】
  8. 最后点击确定即可。

微信开发者工具界面介绍

图片

暂且只需要知道界面上这些区域是做什么的就行了。

让AI写代码

回到Trae软件中,打开刚刚创建的这个项目

图片

在弹窗中选择信任此作者

图片

然后开始跟AI聊天

图片

在聊天框中输入的内容可自由发挥,可以简单也可以复杂,可以模糊也可以清晰。但是尽量全面地描述你的需求。这里举几个例子:

简单版的(直接说明要实现的总目标):

实现一个代办事项TodoList的微信小程序

复杂且任务拆解清晰版的(目标+任务拆解+注意事项等):

这是一个使用微信开发者工具创建的全新微信小程序项目,实现一个代办事项TodoList的微信小程序,要求如下:

  • 一个待办事项列表页面
  • 一个新增待办事项页面
  • 数据存储在本地

回车发送之后,AI会开始思考,随后完成编码工作,你需要做的,就是点击✅来接受代码。

图片

AI完成工作后,会进行最后的总结,说明他做了什么,这里我选择直接接受代码

图片

在微信开发者工具中查看

现在AI已经完成了写代码的工作,这时候要回到微信开发者工具,看看AI的代码是否符合你的预期。

图片

不断完善

接下来的事情其实很简单,就是如果不符合你的预期,那就再回到Trae中,告诉AI哪里有问题,让他改

比如:

  • 列表页面XXX存在问题(某个页面上存在显示上的问题、功能上的问题之类的)
  • 微信开发者工具的调试器报错XXX(小程序无法正常运行,报出了错误,可以把错误扔给AI)
  • 把新增待办作为独立的页面(AI实现的不符合你的想法时)

总之就是:哪里不对改哪里。尽管跟AI聊就行。

然后AI改完后,再回到微信开发者工具看看效果,进行功能上的测试。直到满足你的预期。

上传代码

如果你觉得功能差不多了,目前小程序的代码还在你的电脑上,并不在微信的服务器上,所以你无法随时在手机上用,所以你需要上传这些代码。

图片

这里会弹窗,我们后续会操作这个提示,现在直接点确定即可

图片

图片

版本号规则:

  • 首次建议使用1.0.0
  • 版本号是增长的
  • 小问题的修复,尽量递增最后一位,如1.0.0 => 1.0.1
  • 小的功能的更新,尽量递增第2位,如1.0.1 => 1.1.0
  • 大的功能的更新,使用第1位,如1.1.0 => 2.0.0
  • 第二次以后的上传时,开发者工具中可以快捷操作版本号

图片

设为体验版

上传成功后,就可以在后台mp.weixin.qq.com看到

图片

当点击设为体验版时,会弹窗,让选择体验版路径,也就是小程序打开时的页面,通常选择首页就行

图片

注意这个页面路径,要和代码对应(一般是可以对应的),如果体验版打开时白屏,则需要检查一下

图片

设为体验版之后,会出现一个二维码,可以通过这个二维码随时进入体验版

并且可以让其他人进行体验,但你得先把别人设为体验用户才行,因为小程序还没有上线,还没对公众开放

通过以下操作添加体验成员后,你就可以把体验版二维码发给他进行体验了。

图片

小程序上线

体验版是可选的环节,你其实可以在上传代码后,直接提交审核,审核通过后,便可以上线,开放公众访问

图片

由于篇幅问题,使用AI开发小程序的基本方法教程就先到这里,但目前我们只是实现了一个很简单的东西,数据还都在本地存储,用户换了手机就没了,后面我们还会讲解更多内容,比如怎么云端保存用户的数据、小程序审核上线过程中的常见问题、小程序的运营宣传提升搜一搜排名等。

文章目录

鲁ICP备2023028957号鲁公网安备37059002000210