微信小程序开发培训指南：我的订单页面设计

创作时间:

作者:

@小白创作中心

微信小程序开发培训指南：我的订单页面设计

1.1 任务描述及实现思路

任务目标

实现包含用户信息展示和订单导航功能的"我的"页面，具备以下功能：

用户头像和昵称展示
订单状态导航（全部/待付款/待收货等）
优惠券数量展示
页面样式统一规范

功能流程图

graph TD
    A[我的页面] --> B[用户信息模块]
    A --> C[订单导航模块]
    B --> B1(用户头像)
    B --> B2(用户昵称)
    B --> B3(账号信息)
    C --> C1(全部订单)
    C --> C2(待付款)
    C --> C3(待收货)
    C --> C4(售后订单)
    C --> C5(优惠券)

技术路线

使用flex布局实现导航列表
通过wx.getUserInfo获取用户信息
使用绝对定位实现右侧箭头布局
通过setNavigationBarColor动态修改导航栏样式

1.2 对应知识点准备

1.2.1 列表式导航实现技巧

<!-- 典型导航项结构 -->
<view class="item">
  <view class="img">
    <image src="/images/icon.png"/>
  </view>
  <view class="name">菜单名称</view>
  <view class="detail">
    <text class="count">状态数量</text>
    <text>></text>
  </view>
</view>

1.2.2 用户授权流程

// 获取用户信息完整流程
wx.getSetting({
  success(res) {
    if (!res['scope.userInfo']) {
      wx.authorize({
        scope: 'scope.userInfo',
        success() {
          wx.getUserInfo({
            success: function(res) {
              // 更新页面数据
              this.setData({userInfo: res.userInfo})
            }
          })
        }
      })
    }
  }
})

1.2.3 样式设计要点

/* 导航项通用样式 */
.item {
  display: flex;
  align-items: center;
  padding: 15rpx 20rpx;
  background-color: #fff;
  position: relative;
}

/* 右侧箭头定位技巧 */
.detail {
  position: absolute;
  right: 20rpx;
  display: flex;
  align-items: center;
}

知识点拓展：小程序授权策略演进

2021年后需使用button组件触发授权
建议使用open-type="getUserInfo"的按钮
需处理用户拒绝授权的场景

1.3 案例实现

1.3.1 页面结构（me.wxml）

<!-- 用户信息模块 -->
<view class="user-section">
  <image class="avatar" src="{{userInfo.avatarUrl}}"/>
  <view class="info">
    <text class="name">{{userInfo.nickName}}</text>
    <text class="account">账号:356725727_k</text>
  </view>
</view>

<!-- 订单导航模块 -->
<view class="nav-list">
  <view class="nav-item" wx:for="{{navList}}" wx:key="index">
    <image class="nav-icon" src="{{item.icon}}"/>
    <text class="nav-text">{{item.title}}</text>
    <view class="nav-extra">
      <text wx:if="{{item.count}}" class="count">{{item.count}}</text>
      <text class="arrow">></text>
    </view>
  </view>
</view>

1.3.2 页面样式（me.wxss）

/* 用户信息模块样式 */
.user-section {
  display: flex;
  align-items: center;
  padding: 30rpx;
  background: #F54844;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  color: #fff;
  font-size: 36rpx;
  margin-bottom: 10rpx;
}

/* 导航项样式 */
.nav-list {
  margin-top: 20rpx;
  background: #fff;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.nav-extra {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.count {
  color: #E4393C;
  margin-right: 15rpx;
}

1.3.3 业务逻辑（me.js）

Page({
  data: {
    userInfo: {},
    navList: [
      {icon: '/images/icon/all.png', title: '全部订单'},
      {icon: '/images/icon/pending.png', title: '待付款', count: 2},
      {icon: '/images/icon/receiving.png', title: '待收货'},
      {icon: '/images/icon/after-sale.png', title: '售后订单'},
      {icon: '/images/icon/coupon.png', title: '优惠券', count: 4}
    ]
  },

  onLoad() {
    this.checkAuth()
  },

  // 检查用户授权状态
  checkAuth() {
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          this.getUserInfo()
        }
      }
    })
  },

  // 获取用户信息
  getUserInfo() {
    wx.getUserInfo({
      success: res => {
        this.setData({
          userInfo: res.userInfo
        })
        wx.setNavigationBarTitle({ title: '我的' })
      }
    })
  }
})

关键代码解析：