与 Cursor AI 对话编程:2小时开发报修维修微信小程序

本文记录了如何通过与 Cursor AI 对话,全程不写一行代码的情况下,完成一个完整的报修小程序。整个过程展示了 AI 如何帮助我们:

  • 生成代码 、解决问题、优化实现、完善细节。

先看一下效果图:

图片

图片

图片

图片

图片

一、项目配置

首先我是这样和 AI 对话的:

我:我想开发一个报修小程序,需要哪些基础配置?
AI:我来帮你配置 app.json,首先需要:
设置导航栏样式
配置底部 tabBar
注册所有页面路径
我:好的,请帮我实现
AI:我已经生成了配置代码:
{
"pages": [
"pages/login/login",
"pages/index/index",
...
],
"window": {
"navigationBarBackgroundColor": "#4CAF50",
...
}
}
我:很好,帮我创建这些页面
AI:好的,我会依次创建每个页面的 wxml、wxss、js 文件

二、登录页面

我:需要一个简单的登录页面,输入用户名即可
AI:我来帮你设计登录页面:
先创建 login.wxml:
<view class="container">
<view class="login-box">
<input class="input" placeholder="请输入用户名" />
<button class="login-btn">登录</button>
</view>
</view>
添加样式 login.wxss:
.login-box {
...
}
实现登录逻辑 login.js:
Page({
...登录处理代码...
})
我:好的,请帮我完善样式
AI:我已添加渐变背景、阴影效果等...

三、首页模块

我:首页需要显示用户信息和快捷按钮
AI:我来设计首页布局:
index.wxml 代码:
<view class="container">
<view class="header">
<text>您好,{{userInfo.username}}</text>
</view>
<view class="quick-actions">
...三个操作按钮...
</view>
</view>
添加样式和交互...
我:最近报修记录怎么显示?
AI:我来添加报修列表组件:
<view class="repair-list">
<view class="repair-item" wx:for="{{recentRepairs}}">
...列表项内容...
</view>
</view>

四、报修表单

我:需要一个完整的报修表单
AI:我来实现表单页面:
new.wxml:
<form bindsubmit="submitRepair">
<view class="form-group">
<text class="label">报修人</text>
<input name="reporter" value="{{userInfo.username}}" />
</view>
...其他表单字段...
</form>
添加样式美化表单
实现提交逻辑
添加表单验证
我:表单样式不够美观
AI:我来优化样式:
.form-group {
margin-bottom: 30rpx;
...
}

五、报修列表

我:需要分页显示报修记录
AI:我来实现列表页面:
list.wxml:
<scroll-view
bindscrolltolower="loadMore"
refresher-enabled="{{true}}"
<view class="repair-item" wx:for="{{repairs}}">
...列表项内容...
</view>
</scroll-view>
实现分页加载逻辑
添加下拉刷新
优化列表样式

六、个人中心

我:需要个人中心页面
AI:我来实现:
admin.wxml:
<view class="container">
<view class="user-info">
<text class="avatar-text">{{userInfo.username[0]}}</text>
...
</view>
<view class="menu-list">
...菜单项...
</view>
</view>
  1. 添加退出登录功能

