中国版Cursor实战，利用「CodeBuddy」零代码构建“网络热词”小程序

上一次我曾经介绍过，目前CodeBuddy这个插件有着比较强大的功能。同时由于它是腾讯出品的，所以对于一些小程序的开发有着天然的优势。

因此本次我们继续用CodeBuddy助手，零基础、零代码，快速构建属于自己的一个“网络热词”小程序。可以看看我构建出来的小程序前端效果：

其功能包含了热词搜索、热词解析、点赞收藏等等的功能。那具体是怎么做出来的呢？主要就是利用AI强大的代码能力，可以从零开始直接构建一个。

1.代码助手安装

首先，需要先安装CodeBuddy。如果你是用 vscode 进行代码编写的，很容易就在插件市场安装“CodeBuddy”。

在弹出的界面中进行扫码登录

登录成功后，可以看到左边是和CodeBuddy 对话窗口：

如果你是用过 cursor、trae 等一些编程代码助手，对这种对话窗口肯定不会陌生。它的使用方法和这些产品是一样的，只需要简单的进行对话，就可以快速根据你的需求进行项目实现。

2.前期准备

下载小程序开发工具：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

安装完成后，我们可以看到这个工具本质上就是一个用来调试代码的工具，左边是预览图，右边是代码框架：

接下来，我们首先初始化一个新的模板进行开发：

• 注册一个测试号
• 不使用云服务
• 选择TS的一个基础模板

创建完成后，就可以看到一个简单的登录界面：

接着拿到本地目录，然后在vscode上打开：

3.生成小程序原型图

首先需要明确，我们这个小程序，最主要的功能是输入一个具体的网络热词，给出具体的解释功能出来。然么我们就可以利用大模型，先帮我们生成一份详细的功能需求文档：

我们把大模型生成的功能文档，放到项目中的“doc/pro.md”文件中。

然后使用Codebuddy开始进行产品原型图生成，下面是我用到的prompt：

根据pro.md文档，帮我再index.html中实现该小程序的原型图 样式: 使用 HTML + Tailwind CSS（或 Bootstrap）开发所有原型界面。并且使用 TDesign 的设计风格 代码结构: 每个界面以独立 HTML 文件形式存储，例如 home.html、profile.html、settings.html 等。 index.html 作为主入口，不直接包含所有界面的完整代码，而是通过 <iframe> 嵌入各界面文件，并在 index 页面中平铺展示所有页面，避免使用链接跳转。 真实感增强: 界面尺寸需模拟 iPhone 15 Pro 的屏幕规格，并应用圆角设计，以贴近真实移动设备的外观。

接着就可以看到Codebuddy帮我们哐哐哐生成一堆代码，然后我们只需要直接接受就可以了。

最后，点击生成的index.html文件，然后用网页打开，看一下其具体生成的小程序原型图。可以发现，其具有的每一个原型页面，基本都符合我自己的想法。而且不得不感慨，有很多功能其实我都没有想到，但是它都帮我实现了。

4.利用TDesign生成前端页面

下面，我们利用TDesign设计好看的前端页面。

那么什么是TDesign呢？TDesign 是腾讯开源的企业级设计体系，提供了一整套从视觉规范、设计工具到前端组件库的解决方案，旨在帮助开发者和设计师快速构建高质量、一致性强的产品界面。在小程序领域，TDesign 提供了针对微信小程序（WeChat MiniProgram）和 QQ 小程序的组件库，实现了与 Web 端组件同样的设计风格与交互体验。

那么具体怎么安装呢？其官方文档已经给出了具体步骤了：

https://tdesign.tencent.com/miniprogram/getting-started

首先需要安装npm，可以去到这个网址进行下载

https://nodejs.org/en/download/

安装之后，可以验证是否成功

接下来，在微信开发工具中，安装TDesign，成功之后，在package.json中可以看到具体的依赖tdesign-miniprogram

接下来在项目中构建npm，如果有报错，可以根据官方文档进行解决：

安装完之后，需要在微信开发者工具中对 npm 进行构建：工具 - 构建 npm

下面还是继续根据开发文档，配置相应的文件信息：

• 构建成功后勾选 将 JS 编译成 ES5
• 将 app.json 中的 "style": "v2" 移除。
• 如果使用typescript开发，需要修改tsconfig.json指定paths
• 以按钮组件为例，只需要在 JSON 文件中引入按钮对应的自定义组件即可

最后设置好按钮组件后，可以看到样式已经出现了

上面整体的步骤，已经说明TDesign引入到我们自己项目了。因此我们直接利用AI帮我们根据原型图生成小程序前端。

请你参考给定的文件，完成过小程序的前端页面 参考文档@pro.md 全部使用TDsisgn的组件库

最后生成的文件还是直接选择“全部接受”就可以了。

这时候我们回到微信开发者工具，然后点击“清除缓存”，然后进行编译，如果是AI生成的话，会直接报错说缺少一些图片，这是因为本身AI是不能够帮助你生成给对应的代码的。这个时候需要我们自己创建相应的文件夹，然后替换这些图片路径名字。

我们可以去这个网站上，下载类似的图标，比如下载主页的图标：

https://www.iconfont.cn/collections/detail?spm=a313x.collections_index.i1.d9df05512.12903a813yqMyD&cid=42993

然后在项目中创建路径和图片：

最后再一次清理缓存和编译，就可以看到成功的小程序页面了：

5.写在最后

经过以上步骤，我们利用「CodeBuddy」与 TDesign，零代码、低成本地完成了一个“网络热词”小程序的快速原型及前端实现。整个过程几乎不需要手写一行业务逻辑，只需通过 AI 助手进行对话式交互，即可生成完整的页面骨架和样式配置，进一步节省了开发时间与成本。

接下来，我们可以加入更多的不同功能，比如：

• 后端功能对接：可在小程序中接入自己的 API 服务，实现热词数据的动态获取与缓存管理。
• 用户认证与统计：结合微信用户体系，支持用户登录、点赞与收藏的持久化存储。
• 增强交互体验：在 AI 生成的基础上，自行优化页面交互动画、添加上拉下拉刷新、分享功能等。
• 持续迭代与优化：利用 CodeBuddy 持续补充新功能，或结合其它腾讯生态插件（如云开发、TUIKit）进一步丰富小程序能力。

AI 辅助开发正逐步走向日常，在项目原型、页面布局、组件生成等环节能够极大提升效率。希望本次实战示例能给你带来灵感，助你快速上手「网络热词」小程序的构建。

如果你也有自己的创意场景，不妨尝试用 CodeBuddy 进行零代码开发~