【小白专用】微信小程序个人中心、我的界面（示例一）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代码

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":"个人中心"}