首页 > 编程语言 >使用Cursor + Qwen2.5 大模型 零经验研发微信小程序:自由构建个性化节拍器应用实战

使用Cursor + Qwen2.5 大模型 零经验研发微信小程序:自由构建个性化节拍器应用实战

时间:2025-01-03 21:55:05浏览次数:1  
标签:Qwen2.5 节拍器 程序 Cursor 微信 模型

最近,小朋友开始学习小提琴,需要一个节拍器来帮助他练习。老牛同学下载了好几个节拍器应用,里面的广告实在是太多了,简直无从下手操作,就算老牛同学是慎之又慎,但还是中招,被运营商扣费。

因此,老牛同学决定自己动手,定制一个专属的微信小程序节拍器。虽然老牛同学没有微信小程序的研发经验,但是借助强大的 AI 工具,最终,还是成功研发完成并上线了:

老牛同学·小程序

【老牛同学小程序 · 节拍器 视频】

1. 开发环境搭建

安装必要的开发工具

为了实现高效开发,我们选择了以下两个主要工具:

  • 微信开发者工具:用于实时预览和调试小程序,确保代码可以在微信环境中正常运行。
  • Cursor:这是一个集成大模型的智能代码编辑器,能够根据提示词自动生成或优化代码,大大提高了开发效率。

下载地址:

请务必完成注册并登录到 Cursor 平台,以便使用其全部功能。

配置开发环境

微信开发者工具配置

启动微信开发者工具后,创建一个新的小程序项目。选择“不使用云服务”和“不适用模板”,以获得更高的灵活性。记得填写正确的AppID,这是与微信平台关联的关键信息。

新建小程序

创建完成后,你将进入如下的研发和预览界面,准备好迎接下一步的挑战。

小程序研发和预览

Cursor 工具配置

打开 Cursor,按照指引配置好Qwen2.5-Coder-32B大模型,并选择刚刚创建的小程序目录作为工作区。这样,你就可以在 Cursor 中看到与微信开发者工具一致的文件结构,方便进行同步操作。

Qwen2.5-Coder-32B配置

Cursor文件目录

3. AI 辅助编程实战

现在,让我们一起探索如何利用 AI 的力量来加速开发进程。在 Cursor 中按下Ctrl + i,打开 Chat 面板,输入精心设计的 Prompt 提示词。以下是老牛同学首次尝试时所用的提示内容:

你是一位资深的微信小程序开发者,擅长UI设计和交互逻辑构建。当前任务是在现有基础上完善一个名为“节拍器”的小程序,它允许用户调整BPM(每分钟拍数),并通过点击按钮控制节拍声的播放与停止。请根据以下要求继续完成页面布局和功能实现:
- 页面标题:节拍器
- 内容布局:
  - 第一行:居中对齐,包括四个按钮(“-10”、“-5”、“+5”、“+10”)用于调节BPM值,默认值设为60。
  - 第二行:显示计时器,格式为“小时:分:秒”。
  - 第三行:“开始”按钮,点击后启动节拍声,频率由BPM值决定。
  - 第四行:“停止”按钮,用于暂停节拍声。

Prompt提示词

Apply代码片段

提交后,等待 AI 生成代码片段,并通过Apply将其应用到项目中。之后,我们切换回微信开发者工具界面,默认会自动刷新,或者按Ctrl + r强制刷新页面,即可查看最新的页面效果。

不断迭代这一过程,直到小程序完全符合预期为止。

4. 结语

最后,当我们使用外部 API 服务时,对于涉及敏感数据或有较高保密需求的项目,请务必注意保护用户隐私和数据安全。

通过上述步骤,即使是没有专业背景的人也能轻松上手,借助现代 AI 工具的力量,快速且高效地开发出属于自己的微信小程序。


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.填充蒙版

往期推荐文章:

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 种方式,让你的“儿童绘本”发声的实战教程

微信公众号:老牛同学

