【愚公系列】《微信小程序项目实战（AI编程+视频图解）》012-莫凡商城小程序项目实现“我的”页面

💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.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.js`
  • 🔎4. 优化建议
  • 🔎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

<!-- 我的：会员头图 + 订单卡片 + 分组菜单 --><viewclass="page"><!-- 顶部资料区：与导航栏同色衔接 --><viewclass="header"><viewclass="profile"><viewclass="avatar-wrap"><imageclass="avatar"src="/images/avatar-default.png"mode="aspectFill"></image></view><viewclass="profile-main"><viewclass="name-row"><textclass="name">用户昵称</text><textclass="badge">普通会员</text></view><textclass="uid">ID 10086 · 欢迎来到莫凡商城</text></view></view></view><!-- 订单：上浮卡片，缩短头图与列表的割裂感 --><viewclass="card order-card"><viewclass="card-head"><textclass="card-title">我的订单</text><viewclass="card-more"hover-class="tap"bindtap="onNavTap"data-type="orders"><text>全部订单</text><textclass="arrow">›</text></view></view><viewclass="order-list"><viewclass="order-item"hover-class="tap"bindtap="onNavTap"data-type="pendingPay"><viewclass="icon-wrap"><imagesrc="/images/icon-pending-payment.png"mode="aspectFit"></image><textwx:if="{{pendingPay}}"class="dot">{{pendingPay}}</text></view><textclass="order-label">待付款</text></view><viewclass="order-item"hover-class="tap"bindtap="onNavTap"data-type="pendingRecv"><viewclass="icon-wrap"><imagesrc="/images/icon-pending-receipt.png"mode="aspectFit"></image><textwx:if="{{pendingRecv}}"class="dot">{{pendingRecv}}</text></view><textclass="order-label">待收货</text></view><viewclass="order-item"hover-class="tap"bindtap="onNavTap"data-type="completed"><viewclass="icon-wrap"><imagesrc="/images/icon-completed.png"mode="aspectFit"></image></view><textclass="order-label">已完成</text></view></view></view><!-- 常用功能 --><viewclass="card menu-card"><viewclass="menu-item"wx:for="{{menus}}"wx:key="type"hover-class="tap"bindtap="onNavTap"data-type="{{item.type}}"><viewclass="menu-left"><textclass="menu-mark"style="background:{{item.bg}}; color:{{item.color}};">{{item.mark}}</text><textclass="menu-text">{{item.name}}</text></view><viewclass="menu-right"><textwx:if="{{item.extra}}"class="menu-extra">{{item.extra}}</text><textclass="arrow">›</text></view></view></view><viewclass="footer-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.js

Page({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){consttype=e.currentTarget.dataset.type;consttitles={orders:'全部订单',pendingPay:'待付款',pendingRecv:'待收货',completed:'已完成',message:'我的消息',collect:'我的收藏',balance:'账户余额',password:'修改密码',feedback:'意见反馈',knowledge:'知识扩展'};if(type==='cache'){wx.showModal({title:'清除缓存',content:'确定清除本地缓存吗？不会影响账号数据。',confirmColor:'#ff6600',success:(res)=>{if(res.confirm){wx.showToast({title:'缓存已清除',icon:'success'});}}});return;}if(type==='knowledge'){wx.navigateTo({url:'/pages/display-demo/display-demo'});return;}wx.showToast({title:titles[type]||type,icon:'none'});}});

🔎4. 优化建议

在运行 AI 生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。

1. 对需求进行更加细致的描述后再次进行 AI 生成。
   例如，明确头像尺寸、字体大小、图标路径、间距、点击跳转逻辑等。

2. 分模块进行生成。
   例如先完成用户信息展示模块内容，再完成订单状态导航模块内容，最后完成功能列表跳转模块内容。

3. 根据自己的实际需求手动调整代码，使其满足需求。
   AI 生成的代码是基础版本，需要结合项目实际进行修改。

补充优化建议：

• 将px替换为rpx，提升不同屏幕的适配性。
• 图标和头像使用真实图片资源，确保路径正确。
• 增加登录状态判断，未登录时显示“点击登录”。
• 为列表项添加点击态和跳转逻辑。
• 订单数量可动态绑定后端数据。
• 使用wx:key优化列表渲染性能。
• 清除缓存功能增加二次确认，避免误操作。
• 用户信息从本地缓存或后端接口获取，不要写死。

🔎5. 页面展示

代码经过优化后，运行代码，页面样式如图所示。

页面整体结构如下：

1. 顶部用户信息区
   背景为橙色（#FFA500），高度 90px，头像和昵称垂直居中、靠左显示。

2. 订单区
   背景为白色，上方显示“我的订单”标题，下方显示“待付款”“待收货”“已完成”三个图标和文字，图标和文字上下排列。

3. 列表式导航区
   背景为白色，每项宽度 100%，高度 90px，左侧为功能名称，右侧为“>”箭头。包括“我的消息”“我的收藏”“账户余额”“修改密码”“意见反馈”“清除缓存”“知识扩展”等。

🔎注意事项

1. AI 生成代码后必须人工审核，尤其是跳转逻辑和缓存清理逻辑。
2. 确保图片路径真实存在，否则页面会显示空白。
3. 页面需要在app.json的pages中注册。
4. 使用this.setData()更新数据，不能直接修改this.data。
5. 列表渲染必须提供wx:key，避免性能问题和状态丢失。
6. 使用rpx替代px，提升多屏幕适配效果。
7. 清除缓存前应弹出确认框，避免误操作。
8. 用户信息应从本地缓存或接口获取，不要写死。
9. 如果使用 AI 继续优化，提示词应尽可能具体，包括尺寸、颜色、布局、交互和输出格式。