devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小程序实现漂亮的个人中心版面_微信小程序非常优美的个人中心页面

作者：羊村懒王 | 2024-03-14 06:01:42

赞

踩

微信小程序非常优美的个人中心页面

先放上效果图，然后再解构如何实现。
在这里插入图片描述
常见的个人中心内容包括了：
头像，用户昵称，会员信息，充值信息，还有个人设置，收货地址，订单历史，收藏记录，浏览历史等等。
这些板块都可以用组件来实现。
页面逻辑中：
将头像和昵称还有会员信息放在顶部在一个宣传版面展示。剩余的个人中心的功能则单独拿出来做一个列表功能。很多人可能会想到，实现列表功能，列表有多少是不是对应的功能函数就要有多少呢，其实大可不必。除了navgator组件和button组件外，我们也可以使用view来实现。个人中心的原生API则直接使用button组件的opentype能力，其余我们则用view的属性绑定来实现操作传参。
详细见view标签内的属性：

bindtap=“openPage” class=“item” data-url="/pages/my_course/my_course" formType=“submit” hoverClass=“none”

统一命名一个openPage方法来跳转，跳转的url就是data-url。参数需要添加的同样以data-xx的形式，在openpage的参数中就可以获取到。
实现页面的代码：

<!--pages/my/my.wxml-->
<form reportSubmit bindsubmit="submitFormId">
  <view class="header">
    <view class="user" hoverClass="none">
      <view class="user_box">
        <view catchtap="previewImage" class="logo">
          <image src="{{userInfo.avatarUrl}}"></image>
          <view class="cu-tag badge {{male==1?'icon-male bg-blue':'icon-female bg-pink'}}"></view>
        </view>
        <block wx:if="{{vip}}">
          <view class="user_info">
            <view class="user_name">
              <text>{{userInfo.nickName}}</text>
              <image src="/images/main/vip.png"></image>
            </view>
            <view class="vip_expires">vip到期时间：{{vip_time}}，<button class="joinVip" bindtap='joinVip'>马上续费</button></view>
          </view>
        </block>
        <block wx:else>
          <view class="user_info">
            <view class="user_name">
              <text>{{userInfo.nickName}}</text>
            </view>
            <view class="vip_expires" bindtap='joinVip'>您还不是VIP，
              <span style="color:blue;">请充值</span>
            </view>
          </view>
        </block>
      </view>
    </view>
    <image src='https://edu.qinhui88.com/assets/wx/image/wave.gif' mode='scaleToFill' class='gif-wave'></image>
    <view class="info" style='display:none'>
      <view class="item" bindtap=''>
        <text class="count">{{today_s}}</text>
        <text class="title">坚持学习/{{practiceday}}天</text>
      </view>
      <view class="item">
        <text class="count">{{studytime}}</text>
        <text class="title">学习时长/{{studytime}}分钟</text>
      </view>
      <view class="item">
        <text class="count">{{practicetime}}</text>
        <text class="title">完成练习/{{practicetime}}节</text>
      </view>
    </view>
  </view>
  <!-- 功能列表 -->
  <view class="nav">
    <view bindtap="openPage" class="item" data-url="/pages/my_course/my_course" formType="submit" hoverClass="none">
      <view class='wallet'>
        <text class='icon-news icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>我的课程</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </view>
    <view bindtap="openPage" class="item" data-url="/pages/collect/collect" formType="submit" hoverClass="none">
      <view class='wallet'>
        <text class='icon-favor icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>我的收藏</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </view>
    <!-- <view bindtap="openPage" class="item" data-url="/pages/wallet/wallet" formType="submit" hoverClass="none">
      <view class='wallet'>
        <text class='icon-moneybag icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>我的钱包</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </view> -->
    <!--  -->
    <view bindtap="openPage" class="item" data-url="/pages/purchase_history/purchase_history" formType="submit" hoverClass="none">
      <view class='wallet'>
        <text class='icon-form icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>我的订单</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </view>
    <button bindtap="chooseGeren" class="item">
      <view class='wallet'>
        <text class='icon-location icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>我的地址</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </button>
    <view bindtap="openPage" class="item" data-url="/pages/about/about" formType="submit" hoverClass="none">
      <view class='wallet'>
        <text class='icon-info icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>关于我们</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </view>
    <!-- <view bindtap="openPage" class="item" data-url="/pages/advice/advice" formType="submit" hoverClass="none">
      <view class='wallet'><text class='icon-deit icon'></text><text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text><text>意见反馈</text></view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </view> -->
    <button class="item" bindtap='changeView'>
      <view class='wallet'>
        <text class='icon-settings icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>设置中心</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </button>
    <button class="item" formType="submit" hoverClass="none" openType="contact">
      <view class='wallet'>
        <text class='icon-service icon'></text>
        <text decode="{{true}}" space="{{true}}">&nbsp;&nbsp;</text>
        <text>联系客服</text>
      </view>
      <view class="icon">
        <text class='icon-right'></text>
      </view>
    </button>
  </view>
