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

wxml

  
    
      
    
    
      
    
  


  
    
      
        
          
           工号
          
             {{user.empNo}}
          
        
      
      
        
          
           姓名
          
            {{user.name}}
          
        
      

      
        
          
           性别
          
            男
            女
          
        
      

      
        
          
           手机
          
             {{user.phone}}
          
        
      
    
  

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。