柏虎资源网

专注编程学习,Python、Java、C++ 教程、案例及资源

Cursor+微信开发者工具,和AI聊天生成代码,问题多在代码之外

一、缘起

五年前让研发同事帮忙写过一小程序,功能是百以内加减法,用于小孩练习口算,后来抛之脑后无人问津。最近两月每周收到腾讯发的备案通知,打开看原功能有问题,虽然自己代码知识极其有限,但目前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年前那次发布是免费的。然后还有备案,填了一堆信息,几小时后收到电话,说名称不行,让改后重新提交

目前倒能使用,欢迎扫码体验:

如有疑问或对该小程序有优化需求,可评论中提,我努力更新

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言