开发:微信小程序
小优大虾这篇文章非常好,真的是手把手教你如何做一个微信小程序,推荐大家阅读 https://mp.weixin.qq.com/s/WkFxMMrlMqv52ce2n0xX6A
我是0基础代码经验,但是我却利用gpt做了一个属于我个人的小程序。小程序的链接在下方,因为是chatgpt自己写的,并没有调用像element这些组件,看上去美观度一般,其次我写的逻辑也比较简单,太复杂的容易报错,需要不断调整。但是不影响大家使用。功能的名字叫倒数日,顾名思义,就是记录自己重要的日子,然后计算出这个日子已经过去了多少天或者还剩下多少天。
接下来,我将手把手教下大家如何利用chatgpt来实现一个微信小程序的搭建。前半部分我们先简单介绍怎么注册小程序,后半部分介绍怎么进行开发上线。
1、注册小程序
登录微信公众号首页,选取小程序,用一个新的邮箱绑定注册即可。
2、小程序信息填写
注册验证通过后,将会看到小程序发布流程,首先填写小程序信息和类目。这里不做太多介绍,小程序名称可以填写你想做的功能名称即可,小程序头像可以网上找个,因为我要做个倒数日的功能,因此我是利用midjourney生成的日历图标。
3、开发者工具下载
最重要的开发者工具下载环节。回到发布流程页面,点击“普通小程序开发者工具”,在新的页面中点击“微信开发者工具”,选择windows 64位下载即可。
4、创建小程序项目
打开下载好的微信开发者工具,选择创建小程序。如下图所示。需要注意的是,id是在开发者网页平台最下方的设置里面,有个账号信息获取,获取后,选择不使用云服务,并选择javascript基础模板。
创建后,请看一眼如图中间的这些文件,稍后chatgpt会让你把代码拷贝到这些文件中去。其中有个app.js比较重要,代码量不多但是容易忽视。
5、利用chatgpt来生成代码
我用的网站是https://poe.com/ChatGPT。非常好用的网站,响应非常快,我一直用这个。 有条件的当然用gpt4更好,代码逻辑更强,错误少。
重头戏来了。首先你需要构思好你的产品,以及大概画个草稿,你的产品名称、需要几个按钮、交互逻辑,并将这些话术告诉gpt,那么这里我以我做的倒数日产品为例子。
prompt如下:
帮我写一段微信小程序代码,做一个计算日子间隔的工具。页面顶部标题为倒数日,一共需要两个页面,首先首页展示的是日子名称和间隔日子时间。/n 若用户未添加过日子,初始状态首页为空,首页右上角有个添加按钮,点击后弹窗展示日子添加器(功能标题为这个)
a.日子名称:用户可输入日子名称,如结婚纪念日
b.初始日期:即该日子的基准日期,是个日历插件,默认展示今天的日期,用户可点击筛选日期,具体到年月日
最下方展示保存和取消按钮,保存即该日子添加成功,在首页即展示一列新增的日子并显示间隔日子时间。取消则取消添加。/n 当用户添加完毕日子后,首页则展示一行该日子名称,以及间隔日子时间(该日子日期距离今天的天数,即今天日期减去该日期日期时间的天数)。/n 首页带有可滚动页面的控件,当日子名称较多时,通过滚动加载更多日子。最新添加的日子名称在最上面。/n 帮我写完代码后,请教我把这些代码分别放在微信开发者工具的哪些文件中去
如图所示,我们可以看到chatgpt给出了一系列的代码,那么很多朋友可能会懵逼,这些代码放在哪里,那么翻到后面,chatgpt会告诉你需要把这些代码放到这些文件中去。
那么在这里我们可以看到一个特殊的文件夹名字为add,那么这个文件夹是需要我们自己新建的,目录是一般都是在pages的下级。
6、创建add文件夹和文件
右键选择新建文件夹,输入add即可。其次在add文件夹右键选择新建文件,依次新建add.js、add.json、add.wxml、add.wxss。
7、拷贝代码
根据chatgpt给出的代码结构,依次拷贝至各个文件。他会告诉你这些代码放在那个文件,只需要点击右上角的copy,全量覆盖替换即可,记住,全选覆盖。不要忘了同时也要设置app.json,当时设置完后红色报错了,于是我把app.json这串代码同样拷贝到了add.json,因为我发现json里面写的命名是pages/add/add,感觉是写错了。拷贝完毕后就能运行了。
8、运行和预览
ctrl+s可以实现实时预览,也可以点击上方的编译按钮实现全量刷新。可以用鼠标在左侧预览界面模仿真实效果进行交互,如果发现有问题,则可以针对性地问gpt,后续会给到几个例子。同时也可以点击上方的预览手机扫码体验。
9、实战错误调整
由于chatgpt每次生成的代码有所差别,且有些用户给出的prompt不合适导致的报错,我们可以再次询问gpt进行调整。
(1)代码红色错误
往往这个时候一般是代码写的不规范或者找不到文件地址或者缺少相应文件。那么左侧会显示模拟器启动失败或者右下角显示红色错误提示。我们只需要把这串红色提示复制,并问他报错原因是什么,请修改后给我完整的代码。不过更重要的是,你需要知道每个文件夹代表含义是什么,比如我这里的add代表的是添加日子的控件,其次中间文件也会高亮红色告诉你是哪个文件有问题。如果你觉得gpt一直没有修改好代码,你可以把这个文件的整个代码复制下来问他有什么问题,让他修改好给你,但是潜在风险是他可能把前面的都忘记了(token限制)。
(2)逻辑错误
有时候用户给出的逻辑不正确会导致gpt给出错误的代码,而达不到我们的效果,这时候你可以把你的需求告诉他,如下图所示。他会给你一串新的代码,同上述所说,相应的文件进行覆盖即可,然后保存预览。
当然他修改不一定一次到位,这和你问的方式有关,因此你可以不断地提出需求或者修改自己的prompt。有时候gpt只会 给你修改局部代码,不懂代码的小白的我当然看不懂,因此你可以要求他给你完整的代码。
(3)新增功能
由于chatgpt3.5有token上下文限制且只有8000多(gpt4有3万),因为在多轮对话后,可能会忘记前面的内容,我们可以把之前他给到我们的代码全部复制给他,并提出疑问或者新增功能,如图就是我想加个删除日子的功能(删除icon太大了很丑,最后我还是没有采纳)。此时gpt就会给你新的代码,继续覆盖原先代码即可。
10、发布准备
紧张刺激而又激动的时刻终于来了,点击右上方的上传按钮。腾讯会对代码进行质量检查。这时候我们会发现㢟没有按需注入,点击查看教程很繁琐,看不懂。其实很简单,只需要把这串代码拷贝app.json文件中去即可。记住,是放在最上方,{下面。并且末尾需要有个,
"lazyCodeLoading": "requiredComponents",
11、发布成功,等待上线
上传成功后,在开发者平台-版本管理可以进行发布。一般审核时间是1-7个工作日,你可以选择加急2h内,但是一年只有一次。
好了,以上就是利用chatgpt实现微信小程序开发的全部教程了,如果感兴趣的朋友,可以尝试开发个小游戏。其实在开发倒数日这个产品之前,我尝试过开发“飞机打蜜蜂”的小游戏,结果飞机和蜜蜂需要组件,我就放弃了。其次我也想过“中英翻译”的小功能,结果发现中文和英文单词需要自己准备好数据库,太麻烦了,我也放弃了。有能力的朋友可以尝试一些高难度的小程序开发。