动易sitefactorycms 网站配置保存不了问题,携程旅游网站建设的定位,那个网站百度收录快,网上免费发广告怎么发本文记录了如何通过与 Cursor AI 对话#xff0c;全程不写一行代码的情况下#xff0c;完成一个完整的报修小程序。整个过程展示了 AI 如何帮助我们#xff1a; 生成代码 、解决问题、优化实现、完善细节。
先看一下效果图#xff1a; 一、项目配置
首先我是这样和 AI 对…本文记录了如何通过与 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 classcontainer
view classlogin-box
input classinput placeholder请输入用户名 /
button classlogin-btn登录/button
/view
/view
添加样式 login.wxss
.login-box {
...
}
实现登录逻辑 login.js
Page({
...登录处理代码...
})
我好的请帮我完善样式
AI我已添加渐变背景、阴影效果等...
三、首页模块
我首页需要显示用户信息和快捷按钮
AI我来设计首页布局
index.wxml 代码
view classcontainer
view classheader
text您好{{userInfo.username}}/text
/view
view classquick-actions
...三个操作按钮...
/view
/view
添加样式和交互...
我最近报修记录怎么显示
AI我来添加报修列表组件
view classrepair-list
view classrepair-item wx:for{{recentRepairs}}
...列表项内容...
/view
/view
四、报修表单
我需要一个完整的报修表单
AI我来实现表单页面
new.wxml
form bindsubmitsubmitRepair
view classform-group
text classlabel报修人/text
input namereporter value{{userInfo.username}} /
/view
...其他表单字段...
/form
添加样式美化表单
实现提交逻辑
添加表单验证
我表单样式不够美观
AI我来优化样式
.form-group {
margin-bottom: 30rpx;
...
}
五、报修列表
我需要分页显示报修记录
AI我来实现列表页面
list.wxml
scroll-view
bindscrolltolowerloadMore
refresher-enabled{{true}}
view classrepair-item wx:for{{repairs}}
...列表项内容...
/view
/scroll-view
实现分页加载逻辑
添加下拉刷新
优化列表样式
六、个人中心
我需要个人中心页面
AI我来实现
admin.wxml
view classcontainer
view classuser-info
text classavatar-text{{userInfo.username[0]}}/text
...
/view
view classmenu-list
...菜单项...
/view
/view 添加退出登录功能
修改 app.js添加全局的登录状态管理
// 添加登出方法
logout(){
return newPromise((resolve) {
// 清除本地存储wx.clearStorageSync();
// 清除全局数据
this.globalData.userInfonull;
// 跳转到登录页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 的对话式开发 无需编写代码就能完成项目 大大提升开发效率 代码质量有保证 学习了很多技巧
这种开发方式特别适合 个人开发者 快速原型验证 学习新技术 小型项目开发
希望这个分享对大家有帮助
