【行业认证·权威头衔】✔ 华为云天团核心成员特约编辑/云享专家/开发者专家/产品云测专家✔ 开发者社区全满贯CSDN博客商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金亚马逊51CTO顶级博主✔ 技术生态共建先锋横跨鸿蒙、云计算、AI等前沿领域的技术布道者【荣誉殿堂】 连续三年蝉联华为云十佳博主2022-2024 双冠加冕CSDN年度博客之星TOP220222023 十余个技术社区年度杰出贡献奖得主【知识宝库】覆盖全栈技术矩阵◾ 编程语言.NET/Java/Python/Go/Node…◾ 移动生态HarmonyOS/iOS/Android/小程序◾ 前沿领域物联网/网络安全/大数据/AI/元宇宙◾ 游戏开发Unity3D引擎深度解析文章目录项目实战使用 AI 编程工具辅助实现“我的”页面1. 任务目标2. 任务实施AI 提示词完整3. AI 生成页面配置 pages/my/my.json页面结构 pages/my/my.wxml页面样式 pages/my/my.wxss页面逻辑 pages/my/my.js4. 优化建议5. 页面展示注意事项项目实战使用 AI 编程工具辅助实现“我的”页面1. 任务目标实现“我的”页面列表式导航功能学会使用 WXML 进行页面布局、使用 WXSS 进行样式渲染、使用 JavaScript 进行数据绑定及列表式导航功能的应用。“我的”页面可以分为 3 部分部分内容第 1 部分与登录相关的内容包括头像和昵称。第 2 部分与订单相关的内容包括“待付款”“待收货”“已完成”3 个标签。第 3 部分采用列表式导航包括“我的消息”“我的收藏”“账户余额”“修改密码”“意见反馈”“清除缓存”“知识扩展”等标签。2. 任务实施打开通义灵码输入以下内容并发送如图 2.7 所示。AI 提示词完整微信小程序实现“我的”页面可以分为3部分 第1部分宽为100%高为90px背景色为FFA500头像和昵称垂直居中、靠左显示 第2部分是与订单相关的内容背景色为白色分为上下两部分上面部分显示“我的订单”标题下面部分是“待付款”“待收货”“已完成”的图标和文字图标和文字上下显示 第3部分采用列表式导航包括“我的消息”“我的收藏”“账户余额”“修改密码”“意见反馈”“清除缓存”“知识扩展”等标签宽度为100%高为90px左边是名称右边是。等待 AI 编程工具的生成结果。3. AI 生成通义灵码根据需求生成了实现“我的”页面的代码包括 WXML 布局、WXSS 样式及 JS 数据绑定实现了用户信息展示、订单状态导航及功能列表跳转功能。图 2.8 所示为通义灵码生成结果。以下为完整的 AI 生成代码示例可根据实际项目调整。页面配置pages/my/my.json{navigationBarTitleText:我的,navigationBarBackgroundColor:#FF6600,navigationBarTextStyle:white}页面结构pages/my/my.wxml!-- 我的会员头图 订单卡片 分组菜单 --viewclasspage!-- 顶部资料区与导航栏同色衔接 --viewclassheaderviewclassprofileviewclassavatar-wrapimageclassavatarsrc/images/avatar-default.pngmodeaspectFill/image/viewviewclassprofile-mainviewclassname-rowtextclassname用户昵称/texttextclassbadge普通会员/text/viewtextclassuidID 10086 · 欢迎来到莫凡商城/text/view/view/view!-- 订单上浮卡片缩短头图与列表的割裂感 --viewclasscard order-cardviewclasscard-headtextclasscard-title我的订单/textviewclasscard-morehover-classtapbindtaponNavTapdata-typeorderstext全部订单/texttextclassarrow›/text/view/viewviewclassorder-listviewclassorder-itemhover-classtapbindtaponNavTapdata-typependingPayviewclassicon-wrapimagesrc/images/icon-pending-payment.pngmodeaspectFit/imagetextwx:if{{pendingPay}}classdot{{pendingPay}}/text/viewtextclassorder-label待付款/text/viewviewclassorder-itemhover-classtapbindtaponNavTapdata-typependingRecvviewclassicon-wrapimagesrc/images/icon-pending-receipt.pngmodeaspectFit/imagetextwx:if{{pendingRecv}}classdot{{pendingRecv}}/text/viewtextclassorder-label待收货/text/viewviewclassorder-itemhover-classtapbindtaponNavTapdata-typecompletedviewclassicon-wrapimagesrc/images/icon-completed.pngmodeaspectFit/image/viewtextclassorder-label已完成/text/view/view/view!-- 常用功能 --viewclasscard menu-cardviewclassmenu-itemwx:for{{menus}}wx:keytypehover-classtapbindtaponNavTapdata-type{{item.type}}viewclassmenu-lefttextclassmenu-markstylebackground:{{item.bg}}; color:{{item.color}};{{item.mark}}/texttextclassmenu-text{{item.name}}/text/viewviewclassmenu-righttextwx:if{{item.extra}}classmenu-extra{{item.extra}}/texttextclassarrow›/text/view/view/viewviewclassfooter-tip莫凡商城 · 用心做好每一单/view/view页面样式pages/my/my.wxss/* 我的页卡片化、缩短行高、与商城橙色主题对齐 */.page{min-height:100vh;padding-bottom:48rpx;background:#f4f5f7;box-sizing:border-box;}.header{padding:32rpx 32rpx 88rpx;background:linear-gradient(180deg,#ff6600 0%,#ff8a33 100%);}.profile{display:flex;align-items:center;}.avatar-wrap{width:128rpx;height:128rpx;margin-right:24rpx;border-radius:50%;padding:4rpx;background:rgba(255,255,255,0.55);box-sizing:border-box;}.avatar{width:100%;height:100%;border-radius:50%;background:#fff;}.profile-main{flex:1;min-width:0;}.name-row{display:flex;align-items:center;margin-bottom:12rpx;}.name{font-size:36rpx;font-weight:700;color:#fff;margin-right:12rpx;}.badge{padding:4rpx 12rpx;font-size:20rpx;color:#ff6600;background:#fff;border-radius:20rpx;}.uid{font-size:24rpx;color:rgba(255,255,255,0.86);}.card{margin:0 24rpx 24rpx;background:#fff;border-radius:20rpx;overflow:hidden;}.order-card{margin-top:-56rpx;box-shadow:0 8rpx 24rpxrgba(255,102,0,0.08);}.card-head{display:flex;align-items:center;justify-content:space-between;padding:24rpx 28rpx 8rpx;}.card-title{font-size:30rpx;font-weight:650;color:#222;}.card-more{display:flex;align-items:center;font-size:24rpx;color:#999;}.order-list{display:flex;padding:12rpx 0 28rpx;}.order-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:16rpx 0;}.icon-wrap{position:relative;width:80rpx;height:80rpx;margin-bottom:12rpx;}.icon-wrap image{width:80rpx;height:80rpx;}.dot{position:absolute;top:-8rpx;right:-8rpx;min-width:32rpx;height:32rpx;padding:0 8rpx;line-height:32rpx;text-align:center;font-size:20rpx;color:#fff;background:#ff4d4f;border-radius:16rpx;box-sizing:border-box;}.order-label{font-size:24rpx;color:#555;}.menu-card{padding:0 8rpx;}.menu-item{display:flex;align-items:center;justify-content:space-between;height:104rpx;padding:0 20rpx;border-bottom:1rpx solid #f2f3f5;}.menu-item:last-child{border-bottom:none;}.menu-left, .menu-right{display:flex;align-items:center;}.menu-mark{width:56rpx;height:56rpx;margin-right:20rpx;line-height:56rpx;text-align:center;font-size:22rpx;border-radius:14rpx;}.menu-text{font-size:30rpx;color:#222;}.menu-extra{margin-right:8rpx;font-size:24rpx;color:#bbb;}.arrow{font-size:36rpx;color:#ccc;line-height:1;}.tap{opacity:0.72;}.footer-tip{padding:8rpx 0 24rpx;text-align:center;font-size:22rpx;color:#c5c5c5;}页面逻辑pages/my/my.jsPage({data:{pendingPay:2,pendingRecv:1,menus:[{type:message,name:我的消息,mark:讯,extra:3条未读,bg:#fff3e8,color:#ff6600},{type:collect,name:我的收藏,mark:藏,extra:,bg:#e8f8ef,color:#07c160},{type:balance,name:账户余额,mark:额,extra:128.00,bg:#e6f4ff,color:#10aeff},{type:password,name:修改密码,mark:密,extra:,bg:#f4f0ff,color:#8a6dff},{type:feedback,name:意见反馈,mark:馈,extra:,bg:#fff3e8,color:#ff6600},{type:cache,name:清除缓存,mark:清,extra:12.6MB,bg:#f0f0f0,color:#666},{type:knowledge,name:知识扩展,mark:知,extra:CSS 案例,bg:#fff3e8,color:#ff6600}]},onNavTap(e){consttypee.currentTarget.dataset.type;consttitles{orders:全部订单,pendingPay:待付款,pendingRecv:待收货,completed:已完成,message:我的消息,collect:我的收藏,balance:账户余额,password:修改密码,feedback:意见反馈,knowledge:知识扩展};if(typecache){wx.showModal({title:清除缓存,content:确定清除本地缓存吗不会影响账号数据。,confirmColor:#ff6600,success:(res){if(res.confirm){wx.showToast({title:缓存已清除,icon:success});}}});return;}if(typeknowledge){wx.navigateTo({url:/pages/display-demo/display-demo});return;}wx.showToast({title:titles[type]||type,icon:none});}});4. 优化建议在运行 AI 生成的代码后发现其结果与我们的实际需求还有一定的差距可以从以下几个方面进行优化。对需求进行更加细致的描述后再次进行 AI 生成。例如明确头像尺寸、字体大小、图标路径、间距、点击跳转逻辑等。分模块进行生成。例如先完成用户信息展示模块内容再完成订单状态导航模块内容最后完成功能列表跳转模块内容。根据自己的实际需求手动调整代码使其满足需求。AI 生成的代码是基础版本需要结合项目实际进行修改。补充优化建议将px替换为rpx提升不同屏幕的适配性。图标和头像使用真实图片资源确保路径正确。增加登录状态判断未登录时显示“点击登录”。为列表项添加点击态和跳转逻辑。订单数量可动态绑定后端数据。使用wx:key优化列表渲染性能。清除缓存功能增加二次确认避免误操作。用户信息从本地缓存或后端接口获取不要写死。5. 页面展示代码经过优化后运行代码页面样式如图所示。页面整体结构如下顶部用户信息区背景为橙色#FFA500高度 90px头像和昵称垂直居中、靠左显示。订单区背景为白色上方显示“我的订单”标题下方显示“待付款”“待收货”“已完成”三个图标和文字图标和文字上下排列。列表式导航区背景为白色每项宽度 100%高度 90px左侧为功能名称右侧为“”箭头。包括“我的消息”“我的收藏”“账户余额”“修改密码”“意见反馈”“清除缓存”“知识扩展”等。注意事项AI 生成代码后必须人工审核尤其是跳转逻辑和缓存清理逻辑。确保图片路径真实存在否则页面会显示空白。页面需要在app.json的pages中注册。使用this.setData()更新数据不能直接修改this.data。列表渲染必须提供wx:key避免性能问题和状态丢失。使用rpx替代px提升多屏幕适配效果。清除缓存前应弹出确认框避免误操作。用户信息应从本地缓存或接口获取不要写死。如果使用 AI 继续优化提示词应尽可能具体包括尺寸、颜色、布局、交互和输出格式。