卡卷网
当前位置:卡卷网 / 每日看点 / 正文

如何做一个微信的小程序?

作者:卡卷网发布时间:2025-04-17 23:08浏览数量:52次评论数量:0次

借助 AI,完全没有开发基础的人,10 分钟就可以开发一个图片工具小程序了。

AI 的发展真的是每天都不一样,不同编程语言之间的壁垒还是很大的,就算一个资深程序员,想要学习另外一门语言,没有一个月也很难说能直接上手做产品开发。

更何况,完全不懂开发的人,要从零开始学习到开发出一个产品,在培训机构学习也至少要三个月的时间,学成之后的水平那也是一言难尽。

借助 AI,完全不懂(小程序)开发的人,一个简单的小程序,10 分钟也能直接开发完成了。

最近刚好接了一个小程序商单,为了验证我这样一个完全没有搞过小程序开发的人能不能 hold 住,我用 AI 花了 10 分钟就开发出来了一个图片压缩小程序。

给大家看看效果,是不是还可以。

如何做一个微信的小程序?  第1张

如何做一个微信的小程序?  第2张

这里一步一步分享给大家:

第一步,本地新建一个空的文件夹,用于存放小程序代码

这一步,不用多说了吧,不会的后台找我,手把手教,手动狗头。

第二步,确认小程序需求

1、你是一名经验丰富的互联网小程序开发工程师,熟练掌握小程序开发相关技能,同时熟悉小程序的 UI 界面设计。

2、我需要一个页面,页面有个上传图片的入口,点击上传即可从相册中选择图片,对于上传的图片要有个压缩图片的功能,压缩后的图片可以保存下载;同时,会展示压缩后的图片,这样可以和原图进行对比。

3、微信小程序的 AppId 是 XXX (提前申请好的小程序 AppId)。

AppId 可以使用正式的 AppId,需要在小程序后台申请。

申请地址:mp.weixin.qq.com/wxopen

如果只是自己测试用,直接选择测试号即可。

如何做一个微信的小程序?  第3张

第三步,打开 cursor,创建 readme.md 需求说明文档

复制第二步的内容,粘贴到 readme.md 文档中。

如何做一个微信的小程序?  第4张

第四步,用 cursor 根据需求文档编写小程序代码

选择上一步创建的 readme.md 文件,右键 Add File to Cursor Chat,输入提示词:根据文档里的要求编写代码

如何做一个微信的小程序?  第5张

中间可能会要求我们手动执行命令,创建文件夹,我们点击 Run command 即可。

如何做一个微信的小程序?  第6张

等待 Cursor 执行完毕,我们能看到readme.md 文档同级下自动创建了这些文件。

如何做一个微信的小程序?  第7张

第五步,使用微信开发者助手打开文件夹,点击预览

如果用的测试 AppId,在刚才的微信开发者助手界面中,点击右下角的创建按钮。

打开之后就能看到这样一个页面,左侧是小程序预览界面,右侧是编辑区,我们直接使用手机预览看下效果,选择预览-自动预览-启动手机端预览。

之后关联的微信账号会自动打开这个小程序。

进来之后,这个界面很丑哈,大家不要慌,先看看功能好不好使。

如何做一个微信的小程序?  第8张

点击“选择图片”,从相册选择一张图片,我们能看到压缩后的效果以及压缩比例。

如何做一个微信的小程序?  第9张

点击”保存压缩后的图片“,确认压缩后的图片确实保存到相册中了。

至此,这个小程序就已经开发完成了,已经可以用了,功能上没有问题,完全满足我们的要求,一次通过,一个 bug 都没有。

不过这里会有一个小小的问题,这个界面很丑,能不能让 AI 帮我们优化一下呢?

大家可以去试试看~

看到这里,大家发现没。以前门槛很高的开发工作,现在会打字就能实现了。

善用 AI 能力,尤其是哪些善于挖掘用户需求,但是没有编程能力的人,AI 绝对是福音,能帮助你快速实现自己的想法,快速赚到钱。

@伍六七AI编程

END

免责声明:本文由卡卷网编辑并发布,但不代表本站的观点和立场,只提供分享给大家。

卡卷网

卡卷网 主页 联系他吧

请记住:卡卷网 Www.Kajuan.Net

欢迎 发表评论:

请填写验证码