修改 app.js添加全局的登录状态管理:
// 添加登出方法
logout(){
return newPromise((resolve) =>{
// 清除本地存储wx.clearStorageSync();
// 清除全局数据
this.globalData.userInfo=null;
// 跳转到登录页wx.reLaunch({
url:'/pages/login/login',
success:() =>{
resolve();
}
});修改 pages/admin/admin.js中的退出登录逻辑:
wx.navigateTo({
url:'/pages/admin/settings'
});
},
onLogout(){wx.showModal({
title:'提示',
content:'确定要退出登录吗?',
success:async(res)=>{
if(res.confirm){wx.showLoading({
title:'退出中...',
mask:true
});try{
await app.logout();wx.hideLoading();
}catch(error){wx.hideLoading();wx.showToast({
title:'退出失败,请重试',
icon:'none'
});
}

七、优化细节

在开发过程中,我只需要描述问题,AI 就能帮我解决:

我:提交报修后页面没有自动刷新
AI:我来修复这个问题:
在提交成功后添加页面刷新逻辑...
我:报修列表样式不够美观
AI:我来优化列表样式:
添加卡片效果、优化间距...
我:需要添加加载提示
AI:我来添加 Loading:
使用 wx.showLoading 实现...

开发心得

  1. 与 AI 对话技巧:

  • 清晰描述需求和问题

  • 分步骤实现功能

  • 及时提出修改建议

  • 注意细节完善

  1. AI 的强大之处:

  • 直接生成完整代码

  • 快速解决各种问题

  • 代码质量有保证

  • 持续优化改进

  1. 开发建议:

  • 先规划后实现

  • 多与 AI 交流

  • 注重用户体验

  • 及时测试验证

总结

通过与 AI 的对话式开发:

  1. 无需编写代码就能完成项目

  2. 大大提升开发效率

  3. 代码质量有保证

  4. 学习了很多技巧

这种开发方式特别适合:

  • 个人开发者

  • 快速原型验证

  • 学习新技术

  • 小型项目开发

希望这个分享对大家有帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/487999.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

汽车车牌标记支持YOLO,COCO,VOC三种格式标记,4000张图片的数据集

本数据集支持YOLO&#xff0c;COCO&#xff0c;VOC三种格式标记汽车车牌&#xff0c;无论是新能源汽车还是油车都能识别标记&#xff0c;该数据集一共包含4000张图片 数据集分割 4000总图像数 训练组 70&#xff05; 2800图片 有效集 20&#xff05; 800图片 测…

共享无人系统,便捷生活触手可得

共享无人系统适用各种无人场景:共享麻将室、共享茶室、共享健身房、共享自习室、共享桌球室&#xff0c;实现线上预约&#xff0c;一键预约&#xff0c;自由组合时间&#xff0c;智能通断电&#xff0c;智能语音提醒。 优惠券是常用的营销工具&#xff0c;后台创建之后发放给会…

使用HTML获取商品详情:技术实现与最佳实践

1. 引言 在电子商务领域&#xff0c;获取商品详情是提升用户体验和增强网站功能性的关键。本文将探讨如何使用HTML结合其他技术手段获取商品详情&#xff0c;并展示如何将这些信息有效地呈现给用户。 2. 理解商品详情页面的结构 在开始编码之前&#xff0c;我们需要了解商品…

怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev

本文引用怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev 在 vscode 设置项中配置 gopls 的 ui.navigation.importShortcut 为 Definition 即可。 "gopls": {"ui.navigation.importShortcut": "Definition" }ui.navigation.i…

从 Zuul 迁移到 Spring Cloud Gateway:一步步实现服务网关的升级

从 Zuul 迁移到 Spring Cloud Gateway&#xff1a;一步步实现服务网关的升级 迁移前的准备工作迁移步骤详解第一步&#xff1a;查看源码第二步&#xff1a;启动类迁移第三步&#xff1a;引入 Gateway 依赖第四步 编写bootstrap.yaml第五步&#xff1a;替换路由配置第六步&#…

【金融贷后】贷后运营精细化管理

文章目录 一、贷后专业术语讲解① 什么是贷后&#xff0c;贷后部是干什么的&#xff1f;② 贷后部门常见组织架构&#xff1f;③ 贷后专业术语有哪些&#xff1f; 二、贷后常用作业手段介绍① 贷后产品形态介绍&#xff1f;② 催收常用的方法&#xff1f; 三、贷后策略岗位介绍…

利用cnocr库完成中文扫描pdf文件的文字识别

很多pdf文件文字识别软件都会收费&#xff0c;免费的网页版可能会带来信息泄露&#xff0c;还有一些类似于腾讯AI和百度AI的接口都有调用次数限制&#xff0c;因此&#xff0c;利用识别正确率极高且免费的cnocr库来自己动手做个pdf文件文字识别程序就是一个很不错的选择。以下程…

论文阅读 -- IDENTIFYING THE RISKS OF LM AGENTS WITHAN LM-EMULATED SANDBOX, ICLR2024

论文链接&#xff1a;https://arxiv.org/pdf/2309.15817 目录 ABSTRACT 1 INTRODUCTION 2 BACKGROUND & PROBLEM STATEMENT 3 CONSTRUCTING TOOLEMU 3.1 EMULATING TOOL EXECUTIONS WITH LANGUAGE MODELS 3.2 DESIGNING AUTOMATIC EVALUATIONS WITH LANGUAGE MODEL…

期末复习-计算机网络篇SCAU

第一章&#xff1a;概述 1.计算机网络的特点&#xff0c;互联网发展的三个阶段 特点&#xff1a;连通性、资源共享 三个阶段&#xff1a; 1969-1990&#xff1a;从单个网络ARPANET向互联网发展 1985-1993&#xff1a;建成了三级结构的互联网 1993-现在&#xff1a;全球范…

TesseractOCR-GUI:基于WPF/C#构建TesseractOCR简单易用的用户界面

前言 前篇文章使用Tesseract进行图片文字识别介绍了如何安装TesseractOCR与TesseractOCR的命令行使用。但在日常使用过程中&#xff0c;命令行使用还是不太方便的&#xff0c;因此今天介绍一下如何使用WPF/C#构建TesseractOCR简单易用的用户界面。 普通用户使用 参照上一篇教…

openGauss开源数据库实战二十一

文章目录 任务二十一 使用JDBC访问openGauss数据库任务目标实施步骤一、准备工作 二、下载并安装JavaSE81 下载JavaSE8安装Java8SE并配置环境变量 三、下载并安装eclipse四、下载并安装openGauss的JDBC驱动包五、使用IDEA编写JDBC测试程序1 使用IDEA的SSH连接虚拟机2 创建项目并…

算法——前缀和

如果我们想要得到数组中一段区间的和最朴素的想法肯定是我们从区间的开始下标遍历到结束下标并累加&#xff0c;但是这显然存在一个问题&#xff0c;时间开销是O&#xff08;n&#xff09;的级别&#xff0c;并且有着大量的重复计算&#xff0c;求[n, m]的和后继续求[n…m…p]区…

可视化建模以及UML期末复习篇----UML图

这是一篇相对较长的文章&#xff0c;如你们所见&#xff0c;比较详细&#xff0c;全长两万字。我不建议你们一次性看完&#xff0c;直接跳目录找你需要的知识点即可。 --------欢迎各位来到我UML国&#xff01; 一、UML图 总共有如下几种&#xff1a; 用例图&#xff08;Use Ca…

Tableau数据可视化与仪表盘搭建

1.Tableau介绍 可视化功能 数据赋能 数据赋能就是将我们的数据看板发布到我们的线上去 这里的IP地址是业务部门可以通过账号密码登入的 我们也可以根据需要下载&#xff0c;选中并点击下载即可 下载下来之后&#xff0c;自己就能根据数据进行自定义的分析 也可以下载图片 还有…

NanoLog起步笔记-7-log解压过程初探

nonolog起步笔记-6-log解压过程初探 再看解压过程建立调试工程修改makefile添加新的launch项 注&#xff1a;重新学习nanolog的README.mdPost-Execution Log Decompressor 下面我们尝试了解&#xff0c;解压的过程&#xff0c;是如何得到文件头部的meta信息的。 再看解压过程 …

设计模式-装饰器模式(结构型)与责任链模式(行为型)对比,以及链式设计

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1.装饰器模式1.1概念1.2作用1.3应用场景1.4特点1.5类与对象关系1.6实现 2责任链模式2.1概念2.2作用2.3应用场景2.4特点2.5类与对象关系2.6实现 3.对比总结 前言…

llama-factory实战: 基于qwen2.5-7b 手把手实战 自定义数据集清洗 微调

基于qwen2.5 手把手实战 自定义数据集 微调&#xff08;llama-factory&#xff09; 准备工作1.数据集准备&#xff08;例:民法典.txt&#xff09;2.服务器准备&#xff08;阿里云 DSW 白嫖&#xff09;3.环境配置pip 升级模型下载微调助手 4.数据集处理脚本文件4.1文本分割(ber…

day08 接口测试(4)知识点完结!!

【没有所谓的运气&#x1f36c;&#xff0c;只有绝对的努力✊】 目录 1、postman读取外部数据文件&#xff08;参数化&#xff09; 1.1 数据文件简介 1.2 导入外部数据文件 1.2.1 csv文件 1.2.2 导入 json文件 1.3 读取数据文件数据 1.4 案例 1.5 生成测试报告 2、小…

基于Springboot的实验室管理系统【附源码】

基于Springboot的实验室管理系统 效果如下&#xff1a; 系统登录页面 实验室信息页面 维修记录页面 轮播图管理页面 公告信息管理页面 知识库页面 实验课程页面 实验室预约页面 研究背景 在科研、教育等领域&#xff0c;实验室是进行实验教学和科学研究的重要场所。随着实验…

selenium学习:等待方式

隐式等待 1.针对查找元素设置最大的超时时间 2.可以全局性的设置 3.不满足时&#xff0c;提示no such element driver.implicitly_wait(5) #对查找元素最大的超时时间&#xff0c;如果超过最大等待时间后&#xff0c;没有找到元素&#xff0c;则会报错&#xff1a;no such #e…