详细教程,有了AI!从零开发微信小程序为什么还需168详细教程,有了AI!从零开发微信小程序为什么还需168步?【AI之外】步?【AI之外】

AI 再厉害,开发微信小程序也不是敲几下就完事。今天我带大家快速看看 AI 之外必须手动完成的操作,让你了解做一个微信小程序解决自己的专属问题,在 AI 之外还需要多少步操作。 好了,开始我们今天的“把大象塞进冰箱之开发一款微信小程序到底需要多少步?”教程课。 第一节 开发微信小程序首先需要安装微信开发者工具。马上开始我们简单但不刺激的操…

详细教程,有了AI!从零开发微信小程序为什么还需168详细教程,有了AI!从零开发微信小程序为什么还需168步?【AI之外】步?【AI之外】封面

AI 再厉害,开发微信小程序也不是敲几下就完事。今天我带大家快速看看 AI 之外必须手动完成的操作,让你了解做一个微信小程序解决自己的专属问题,在 AI 之外还需要多少步操作。

好了,开始我们今天的“把大象塞进冰箱之开发一款微信小程序到底需要多少步?”教程课。

第一节
开发微信小程序首先需要安装微信开发者工具。马上开始我们简单但不刺激的操作环节。好了,打开浏览器,输入网址,点击回车,选稳定版,点击下载,点击,点击忽略,点下一步,选择同意,选择安装,点击完成。拿起手机打开微信扫描登录,确认授权,一气呵成。

第二节
首先让我们打开浏览器,输入 ai.com 回车。这个时候有经验的小伙伴就会问 up 你为什么不用 OpenAI 呢?当然是配置起来麻烦。点击下载,点击选择同意,点下一步,点下一步,点下一步,点击确定,然后打开工具,点击输入手机号,输入验证码,点击登录。新建项目输入项目名,点确认,输入内容,配置完成。你就说快不快吧。

第三步
开发环境已经准备好了,但是我们还需要注册微信小程序账号。大家坚持住,马上就要进入正式开发流程了。如果你坚持不住,你可以收藏我的视频,在你有精力的时候再看。点击注册,填写邮箱,激活邮箱,打开邮箱输入验证码,输入密码,确认密码,选择同意,点击注册完成。

No no no,选择其他,点击个人,输入姓名,填身份证、填手机号,点验证码,输验证码,微信扫码,点击开发管理,获取 AppID。打开项目设置目录,选择 AppID,选云开发,选第一个,点击创建搞定。

第四节
装备技能。做项目离不开产品设计、UI 设计、代码开发,可你不会怎么办?别担心,我给你准备了产品、UI、微信通知开发三大技能。其中微信通知开发技能更是凝聚了我多次失败开发经验精华。好了,奥利给让我们继续吧。

打开 VS Code,打开文件夹,选择刚刚创建的小程序代码目录,点击信任此作者,点击设计,选择规则和技能,选择项目,点击上传,点击上传技能解析,选择技能压缩包,重复三次,将三个技能压缩包上传,技能加载完毕,准备发射。

第五步
产品设计。产品设计就是将我们的想法转换为产品的功能、界面、交互等要素,包含这些要素的产品文档可以让 AI 更好地理解我们的需求。好,选择 solo 模式,输入:我想做一个专门记录上厕所时长的微信小程序,上厕所时点一下开始按钮就能开始计时,回车发送。这里有小伙伴要问了,为什么要指定技能?

当然是为了提高技能调用的成功率,明确技能名称,能让 AI 技能精准地识别你的意图,减少歧义误判,让响应更快、更稳定、更可控。那为什么不让产品文档中包含具体的技术实现呢?如果你不是专业的程序员,在产品文档中提前锁定技术实现,会极大限制后续 AI 开发的选择空间,束缚开发流程,开发成功率下降。

我们可以看到,它帮我们生成了当前问题陈述、解决方案以及用户故事,并且贴心地帮我们补充了一个查看历史记录的功能。这时候你可能觉得文字不够直观,那我们让 AI 来帮我们生成一个界面,根据产品文档生成一份前端页面的原型图,不需要实现真实的业务逻辑,将其保存在 Vue 文件中,回车。

可以看到 AI 帮我们实现了这些页面,包含开始页面、提醒设计页面、历史记录页面等等,我觉得实现的还可以。当然如果你觉得这个界面设计得不好或不能满足要求,你可以通过跟 AI 对话来修改界面内容。