标签:Qwen2.5,节拍器,程序,Cursor,微信,模型
From: https://www.cnblogs.com/obullxl/p/18651013/NTopic2025010301

相关文章

  • Google Chrome cursor auto edit mode bug All In One
    GoogleChromecursorautotexteditmodebugAllInOneGoogleChrome光标自动进入文本编辑模式bugtextcursorbug问题分析:可能是清洁键盘的时候,不小心按到了F7键,导致自动开启了插入符号浏览模式solutionsPresstheF7keyofkeybaord,TurnOn/TurnOff......
  • 2025 第一弹:3 分钟带你使用 Cursor 生成新年祝福
    2025第一弹:3分钟带你使用Cursor生成新年祝福项目效果项目简介Cursor是一个由OpenAI开发的AI写作助手,它可以帮助你快速生成文本、代码、图像等。这一次我们使用Cursor来生成一个新年祝福的动画,并使用Vue3和Vite4来实现。要求是不能编写任何代码,只使用C......
  • ai编程助手cursor初步使用体验
    一前言前面介绍了通义灵码等国内ai编程助手,这一篇写写国外的。cursor是一款ai编程助手,因为他包含ChaGpt4和Claude3.5等先进的ai大模型来辅助编成。同时它又是一个像vscode的代码编辑器,它基于VSCode修改而来,如果平常使用VSCode进行开发,那么可以非常便捷地迁移过到cursor。简......
  • cursor-vip:免费试用cursor Pro的神器
    cursor-vip是一个为cursor代码编辑器提供的VIP账号工具,只要下载软件,无需登录即可享用Pro账号带来的高级体验,下面是使用方法:一、安装cursor软件    直接在官网下载即可:Cursor-TheAICodeEditor二、安装cursor-vip工具       在MacOS/Linux中,请......
  • cursor 1秒钟写的登录页面,真好看
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>炫酷登录页面</title>&......
  • 用 Cursor 写出第一个程序
    大家好,我是汤师爷最近几个月,Cursor迅速走红,成为一款强大的编程助手。Cursor不仅使用简单,而且通过集成各种大模型技术,编程能力一流。Cursor是什么?Cursor是一个类似VSCode的编辑器,集成了GPT-4、Claude3.5等LLM模型。它本质上是在VSCode的基础上添加了AI辅助编程功能。从界面布......
  • Sealos Devbox 基础教程:使用 Cursor 从零开发一个 One API 替代品
    随着技术的成熟和AI的崛起,很多原本需要团队协作才能完成的工作现在都可以通过自动化和智能化的方式完成。于是乎,单个开发者的能力得到了极大的提升-借助各种工具,一个人就可以完成开发、测试、运维等整条链路上的工作,渡劫飞升成为真正的“全干工程师”。之前我们分享过一些入......
  • cursor无敌了
    作者:京东物流董振阳0、CursorIDECursor是一款基于人工智能的代码编辑器,创建了一个集成开发环境(IDE)。旨在帮助开发人员编写代码,并于AI进行实时互动,提供写代码建议、错误检测和自动补全功能。支持多种编程语言(如Python、JavaScript、Java等) 1、快速开始1、官网下载cursor:htt......
  • Css cursor设置成光标
    在CSS中,可以使用cursor属性来设置鼠标光标的样式。以下是一些常用的光标样式以及它们的值:default -默认光标(通常是一个箭头)none -不显示光标context-menu -右键菜单光标help -帮助光标(通常是一个问号)pointer -指针光标(通常用于链接)progres......
  • 使用 PowerShell 脚本为 Cursor 添加右键菜单项
    使用PowerShell脚本为Cursor添加右键菜单项一、日常工作中的效率提升 通过右键菜单快速访问常用程序可以显著提高效率。本文将介绍如何使用PowerShell脚本为Cursor应用程序添加右键菜单项,使你能够方便地在文件、文件夹以及文件夹背景上通过右键菜单直接打开Cursor。......