本文记录了如何通过与 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 的对话式开发：
-
无需编写代码就能完成项目
-
大大提升开发效率
-
代码质量有保证
-
学习了很多技巧
这种开发方式特别适合：
-
个人开发者
-
快速原型验证
-
学习新技术
-
小型项目开发
希望这个分享对大家有帮助！
4128
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
