【小白专用】微信小程序个人中心、我的界面（示例一）23.11.04

微信小程序使用button按钮实现个人中心、我的界面（示例一）

微信小程序个人中心、我的界面，使用button按钮实现界面布局，更好的将分享好友、获取头像等功能展现出来，更多示例界面，请前往我的主页哦。

1、js代码：

// pages/my/my3.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    login: {
      show: false,
      line: false,
      avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    }



  },

// 登录监听
chooseAvatar(e) {
  this.setData({
    login: {
      show: true,
      line:true,
      avatar: e.detail.avatarUrl,
    }
  })
},

// 基本信息
basicClick() {
  console.log('基本信息监听');
},

 // 匿名反馈
 feedbackClick() {
  console.log('匿名反馈监听');
},
// 关于我们
aboutClick() {
  console.log('关于我们监听');
},

// 退出监听
exitClick() {
  let that = this;
  wx.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    success(res) {
      if (res.confirm) {
        that.setData({
          login: {
            show: false,
            avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
          }
        })
      }
    }
  })
},




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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

2、wxml代码

  
  
    
      
    
    {{login.show?'欢迎使用':'当前未登录，请登录！'}}
  
  
  
    
      
        
        基本信息
      
      》
    
    
      
        
        匿名反馈
      
      》
    
    
      
        
        关于我们
      
      》
    
  



  
    
      
      分享好友
    
    》
  
  
    
      
      在线客服
    
    》
  



  
    
      
      退出登录
    
  
  
    
      
      立即登录
    
  


  ©微信小程序个人中心@wxd

3、wxss代码

/* pages/my/my3.wxss */
page {
  background-color: #f1f1f1;
}

/* 设置背景颜色 */
.top-bg {
  height: 200rpx;
  background-color: #008c8c;
}

/* 圆角盒子 */
.box {
  background-color: white;
  margin-top: -120rpx;
  border-top-left-radius: 50rpx;
  border-top-right-radius: 50rpx;
  padding: 0 20rpx;
}

/* 头像部分 */
.head-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1rpx solid #fbdbdc;
  padding-bottom: 20rpx;
}

.avatar {
  margin-top: -80rpx;
  font-weight: inherit;
  display: flex;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0);
}

.avatar::after {
  border: none;
}

.head-img {
  width: 140rpx;
  height: 140rpx;
  overflow: hidden;
  border-radius: 50%;
  background-color: #fbdbdc;
}

.tip {
  font-size: 26rpx;
  color: gray;
  margin: 15rpx 0;
}

/* 列表部分 */
.row {
  display: flex;
  align-items: center;
  padding: 36rpx 10rpx;
  font-size: 30rpx;
  font-weight: inherit;
  background-color: rgba(0, 0, 0, 0);
  border-bottom: 1rpx solid #fbdbdc;
}

.row::after {
  border: none;
}

.text {
  margin-left: 15rpx;
  color: #636262;
}

.left {
  width: 90%;
  text-align: left;
  display: flex;
  align-items: center;
}

.right {
  width: 10%;
  text-align: right;
  color: rgb(148, 147, 147);
}

.end {
  background-color: white;
  margin-top: 20rpx;
  padding: 0 20rpx;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 0;
  font-size: 22rpx;
  margin: 30rpx 0;
  color: gray;
}

4、json代码

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#008c8c",
  "navigationBarTitleText": "个人中心"
}