与 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>

添加退出登录功能

修改 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 实现...

开发心得

与 AI 对话技巧：

清晰描述需求和问题
分步骤实现功能
及时提出修改建议
注意细节完善

AI 的强大之处：

直接生成完整代码
快速解决各种问题
代码质量有保证
持续优化改进

开发建议：

先规划后实现
多与 AI 交流
注重用户体验
及时测试验证

总结

通过与 AI 的对话式开发：

无需编写代码就能完成项目
大大提升开发效率
代码质量有保证
学习了很多技巧

这种开发方式特别适合：

个人开发者
快速原型验证
学习新技术
小型项目开发

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