微信小程序学习笔记（八）----用户个人中心界面

到了实现三个菜单里面最后一个个人中心页面的时候了，这个没有自己写，因为写到现在虽然对小程序前端有了一些了解，但是还谈不上很熟悉，所以借鉴了一个网友的文章，在他的基础上自己改了一下，因为之前的我直接用是显示不全的，不过改了之后不如之前好看，后面会附上这个网友的文章地址。

最终我实现的效果是这样的：

其实用到的东西并不多，主要还是一些前端的样式，下面是实现步骤和代码。

第一，准备图片素材

我依旧还是从阿里矢量图上找的图片，下面附上网站：

http://www.iconfont.cn/collections/detail?cid=29

找到自己需要的矢量图下载png格式就可以了

第二，目录结构

第三，实现代码

.wxml文件

<!--pages/user/user.wxml-->
<view class="mine-wrapper">
  <view class="avatar-wrapper">
    <view>
      <view class="avatar">
        <image style="border-radius:50%;" src="{{userinfo.avatarUrl ? userinfo.avatarUrl:'/images/user/user1.png'}}"></image>
      </view>
      <view class="text">
        <text wx:if="{{userinfo.nickName}}">{{userinfo.nickName}}</text>
        <text wx:else bindtap="toLogin">注册 / 登录</text>
      </view>
      <view class="text">
        <text wx:if="{{userSign==2}}">{{"您还没有填写真实信息,请填写"}}</text>
        <text wx:elif="{{userSign==1}}">{{"会员用户"}}</text>
      </view>
    </view>
  </view>
  <view class="list-wrapper">
    <view class="alllists">
      <block wx:for="{{menuitems}}" wx:key="menu_for">
        <navigator url="{{item.url}}" class="lists">
        <view class='content'>
          <view class="listimg">
            <image src="{{item.icon}}"></image>
          </view>
          <view class="listtext">{{item.text}}</view>
          <view class="listicon">{{item.tips}}</view>
          <view class="arrows">
            <image src="{{item.arrows}}"></image>
          </view>
        </view>
        </navigator>
        <!-- 分割线 -->
        <view class="divLine"></view>
      </block>
    </view>
  </view>
</view>

.js文件

// pages/user/user.js
var _app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    menuitems: [
      { text: '个人资料', url: '#', icon: '/images/user/user1.png', tips: '', arrows: '/images/user/arrows.png' },
      { text: '邀请好友', url: '#', icon: '/images/user/user2.png', tips: '', arrows: '/images/user/arrows.png' },
      { text: '积分兑换', url: '#', icon: '/images/user/user3.png', tips: '', arrows: '/images/user/arrows.png' },
      { text: '帮助说明', url: '#', icon: '/images/user/user4.png', tips: '', arrows: '/images/user/arrows.png' }
    ]
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

.wxss

/* pages/user/user.wxss */
.avatar-wrapper {
  background: #1b82d1;
  padding: 25px 0;
}

.avatar-wrapper .avatar {
  margin: 0 auto;
  text-align: center;
}

.avatar-wrapper .avatar image {
  width: 100px;
  height: 100px;
}

.avatar-wrapper .text {
  text-align: center;
  color: #fff;
}

.listimg image {
  margin-right: 5px;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.content{
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
}

/*分割线样式*/
.divLine{
 background: #E0E3DA;
 width: 100%;
 height: 5rpx;
}

.arrows image {
  vertical-align: middle;
  width: 15px;
  height: 15px;
  margin-left: 500rpx;
}

/* user.wxss */

最后附上借鉴的网友的文章，感谢！

https://blog.youkuaiyun.com/xbw12138/article/details/75213088