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

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

一、效果预览

二、源代码

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.tsPage({/** * 页面的初始数据 */data: {},/** * 生命周期函数--监听页面加载 */onLoad() {var that = this;},/** * 生命周期函数--监听页面初次渲染完成 */onReady() {},// 退出登录logout: function () {wx.showModal({content: '确定退出登录吗？',cancelColor: '#666666',//666666confirmColor: '#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() {}})