CodeBuddy 助力小程序开发——组件开发究竟能简单到什么程度

0 阅读2分钟

最近,一个AI开发工具用着比较顺手——CodeBuddy。

我用的是中国站的CodeBuddy CN,这个版本对于我来说足够了,已经试过了从零创建小程序项目,分析项目内容,项目优缺点,提出解决方案等,今天尝试用它开发一款简单常用的带图标的菜单条目!

效果图如下:

我的组件.png

1、尝试零干预生成

提示词如下:

生成一个菜单条组件,组件名 menu-item 
该组件为水平布局,左侧对齐为图标,挨着图标是菜单标题,右侧对齐为向右的箭头

很快,我的组件目录下生成了menu-item 组件

d092f3e8-a4b0-47b4-a4e9-2ca9b8dcd2e0.png

为了看效果,直接让CodeBuddy帮我们引入到我的页面,提示词如下:

将生成的菜单组件引入我的页面,添加两个,看看效果如何

640.png

报错,的确,这个图标我们需要自己去找一个加入到项目中现在菜单组件目录下没有asset目录,我们不要手动去添加,让AI去搞定它,提示词如下:

在菜单目录下添加asset目录

AI操作成功了,asset 目录已添加,找一个图标命名为ico_arrow.png,粘贴到asset中。

640 (3).png

我们编译一下小程序,看效果:

640 (2).png

在我们没有手动写代码去干预AI工作的前提下,它处理的很不错,现在去看一下它创建的组件细节, 目录我们在上面已经看过了,现在看看组件的布局文件和js代码文件内容:

menu-item.wxml

640 (1).png

可以看到,它生成的布局文件代码规范简洁,左侧图标和标题提取成属性,以便在父窗口中赋值使用,这些操作全是它自己做的,我们的提示词并没有提及。

好了,现在我们在引入它的页面中,给它的左侧图标赋值:

d607d3e3-4c75-4d70-9346-6e21eaae1ef8.png

效果很理想,正是我们想要的菜单项。

是菜单项,当然要有点击跳转的功能,我们看看AI是怎么做的:

组件中的事件接口:

2b94a952-15f7-476f-a7ba-b386e5963c4b.png

页面中的点击事件实现:

b80b4573-a851-4318-9b02-8fcc68823bb9.png

可以看到,它为我们添加了onTap事件,父控件直接实现即可,真的是很到位啊。这个组件的尝试就到这里,后续我准备使用CodeBuddy 实现一些更复杂的东西,如果您有什么好的建议和想法,可以关注交流。