第六步
代码开发。产品设计和 UI 设计已经完成,接下来就让我们开发代码嘛,哎不对,让 AI 开发代码吧。点击新任务,输入 /spec 17,请根据产品文档、UI 文档和通知技能进行开发,回车。这里为什么要输入 /spec 呢?spec 是一种开发规范,可以让 AI 更好地完成项目开发,当你在开发复杂项目时使用 spec,可以帮助 AI 更好地理解你的需求,减少生成一坨垃圾的概率。

好,可以看到 AI 根据我们之前的内容帮我们生成了一堆文档。太多了,直接点击生成代码,生成完成。但你以为这样就能用了吗?No no no,AI 只是帮你把房子盖好了,真正要能住人还得咱们亲手把水电接通。跟紧,别掉队,继续我们紧张但不刺激的配置。

第七节
开通云服务。可以看到 AI 开发完之后,直接给你派了配置云环境、建数据库、部署云函数的活。此时你可能一脸懵逼,这玩意怎么弄啊?别急,继续我们紧张但不刺激的配置。点击按钮等待加载,不点开它就等加载,等加载,加载完点击开始,提醒好了,可以白嫖腾讯的资源了。然后继续,复制 AppID,Ctrl+C 打开啊,Ctrl+V 发送回车。点数据库创建集合,输入名称,选择权限,重复三次。

创建完毕,打开工具选择文件,鼠标右键选第三个,重复三次,点云函数上传完成。打开工具左键点击,右键点击,点击完成。

第八节
申请权限。想要发送微信通知,我们还需要设置小程序的类目和通知消息模板。继续我们紧张但不刺激的配置。好了,设置页微信扫码,点击类目,添加类目,扫码验证,选择类目,选择工具-健康管理,点击确定,点击订阅,点击开通,点击确定完成啦。

No no no,点击选用,点击输入“便便时间过长提醒”,点击搜索,点击选用,选择全部,点击提交,点击详情,鼠标全选 Ctrl+C,打开,Ctrl+V 发送回车。这时候 AI 就会根据你提供的信息帮你配置发送通知的功能了。

第九步
代码调试。代码开发完成了,环境也配置完成了,那是不是我们的程序就可以使用?哎,报错了报错了怎么办?代码也不是我写的呀,按照道理谁写的叫谁定位呀。所以权限报错 Ctrl+C 点击 AI,Ctrl+V,还有报错。权限报错 Ctrl+C 点击 AI,Ctrl+V,还有报错,还有报错,终于可以显示了,点击开始计时。收到通知了,太棒了。

第十节
添加木鱼。我们的小程序需要后台发送多次消息,而微信的通知消息授权一次就只能发送一次,无法满足我们的需求。所以我们可以在页面上增加一个木鱼,每次点击就显示功德+1。但实际上它是一个授权按钮,用户点击一次就会增加一次授权。哈哈哈我真是个天才啊。

好了,输入网址,输入木鱼,点击搜索,选择木鱼,点击下载,选择颜色,点击下载,打开软件放入图片,点击 AI 输出需求:我要做一个木鱼按钮,引导用户点击,但按下的后台逻辑进行用户通知授权,回车完成。点击计时,选择默认,点击允许,点击木鱼,点击点看看通知,完美。

第十一节
试用发布。小程序开发好了,那目前还只能在电脑上试用,上厕所前在电脑上点一下,上完再点一下,是不是有点蠢?所以我们需要将小程序发布出去,这样就可以在手机上直接使用了。最后一节你还在吗?好,打开工具,点击上传,点击确定,输入版本号,输入备注,点击上传,上传成功,打开网页,点击填写,输入名字。

哎,报错了,新的名字,选择图片,点击图片,点击打开,输入介绍,点击提交,点击管理,点击进入,选择体验,点击确定,微信扫码,点击前往,下拉,微信打开小程序,点击计时,搞定。

可以看到,开发一款小程序 AI 能搞定核心设计与代码,却仍需要我们手动完成多步操作才能真正上线。AI 正在不断简化开发流程,但人工配置、调试、权限申请这些落地环节依旧是上线的必经之路。点赞、收藏、投币关注我,探索如何通过 AI 解决个人热的问题。我是老袁,下期见。