</form>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137

样式上为了美观，可以自定义，这里使用的样式使用的是colorUi提供的UI样式。

/* pages/my/my.wxss */

page {
  padding-bottom: 50rpx;
  background: #f8f8f8;
}

.header {
  padding: 0 25rpx;
  padding-top: 40rpx;
  padding-bottom: 50rpx;
  width: 100%;
  background: linear-gradient(#c21327, #e42e42);
  position:relative;
}

.user {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .gif-wave{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}
.user_box {
  display: flex;
  align-items: center;
}

.edit {
  display: flex;
  width: 70rpx;
  height: 70rpx;
  padding: 18rpx;
  box-sizing: border-box;
}

.edit image {
  width: 100%;
  height: 100%;
  transform: rotate(180deg);
}

.logo {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  background: #fff;
  will-change: transform;
  position:relative;
}

.logo image {
  width: 100%;
  height: 100%;
}

.logo image {
  width: 100%;
  height: 100%;
  border-radius: 100%;
  will-change: transform;
}

.user_info {
  padding-left: 32rpx;
}

.user_name {
  display: flex;
  align-items: center;
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.user_name image {
  margin-left: 16rpx;
  width: 84rpx;
  height: 31rpx;
}

.vip_expires {
  margin-top: 12rpx;
  font-size: 27rpx;
  color: #fff;
}

.info {
  display: flex;
  margin-top: 62rpx;
  width: 100%;
  height: 110rpx;
}

.info .item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  line-height: 1.5;
  border-right: 1px solid #fff;
}

.info .item:last-child {
  border-right: none;
}

.info .item .count {
  font-size: 46rpx;
  color: #fff;
}

.info .item .title {
  font-size: 24rpx;
  color: #fff;
}

.card {
  display: flex;
  justify-content: space-between;
  padding: 25rpx;
  background: #fff;
}

.card .item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 340rpx;
  height: 200rpx;
  font-size: 34rpx;
  color: #fff;
  border-radius: 16rpx;
  background: #d2d2d2;
  overflow: hidden;
  will-change: transform;
}

.card .item image {
  width: 100%;
  height: 100%;
}

.nav {
  padding: 0 25rpx;
  font-size: 34rpx;
  background: #fff;
}

.nav .item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e5e5;
  padding: 30rpx 0;
}


.nav button.item {
  margin: 0;
  line-height: inherit;
  font-size: inherit;
}

.nav button.item .new_tips {
  position: relative;
}

.nav button.item .new_tips:before {
  content: '';
  position: absolute;
  top: -2rpx;
  right: -14rpx;
  width: 20rpx;
  height: 20rpx;
  background-color: #f43530;
  border-radius: 100%;
}

