纯法律人从0学AI记录(5)- 崩溃5次后获得AI Coding写微信小程序的宝贵经验
在Cursor里复制粘贴图片生成带交互的网页,用VS code+Roo Cline+Deepseek后飞速生成插件后的我飘了,看到网上说,尽管Coze智能体不能发布到个人名义下的微信小程序,但你可以用AI Coding写微信小程序的代码,然后调用Coze智能体的API就可以,于是就决定试试,没想到前方等着我的是5次崩溃。
在Cursor里复制粘贴图片生成带交互的网页,用VS code+Roo Cline+Deepseek后飞速生成插件后的我飘了,看到网上说,尽管Coze智能体不能发布到个人名义下的微信小程序,但你可以用AI Coding写微信小程序的代码,然后调用Coze智能体的API就可以,于是就决定试试,没想到前方等着我的是5次崩溃。
第一次
看到满屏的算命、抽签和塔罗牌智能体,感觉几乎都很丑而且很随意,突然想到我去日本旅行时喜欢抽的御神签,搜了一下有几个日本寺庙的线上抽签网站做得很棒,就想干脆用这个做个小程序试试,只是抽签、保存、分享的话,也比较简单。

于是我复制粘贴网页截图发给Cursor,告诉它我要写个微信小程序,第一页到第七页分别长这样,然后第*页有**特效等等。写出来的页面那可以说是:几乎一模一样,煞有介事。
但是!!!!!
有一页是御神签一张张落下,排列成4*5的阵列,用户点击任一张御神签后跳转到结果画面。一张张落下的动效都做好了,很美,但就是没法点击后跳转!把这个问题和cursor说了得有10遍吧(花式描述应该在点击后跳转的对象),改来改去都不行,然后又跟windsurf是说,跟vs code说,越改越乱,无奈放弃。会代码的同学应该就知道怎么在原有基础上修改了吧,我虽然能看懂一点点,但自信地改了一两行后,满屏error。
有几页用的都是Mock数据,看得我风中凌乱,不知道再怎么去给AI prompt去修改成真实数据。
第二次
原先的已经改得亲妈不认了,我想还是重新生成吧,于是同样方法又来了一遍,页面很美,但同样,点了就是不动!让AI改了还是没用!换别的AI也没用!再次放弃。
第三次
大聪明决定最难搞的那一页不要那个动效了,但之前生成的其他好用的页面,也许可以参考一下直接复制粘贴进去?我还努力对了一下变量名,以防变量名、class之类的参数改变导致错误,自以为是地在生成的第一稿上做了调整,然后又。。。变成了一滩烂泥,且ctrl+z只能退回三步好像,再次放弃。
第四次
我决定放弃不切实际的幻想,不会写代码的人还想上来做那么复杂的特效,很多图片呀之类的需要自己去替换,换错位置就救都救不回来了,虽然微信开发者工具有可视化编辑功能,但是!在电脑上可视化拖来拖去调好了后,用手机预览一下,格式全乱,嗡一声脑袋都大了,还不知道问题出在了哪里(也许是container?)……再次尝试让AI去修改,并不能解决问题……AI认为可能是我的手机的问题……
第五次
本人优点就是锲而不舍……反省了一下觉得我一定是方法有问题,于是在CSDN、稀土掘金、bilibili搜索了一圈,总结下来,对于不会写代码的人来说,用AI coding写微信小程序谨记:
1. 不要一上来就想界面长得好看!
2. 不要一上来就想要很多功能和动效!
3. 不要试图自己改!如果非要改已经跑通只是还不那么满意的代码,先另存为!
4. 最重要的是先把完整的架构写出来!就像交易律师搭建境外架构一样,先把需要哪些文件、这些文件之间是什么样的层级关系搞清楚,因为之后再加是蛮困难的。其实就是先告诉Cursor/Windsurf/VS code:帮我写一个微信小程序,这个小程序的所有功能均能运转,功能包括blabla(先尽可能简单但页面要表述齐全,比如用户在主页面点击抽签后跳转到抽签页面,抽签页面输入个人信息,确认后进入结果页面,结果页面展示抽签结果。主页面左侧导航栏有三个button,点击后分别跳转到介绍,留签和咨询页面)。
写完这些后AI就会告诉你这个微信小程序的文件包里需要有哪些文件,甚至帮你生成,并开始在每个文件里写入,写完后,出来的是个立等可取、交互完全顺畅的小程序,就是……非常丑(尽管我跟它说了界面要简洁、优雅,可能它觉得下图这种就是简洁、优雅……)。

但!我为什么又又又又又失败了呢?
因为我想挑战自己,认为自己看懂了,努力把页面调得更好看,这次我得意洋洋地在修改前把代码进行了“上传”,结果后来发现……微信开发者工具里的“上传”不同于保存,是找不到代码的……
不过这一次有个极大的成功,是调用Coze扣子智能体的API成功了,之后专门写一篇deepseek是怎么帮我跑通的,并贴上代码供大家参考。
第六次(逐步接近成功中)
这一次,我不敢自己改代码了,也不敢传图让AI照葫芦画瓢了,更不敢上来要求很复杂的动画了,严格按照第五次中的逻辑,让AI先把能跑通的极丑的小程序搞定,然后针对每一个页面,一个问题一个问题地攻坚。
好在cursor/windsurf/vs code里,都是可以@文件夹或文件的,如果之前项目里有的页面已经写到符合了我的要求,我可以@那个文件,让AI参考排版/颜色等去修改已有的文件,成功率非常高。所以第六次从0开始搭建微信小程序其实非常快,主要时间耽误在cline的API request上了。
现在只差一个功能的实现了,做好后录个屏在下一期展示一下哈哈~ 个人认为设计还是蛮好看的。
更多推荐


所有评论(0)