一、缘起
五年前让研发同事帮忙写过一小程序,功能是百以内加减法,用于小孩练习口算,后来抛之脑后无人问津。最近两月每周收到腾讯发的备案通知,打开看原功能有问题,虽然自己代码知识极其有限,但目前AI编程已经够强大,试试新写一个,下图是最终成果。
二、工具
"Cursor"和“微信开发者工具”,没有的去网上下载并安装,免费。
三、简述
我的代码水平仅限于样式类的字号、颜色、间距这些,本次体验下来,感觉完全不懂代码也不影响。实现其实很简单,在Cursor里描述想要的功能,会自动生成代码,如果一切顺利,半小时即可搞定。我遇上的问题主要在代码之外,下文先讲述顺利的情况,再描述遇到的问题
本文适合新手小白,老手就别看了,内容太简单,不过末尾有几小问题,如果可以,求顺手帮解答
四、开写
1、打开Cursor,点击如下图右上角蓝框内图标,调出chat界面(如果默认就有不用再点,我每次打开都没有,需要点一次)
2、点击右上角设置图标,再点左侧Models,在中间找到deepseek-r1并勾选上
3、如下图,默认是“claude-3.5-sonnet”,改为刚才添加的“deepseek-r1”
对于跳出的提示不用管,点continue:
其实这儿不一定要改,我初始用的默认“claude-3.5-sonnet”,过程中遇上些问题,就改成“deepseek-r1”试试,事后再看那些问题(后文会讲述)跟选哪个模型估计没啥关系。
4、开始描述需求,在右侧对话框中输入需要的功能,然后回车发送
我的描述如下:
写这文章时才发现,里面“如果输入的结果正常”,应该用“正确”,但对生成代码看着没影响
5、Cursor开始自动生成代码
6、等待生成完成,一般来说至少4个文件,默认名称是“index.js,index.json,index.wxml,index.wxss”,如想查看某个文件,可点击右侧对应文件名,左侧会显示相应代码
7、打开“微信开发者工具”,新建一个项目,“项目名称”和“目录”自定义,“AppID”我使用的原小程序ID,没有的可用测试号
点击“确定”,会自动生成一堆文件(总感觉以前生成小程序项目时没这么多文件,这次多了不少,后来想,可能是上面默认选择了“微信云开发”,这种简单的小程序是不是应该选“不使用云服务”?)
8、找着前面Cursor生成的那4个文件(如找不着可查看后文描述的问题,我就一时没找着),复制这些文件至上一步创建的小程序目录“/miniprogram/pages/index”下。
9、切回“微信开发者工具”,点击顶部“预览”,微信扫二维码查看。其实左侧默认就能看到效果,但有时会跟手机上看有点区别,还是手机上预览靠谱。(下图对左侧预览效果加马赛克,是因为截图时已是最终版,不是当时第一次生成的代码效果)
10、第1次生成的效果大概如下图,当时没截图,事后根据记忆做的,可以看到显示上有点问题,后面进行修改。
11、在Cursor里输入想要的修改,AI对话框变到了右下方:
我输入的内容是:
12、等代码自动完成,重复前面复制文件的操作(每次修改后都将文件拷到小程序目录下),继续在“微信开发者工具”里预览,答案输入框换行成功。
13、在Cursor里继续改:
代码生成后去预览,发现不行,继续让调整:
这回成功:
至此,该小程序已经可用,为了效果更好,再加些功能。
14、增加计分功能,方便了解对错情况:
写文章时又发现“分数按钮”多了“按钮”两字,不过AI好像无视这字眼。
同样代码生成后复制文件再预览,成功:
15、再增加计时功能,方便了解答题速度:
继续复制文件并预览:
16、前面加了计分功能,但如果不知道做了几题,只有分数看不出正确率,再增加显示当前题号功能:
复制文件并预览效果:
17,再改改样式:
复制文件并预览效果:
18、继续改样式:
对于改间距这些我其实能直接改代码完成,不过为了全程用中文实现,还是通过chat对话框。
预览效果:
19、接着改:
第1次没成功,改第2次:
还是没成功,改第3次:
总算成功:
20、但发现输入数字后样式有问题,接着改:
左侧是原效果,右侧是改后效果:
21、上述改动带出了新问题,接着改:
左侧是改前效果,右侧是改后:
22、最后,优化操作,让每次答题后,不用人为再点一次输入框:
至此完成:
五、遇上的问题
1、Cursor生成的文件在哪?
首次选的模型是“claude-3.5-sonnet”,按显示的内容,我理解是在C盘。
C盘对应目录下确实有“math-practice-miniapp”文件夹,但空的,内部无文件,后来通过Cursor界面这儿在D盘根目录找着文件,不知这个文件生成位置是什么逻辑,有没地方可设置?
另外,不同模型,生成的文件目录不一样,比如“claude-3.5-sonnet”是生成“
math-practice-miniapp/pages”目录,而“deepseek-r1”只生成“pages”目录。
2、生成失败
有时会失败,倒不用在意,点“try again”继续。我怀疑上一个问题c盘下“math-practice-miniapp”里没文件,是某次生成失败造成。
3、不同模型生成文件数不一样
最初用“claude-3.5-sonnet”生成5个文件,后来用“deepseek-r1”只4个文件,对应的目录也有区别,不过从实际效果看没影响,不知是不是因为这小程序功能太简单。
4、同样提示语不同模型,甚至同模型,生成效果差别有大有小
以下三个都是前文中同一提示语,第一个“claude-3.5-sonnet”模型,第2个“deepseek-r1”模型,第3个也是“deepseek-r1”模型,和第2个生成时间前后相差也就10分钟
5、有些改动如果多次都不行,感觉直接放弃较合适,比如这个改动:
改两次都不成功,不想把代码折腾太乱,选择了放弃。
6、某次修改如果有问题,可以通过输入提示语让其回滚,但可能会出问题。
有次让回滚,Cursor把其中一个文件里代码全删了,不想来回折腾,选择了全部删除重来,导致发现前一问题“同提示语生成效果差别”
为了防止回滚问题,后续更新时都复制原文件备份。
7、遇上原因不明问题,就重来,某次操作后,成了下图这样,找不着缘由,全部删除重来
8、有没人知道,能否让Cursor生成的文件和小程序创建的项目在同一目录?这样能省下每次复制文件工作
9、如果关闭Cursor,下回想在原基础上更新,怎么处理?
我试着新生成一份文件,关闭Cursor,然后再打开那些文件,用这样提示语:
按Cursor的反应看,能在原基础上更新,但中间有个报错,也不知为啥:
10、作为新手,这一路操作肯定有众多不合适之处,恳请大家多多指点
六、成果
小程序审核很快,不到1小时,发布过程中让微信认证,被收30元
,啥时候开始的收费?5年前那次发布是免费的。然后还有备案,填了一堆信息,几小时后收到电话,说名称不行,让改后重新提交
目前倒能使用,欢迎扫码体验:
如有疑问或对该小程序有优化需求,可评论中提,我努力更新