.nav .icon {
  display: flex;
  align-items: center;
  font-size: 40rpx;
  color:#333;
}
.nav .wallet{
  display:inline-flex;
}
.nav .wallet .icon {
  color: #c21327;
}

.nav .discount_coupon .icon {
  color: #bd9445;
}

.nav image {
  margin-left: 20rpx;
  width: 40rpx;
  height: 40rpx;
}
.joinVip{
  font-size:27rpx;
  line-height:27rpx;
  display:inline-block;
  color:#dab643;
  text-decoration:underline;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215

最重要的就是JS了，其实从页面功能实现来讲，几乎内容都是要靠获取后台数据来实现的。用户信息，在登陆的时候存储在后台服务器中，在打开个人中心页面的时候请求出来，用户性别标志的显示，同样以后台用户信息的sex值来判断显示图片。
会员信息也是携带在用户信息中一起请求出来，不是会员则显示为不是会员，请购买，是会员则显示会员身份并显示到期时间。图片显示和信息显示可用wx:if

// pages/my/my.js
var e = require("../../utils/util.js"), time = require('../../utils/util.js');
var app = getApp();
Page({
  data: {
    defaultAvatarUrl: "/images/main/default_avatar.png",
    defaultNickName: "用户名称",
    presentCount: 0,
    practiceday: '',
    studytime: '',
    practicetime: "",
    today_s: "",
    vip: false,
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    ColorList: app.globalData.ColorList,
  },

  onLoad: function(options) {
    var that = this,
      userInfo = wx.getStorageSync("_userInfo");
    var userNid = wx.getStorageSync("unionid");
    wx.request({ //位登录
      url: app.globalData.Url + '/api/login/event/userinfo/',
      data: {
        unionid: userNid,
      },
      method: 'POST',
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      success: function (res) {
        console.log('----用户信息', res)
        if (res.data.data.utype == 2) {
          res.data.data.uvipdaoqi = time.toDate(res.data.data.uvipdaoqi)
          that.setData({
            vip: true,
            vip_time: res.data.data.uvipdaoqi,
          })
        } else if (res.data.data.utype == 1) {
          console.log(res.errMsg)
          that.setData({
            vip: false,
          })
        }
        that.setData({
          male:res.data.data.usex
        })
      },
    })
    that.setData({ //转换完毕存储
      userInfo: userInfo,
    })
    wx.getSystemInfo({
      success: function(res) {
        var windowWidth = res.windowWidth * 0.5;
        that.setData({
          //圆点坐标,x为屏幕一半,y为半径与margin-top之和,px
          //后面获取的触摸坐标是px,所以这里直接用px.
          dotPoint: {
            clientX: windowWidth,
            clientY: 250
          }
        })
      }
    })
  },

  onReady: function() {

    
  },
  openPage: function(a) {
    var e = a.currentTarget.dataset.url;
    wx.navigateTo({
      url: e
    });
  },
  joinVip: function() { //加入VIP
    wx.navigateTo({
      url: '../vip/vip',
    })
  },
  chooseGeren: function() {
    wx.navigateTo({
      url: '../form/form',
    })
  },
  changeView: function() {
    wx.openSetting({
      success: (res) => {
        console.log("授权结果..")
        console.log(res)
        if (!res.authSetting["scope.userInfo"] || !res.authSetting["scope.userLocation"] || !res.authSetting["scope.address"] || !res.authSetting["scope.camera"]) {
          console.log(res)
        }
      }
    })
  },
  sign_in: function() {
    wx.navigateTo({
      url: '../sign_in/sign_in',
    })
  },
  onPullDownRefresh() {

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '看看',
      path: 'pages/study/study',
      success: function(res) {
        // 转发成功
        wx.showShareMenu({
          // 要求小程序返回分享目标信息
          withShareTicket: true
        });
      },
      fail: function(res) {
        // 转发失败
      }
    }
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131

下一章讲解微信钱包功能。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/232509
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号