微信小程序个人中心页面 案例

微信小程序 开发，经常会遇到个人中心页面 的需求，为了方便大家使用，决定将个人总想页面进行开源，以供大家参考交流。

一、效果预览

     

 二、源代码

abouthe.json文件

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#F2F2F2",
  "backgroundTextStyle": "light",
  "disableScroll":true,
  "navigationStyle": "custom"
}

abouthe.wxml文件

  
    
    
    
      
      
        
          
        
        
          李大锤
          联系电话：17365963369
          关联账号：王老师  
        
      
    

    
      
        
        我的预约
        
      
      
        
        我的订单
        
      
      
        
        我的救助
        
      
      
        
        我的亲友
        
      
      
        
        我的收藏
        
      
    

    
      
        
        个人资料
        
      
      
        
        修改密码
        
      
      
      
        
        退出登录
        
      
    

    
  

abouthe.wxss文件

/* 用户列表选项样式 */
page {
  width: 100%;
  height: 100%;
  background:#f0f0f0;
}
.parent_catainer{
  background:#f0f0f0;
}

/* 头部背景图片 */
.container_head{
  height: 370rpx;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.head_img {
  position: absolute;
  width: 100%;
  height: 370rpx;
}

.head_pers_info{
   height: 200rpx;
   width: 100%;
   margin-bottom: 50rpx;
   justify-content: left;
   display: flex;
   align-items: center;
   flex-direction: row;
   position: absolute;
}

.head_pic{
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  background-color: #08cbb0;
  color: #ffffff;
  align-items: center;
  display: flex;
  justify-content: center;
}
.head_pic_content{
  position: absolute;
  width: 110rpx;
  height: 110rpx;
  border-radius: 55rpx;
  background-color: white;
}

.head_pic{
  margin-left: 5%;
}

.inf_content{
  display: flex;
  flex-direction: column;
  margin-left: 10rpx;
  align-items: flex-start;
  justify-content: center;
   color: #ffffff;
   padding-bottom: 5rpx;
}

.user_info{
  text-align: left;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}

.family_info_ct_phone{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
}

.family_info_ct{
  text-align: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 2rpx;
  width: 500rpx;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}

.userItemListView{
  background: #fff;
  padding: 0 0rpx;
  margin: 24rpx 0;
}
 
.userItemListView > view{
  height: 94rpx;
  line-height: 94rpx;
  padding-left: 50rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}
 
/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
  border: none;
}

.my_priview_md{
  display: flex;
  align-items: center;
}

.my_priview{
  width: 50rpx;
  height: 50rpx;
  margin-right: 10rpx;
}
 
.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}
 
.userItemListView text{
  font-size: 30rpx;
}

.last_view{
   background:#f0f0f0;
   width: 100%;
   height:1200rpx;
}

abouthe.ts文件

// pages/personal/myinfo.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {

    var that = this;
  },

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

  },

  // 退出登录
  logout: function () {

    wx.showModal({
      content: '确定退出登录吗？',
      cancelColor: '#666666',//666666
      confirmColor: '#666666',
      success(res) {
        if (res.confirm) {
          wx.reLaunch({
            url: '/pages/login/login'
          })
          console.log('用户点击确定')
        } else if (res.cancel) {
          console.log('用户点击取消')
        }
      },
      fail: function (res) { },//接口调用失败的回调函数
      complete: function (res) { },//接口调用结束的回调函数（调用成功、失败都会执行
    })

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    wx.hideHomeButton();
    wx.hideShareMenu();
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})