用AI做微信小程序的完整步骤
AI 视频教程

用AI做微信小程序的完整步骤

作者头像 人人都是产品经理 7小时前 111 阅读
4.8 (1280评分)
15,328人已学习

从需求梳理到代码生成,从组件搭建到上线发布,本文详细拆解用AI构建微信小程序的全流程,帮助产品人和开发者真正理解“AI工具链”的落地方式与协作边界。

之前拿AI开发了一套内部使用工具,开发过程确实非常高效便捷。然后,前段时间正好看到有人发了一个单页面的AI应用网页,于是调研了一下DeepSeek的API价格,发现挺便宜的,调用一次R1模型也就是1-2分钱。那就意味着搞个AI应用没啥成本,于是琢磨着搞个微信小程序玩玩,本篇记录了完整的步骤。

微信小程序注册

在微信公众号平台可以申请注册小程序,个人也是可以的。需要准备好如下资料:

  • 小程序名称:不能重复,不能侵权他人商标
  • 图标:小程序的图标,这个拿AI生成一个就行
  • 工信部备案:所有小程序都需要工信部备案,备案提交前微信团队会做初审,如果有问题会让你修改后再提交。提交后一般3-7个工作日会通过。没有备案不影响小程序的发布和上架,但是没备案的话无法被搜索。
  • 微信认证:需要填写认证资料,然后交30块钱。微信会委托第三方对个人信息进行核实。我开始认证为产品经理,结果没通过(第三方网站发布的文章截图不算数),快的话,选择认证身份为“无”就行了。

认证和备案没通过都不影响小程序开发和上线,只是影响分发(没通过限制50人/天)和搜索。注册号之后,从开发管理里获取AppID,这个在开发的时候会用到。

DeepSeek接口开通

在DeepSeek官网通过API开放平台进入,做完实名认证,充值就可以使用了,最低充值10元,门槛不高。

充值好之后,创建一个APIKey,方便在小程序利用这个APIKey来请求接口(注意不要泄露APIKey,否则其他人就可以用你的接口了)。

开发工具准备

我是用Visual Studio Code+TRAE AI代码插件来使用AI编程(两个都是免费的),然后在微信开发者工具中模拟测试,微信开发者工具可以在微信公众号平台的开发工具里下载,还需要安装Node.js (网址:https://nodejs.org/zh-cn/)。

不会安装或不会使用的没关系,问AI就行,他会告诉你怎么做,比如如何安装TRAE插件,可以这样问:Visual Studio Code如何安装TRAE插件?下面是AI的回答。

AI开发

TRAE有个自动化构建功能(Builder),也算一个Agent,对于不懂编程的推荐使用这个模式。因为编程的目录结构比较复杂,如果不懂的可能一开始目录结构就错了,会踩不少坑。

然后就是给AI聊天发开发任务了,我通常会这样描述开发任务:

1)这是一个什么项目:这是一个新的微信小程序项目(AI会基于项目类型构建对应的项目目录结构)

2)页面描述:前端界面的描述,比如我的小程序有两个界面,我会告诉AI,这个小程序有两个页面,第一个页面有xxx组件,组件排列的次序,组件前面的文字标签是什么,如果是输入组件输入的类型是什么(比如日期,开关,年份)。第二个页面也是类似。

3)交互描述:页面内的交互,比如是否要显示加载中,点击按钮提交前做什么处理(如表单验证),提交后处理,拿到接口结果后怎么处理。页面间如何跳转。

4)业务逻辑描述:比如提交按钮该请求什么接口,接口的关键参数是什么,像DeepSeek就可以把APIKey,使用的模型给到AI,他会自动编写调用DeepSeek的接口 —— 毕竟文档是他自家的。比如下面的DeepSeek接口调用是AI生成的,然后我改了一下参数。

基本上按照上面的步骤,在Buidler模式下就会给你生成一堆目录和代码,同时还会需要你执行一些命令行命令,你要做的就是确认(Accept就是接受修改,Run就是运行命令)就好了。然后项目目录就好了。这是我目前这个小程序的目录结构,大家可以参考一下。注意,需要在project.config.json文件中填写一下appid(也就是前面提到的小程序的AppID)。

所有这些都好了之后,就可以到微信开发者工具模拟运行。当然,一般来说会遇到一些问题。这个时候就把遇到的问题复制下来,扔给AI(切换到Chat模式),然后它会告诉你怎么处理。调试器打开后,可以在Console栏看到错误信息,把错误信息复制到TRAE里,然后告诉他说出现了错误:xxxx(复制的错误信息),AI就会帮你分析错误和提供解决方案。

模拟运行还会发现界面可能不那么美观,这个时候你可以要求AI修改某个界面的组件样式,比如:出生日期输入框的字体要是白色,90%的透明度。AI会给你生成样式,应用后就可以更改了。

按照上面的方式,多调整几次,就可以运行起来了。过程其实就是一个循环:调整->问题->扔给AI调整……

上架发布

调试没问题之后,就可以在微信开发者工具通过上传按钮提交版本,提交后在小程序后台能够看得到,可以设置为体验版,然后自己用真机验证一番。没问题就可以提交审核了,审核一般1个工作日,通过后就可以发布了。

我这个易说测测小程序就两个页面,大概花了1天时间完成全部过程,大家可以搜索体验一下。

后记

对于不懂编程的产品经理来说,前期可能会踩一些坑,建议多尝试用结构化的方式做表达,AI理解起来会更准确。然后就是,需求尽量明确(和我们自己做产品需求一样)。我个人就发现,出现偏差的时候往往是我的表述没那么明确,有时候AI会理解错,结果需要反复调整。

另外就是调用DeepSeek的prompt很关键,一个是对任务的prompt要清晰没有歧义,否则功能可用性就比较差。一个是对输出格式的要求,因为DeepSeek默认输出的是Markdown格式,不是结构化的字段,而且会夹杂AI自己的总结,在小程序里展示就不太好。我自己就是在调整输出HTML网页格式的时候花了不少时间,最后还是将需求丢给AI,然后AI给了我下面的prompt:

实际上目前还有很多人不知道怎么用好AI,对于一些非常细分的领域,如果我们自己研究出来了好的prompt,可以使用传统应用的表单形式,让用户填写表单,然后我们再转成prompt,再将AI结果呈现给用户,也能给用户创造比较好的价值。

专栏作家

产品海豚湾,公众号:产品海豚湾(ID:pm-dophin-bay),人人都是产品经理专栏作家。技术出身的产品经理,从事过 C 端产品和 B 端产品设计,擅长 SaaS 产品设计、产品架构设计和需求分析。负责的B 端产品完成了完整的从0到1,从1到 N 的过程,成功签约行业百强客户。

本文原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议。

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务。

教程评分

4.8 (1280 人评分)

学习讨论 (42)

用户头像

初学者

2天前

非常棒的教程!

作者头像

AI导师李明 作者

1天前

多谢