微信小程序简单的用户页面模板

wxml

<view class='index-contier'>
  <view class="index-center">
    <view class="logo">
      <open-data type="userAvatarUrl" class="userinfo" id="userinfo1"></open-data>
    </view>
    <view id="userinfo2">
      <open-data type="userNickName" class="userinfo"></open-data>
    </view>
  </view>
</view>
<view class='inform'>
  <view class="item-box">
    <view class="items">
      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/manger.png"></image>
          <i> 工号</i>
          <span class="item-data">
            <i class="rankpace"> {{user.empNo}}</i>
          </span>
        </view>
      </view>
      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/name.png"></image>
          <i> 姓名</i>
          <span class="item-data">
            <i class="rankpace">{{user.name}}</i>
          </span>
        </view>
      </view>

      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/sex.png"></image>
          <i> 性别</i>
          <span class="item-data">
            <i wx:if="{{user.sex == '1'}}">男</i>
            <i wx:if="{{user.sex == '0'}}">女</i>
          </span>
        </view>
      </view>

      <view class="item">
        <view class="inner txt">
          <image class="item-icon" mode="widthFix" src="/img/phone.png"></image>
          <i> 手机</i>
          <span class="item-data">
            <i class="rankpace"> {{user.phone}}</i>
          </span>
        </view>
      </view>
    </view>
  </view>
</view>

js

var app = getApp()
Page({
  data: {
    user: {},
  },
  onShow: function (options) {
    console.log()
    var that = this;
    wx.request({
      url: app.globalData.root + "wx/" + app.globalData.openid + ".do",
      method: 'GET',
      header: {
        'Content-type': 'application/json'
      },
      success: function (res) {
        that.setData({ user: res.data });
      }
    });
  }
})

css

.img {
  width: 60rpx;
  height: 60rpx;
  margin-top: 18rpx;
}

.index-contier {
  color: #fff;
  font-size: 12px;
  width: 100%;
  height: 570rpx;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("图片路径");
}

.index-left {
  float: left;
  width: 30%;
  text-align: center;
  margin-top: 477rpx;
  color: #000;
}

.index-center {
  float: left;
  width: 40%;
  text-align: center;
  margin-top: 240rpx;
  color: #000;
}

.logo {
  margin: 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 40px;
}

.index-right {
  float: left;
  width: 30%;
  text-align: center;
  margin-top: 477rpx;
  color: #000;
}

.index-right image {
  height: 100%;
  width: 100%;
}

.inform {
  padding: 0 6px;
  font-size: 30rpx;
}

#userinfo1 {
  width: 185rpx;
  height: 185rpx;
  /* margin:20rpx; */
  border-radius: 50%;
  display: flex;
  overflow: hidden;
  text-align: center;
}

#userinfo2 {
  font-family: "微软雅黑";
  font-size: 15px;
  margin-top: 75rpx;
  color:#ffffff;

}

/* pages/leftSwiperDel/index.wxss */

view {
  box-sizing: border-box;
}

.item-box {
  width: 700rpx;
  margin: 0 auto;
}

.items {
  width: 100%;
}

.item {
  position: relative;
  border-top: 2rpx solid #eee;
  height: 110rpx;
  line-height: 120rpx;
  overflow: hidden;
}

.item:last-child {
  border-bottom: 2rpx solid #eee;
}

.inner {
  position: absolute;
  top: 0;
}

.inner.txt {
  background-color: #fff;
  width: 100%;
  z-index: 5;
  padding: 0 10rpx;
  transition: left 0.2s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inner.del {
  background-color: #e64340;
  width: 180rpx;
  text-align: center;
  z-index: 4;
  right: 0;
  color: #fff;
}

.item-icon {
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
  margin-right: 16rpx;
  margin-left: 6px;
  border-radius: 50%;
}

.item-data {
  margin-left: 15%;
}

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：473819131。