Cline 免费插件 + Qwen2.5 大模型，零经验也能开发“对联王”微信小程序

唔得闲 發表於 2025-1-12 21:31:00

Cline 免费插件 + Qwen2.5 大模型，零经验也能开发“对联王”微信小程序

小朋友即将放寒假了，意味着春节就不远了。在我们湖北老家，当我还是学生的时候，每年临近春节，写春联、贴春联和对春联是读书人一件乐事。
如今，老牛同学早已不是读书人，但还是怀念那时快乐时光，因此想在春节前撸一个“对联王”微信小程序，专门用于创作春联和对春联。
上次零经验的我们，借助 Cursor 写了一个“节拍器”小程序，本次我们来用免费的 Cline 插件，辅助完成“对联王”微信小程序编程。下面是已发布的小程序，欢迎大家来体验：
【对联王微信小程序】
大家也可以在微信中搜索“老牛同学”找到“对联王”小程序：
<img src="https://ntopic.cn/p/2025011201/01.jpg">
同时，本次借助 Cline 插件完成的“对联王”小程序的演示录屏如下：
【对联王演示视频，请到公众号或视频号查看】
接下来，老牛同学就把 Cline 插件的使用主要过程，与大家分享。
<h1 id="1-cline-与-cursor-区别">1. Cline 与 Cursor 区别</h1>
老牛同学根据自己编写 2 个小程序页面的经验，先说说两者的区别、使用感受和建议：
<ul>
<li>工具形态：Cline 是一个 VS Code 插件，在 VS Code 直接安装或卸载，无需注册即可使用，灵活方便；而 Cursor 则是一个专门的 IDE，需要单独下载并安装，还需要用户注册和登陆方可使用，稍微笨重一些。</li>
<li>费用：Cline 是开源免费的插件（https://github.com/cline/cline）；而 Cursor 则是闭源的，且是收费的，它为新注册用户提供 2 周 2000 次调用的免费试用期。</li>
<li>支持的大模型：Cline 支持多种大模型，只需要兼容 OpenAI 接口规范且支持 Stream 流式输出即可，比如 Qwen 大模型；而 Cursor 内置了几种大模型，对兼容模型的支持并不很友好，比如总是有一些警告等。</li>
<li>功能和体验：两者在功能上感觉差不太多，Cline 在请求上下文、文件 Diff 比较界面稍逊 Cursor 一筹，但其实对编程影响并不大，总体来说 Cursor 体验上更优一点。</li>
</ul>
总体体感：这 2 个工具的功能都差不多，那么它对我们的实际帮助，其实还是依赖于底层大模型的能力，好马还得配好鞍。老牛同学之前常用 Continue 插件，在体验上，感觉 Cline 有点像增强版的 Continue 插件，只是它额外提供了文件生成、差异比对、系统调用的能力。在“对联王”小程序的整个研发过程中，老牛同学其实同时使用了这 2 个插件。
<ul>
<li>Cline 主要用于页面框架搭建、页面主要元素的布局、小程序主要逻辑代码等生成。</li>
<li>Continue 则用于细节部分调优，主要是对 Cline 生成的代码进行微调，比如：右下角“收藏夹”悬浮按钮的上下移动细节逻辑、悬浮按钮最后移动位置存储等逻辑。</li>
</ul>
使用建议：如果大家预算充裕，且使用比较频繁，建议直接上付费的 Cursor IDE（20 美元每月和 40 美元每人每月两种收费价格）；如果使用免费的 Cline，建议搭配 Continue 一起使用。
关于 Continue 的使用教程，可以参考老牛同学之前文章：Code Copilot 和使用教程
<h1 id="2-cline-插件配置">2. Cline 插件配置</h1>
<h2 id="安装插件">安装插件</h2>
安装好 VS Code 软件之后，Cline 插件安装就比较简单了，搜索“Cline”安装即可：
<img src="https://ntopic.cn/p/2025011201/21.jpg">
安装成功之后，我们可以看到再左侧有个“机器人”的小图标。
<h2 id="配置插件">配置插件</h2>
首次点击安装好的 Cline 插件图标，或者后续点击 Cline 插件的齿轮状的配置按钮，均可进入配置页面：
<img src="https://ntopic.cn/p/2025011201/22.jpg">
几个配置项比较简单，其中<code>API Provider</code>如果选择的是OpenAI Compatible，则需要保证接口符合 OpenAI 规范且支持 Stream 流式输出。
<h2 id="其他配置">其他配置</h2>
<ul>
<li>微信开发者工具：和上次“节拍器”小程序一样，我们需要下载微信开发者工具，用于实时预览和调试小程序，确保代码可以在微信环境中正常运行。</li>
</ul>
官方下载链接
<ul>
<li>Continue 插件：关于插件的配置和详细使用方法，可以参考老牛同学之前文章。</li>
</ul>
使用 Llama3/Qwen2 等开源大模型，部署团队私有化 Code Copilot 和使用教程
<h1 id="3-对联王实战">3. “对联王”实战</h1>
准备就绪，现在，让我们一起探索如何利用 AI 的力量来加速开发进程，让基本零经验的新书也能开发一个小程序等应用。
打开 Chat 面板，输入精心设计的 Prompt 提示词。以下是老牛同学首次尝试时所用的提示内容：
<pre><code class="language-plaintext">在春节活动中，创作对联或者对对联是一项有趣的活动：请帮忙研发一个名为“对联王”的微信小程序页面，文件名为"couplet"，目录为“pages/couplet”，实现以下功能：
1. 用户输入上联，或者用户输入创意，回车或点击发送按钮，生成下联或者创作一副对联
2. 回车后的函数名为`sendMessage`，这个函数逻辑由用户实现
3. 整个页面的布局与微信App的聊天界面一致，布局如下：
- 用户输入的消息，头像在右边
- API返回的消息，头像在左边
- 每一条消息的下面，均展示收藏、复制和删除操作按钮，同时展示消息的时间，时间格式为`小时:分钟:秒钟`，如`12:07:05`。
</code></pre>
<img src="https://ntopic.cn/p/2025011201/31.jpg">
提交后，等待 Cline 生成代码文件（一般为 3 个文件），对于每个文件代码差异，我们可以选择“Save”接受或者“Reject”操作。
之后，我们切换回微信开发者工具界面，默认会自动刷新，或者按<code>Ctrl</code> + <code>r</code>强制刷新页面，即可查看最新的页面效果。
<ul>
<li>如果页面布局和我们期望差异较大，那么我们继续使用 Cline 插件生成代码</li>
<li>如果页面布局和我们期望差不多，需要进行局部微调，就可以使用 Continue 插件进行部分调整</li>
</ul>
不断迭代上述过程，直到小程序完全符合预期为止。
由于提示老牛同学提示词太多了，后面调整的提示词没有保存，就不一一展示了，期望大家均能快速研发出满意的小程序。
<h1 id="4-结语">4. 结语</h1>
最后，当我们使用外部 API 服务时，对于涉及敏感数据或有较高保密需求的项目，请务必注意保护用户隐私和数据安全。
通过上述步骤，即使是没有专业背景的人也能轻松上手，借助现代 AI 工具的力量，快速且高效地开发出属于自己的微信小程序。
<hr>
Transformers 框架序列：
01.包和对象加载中的设计巧思与实用技巧
02.AutoModel 初始化及 Qwen2.5 模型加载全流程
03.Qwen2.5 大模型的 AutoTokenizer 技术细节
04.Qwen2.5/GPT 分词流程与 BPE 分词算法技术细节详解
05.嵌入（Embedding）机制和 Word2Vec 实战
06.位置嵌入（Positional Embedding）
Pipeline NLP 任务序列：
零·概述丨 01.文本转音频丨 02.文本分类丨 03.词元分类和命名实体识别丨 04.问答丨 05.表格问答 | 06.填充蒙版
往期推荐文章：
使用Cursor + Qwen2.5 大模型零经验研发微信小程序：自由构建个性化节拍器应用实战
Bolt.new 用一句话快速构建全栈应用：本地部署与应用实战（Ollama/Qwen2.5 等）
基于 Qwen2.5-Coder 模型和 CrewAI 多智能体框架，实现智能编程系统的实战教程
vLLM CPU 和 GPU 模式署和推理 Qwen2 等大语言模型详细教程
基于 Qwen2/Lllama3 等大模型，部署团队私有化 RAG 知识库系统的详细教程（Docker+AnythingLLM）
使用 Llama3/Qwen2 等开源大模型，部署团队私有化 Code Copilot 和使用教程
基于 Qwen2 大模型微调技术详细教程（LoRA 参数高效微调和 SwanLab 可视化监控）
ChatTTS 长音频合成和本地部署 2 种方式，让你的“儿童绘本”发声的实战教程
<img src="https://ntopic.cn/WX-21.png">

</div>
<div id="MySignature" role="contentinfo">
本文作者：奔跑的蜗牛，转载请注明原文链接：https://ntopic.cn 
来源：https://www.cnblogs.com/obullxl/p/18667362/NTopic2025011201

頁: [1]

琼殿技术论坛's Archiver

Cline 免费插件 + Qwen2.5 大模型，零经验也能开发“对联王”微信小程序