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

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

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

    1、js代码：

    1. // pages/my/my3.js
    2. Page({
    3.  
    4.   /**
    5.    * 页面的初始数据
    6.    */
    7.   data: {
    8.     login: {
    9.       show: false,
    10.       line: false,
    11.       avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    12.     }
    13.  
    14.  
    15.  
    16.   },
    17.  
    18. // 登录监听
    19. chooseAvatar(e) {
    20.   this.setData({
    21.     login: {
    22.       show: true,
    23.       line:true,
    24.       avatar: e.detail.avatarUrl,
    25.     }
    26.   })
    27. },
    28.  
    29. // 基本信息
    30. basicClick() {
    31.   console.log('基本信息监听');
    32. },
    33.  
    34.  // 匿名反馈
    35.  feedbackClick() {
    36.   console.log('匿名反馈监听');
    37. },
    38. // 关于我们
    39. aboutClick() {
    40.   console.log('关于我们监听');
    41. },
    42.  
    43. // 退出监听
    44. exitClick() {
    45.   let that = this;
    46.   wx.showModal({
    47.     title: '提示',
    48.     content: '确定退出登录吗？',
    49.     success(res) {
    50.       if (res.confirm) {
    51.         that.setData({
    52.           login: {
    53.             show: false,
    54.             avatar: 'https://img0.baidu.com/it/u=3204281136,1911957924&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
    55.           }
    56.         })
    57.       }
    58.     }
    59.   })
    60. },
    61.  
    62.  
    63.  
    64.  
    65.   /**
    66.    * 生命周期函数--监听页面加载
    67.    */
    68.   onLoad(options) {
    69.  
    70.   },
    71.  
    72.   /**
    73.    * 生命周期函数--监听页面初次渲染完成
    74.    */
    75.   onReady() {
    76.  
    77.   },
    78.  
    79.   /**
    80.    * 生命周期函数--监听页面显示
    81.    */
    82.   onShow() {
    83.  
    84.   },
    85.  
    86.   /**
    87.    * 生命周期函数--监听页面隐藏
    88.    */
    89.   onHide() {
    90.  
    91.   },
    92.  
    93.   /**
    94.    * 生命周期函数--监听页面卸载
    95.    */
    96.   onUnload() {
    97.  
    98.   },
    99.  
    100.   /**
    101.    * 页面相关事件处理函数--监听用户下拉动作
    102.    */
    103.   onPullDownRefresh() {
    104.  
    105.   },
    106.  
    107.   /**
    108.    * 页面上拉触底事件的处理函数
    109.    */
    110.   onReachBottom() {
    111.  
    112.   },
    113.  
    114.   /**
    115.    * 用户点击右上角分享
    116.    */
    117.   onShareAppMessage() {
    118.  
    119.   }
    120. })

    2、wxml代码

    2. "top-bg">
    3. "box">
    4.   
    5.   "head-box">
    6.     
    7.       "head-img" src="{{login.avatar}}" mode="widthFix">
    8.     
    9.     "tip">{{login.show?'欢迎使用':'当前未登录，请登录！'}}
    10.   
    11.   
    12.   
    13.     
    14.       "left">
    15.         "icon-small" type="success" size="16">
    16.         "text">基本信息
    17.       
    18.       "right">》
    19.     
    20.     
    21.       "left">
    22.         "icon-small" type="success" size="16">
    23.         "text">匿名反馈
    24.       
    25.       "right">》
    26.     
    27.     
    28.       "left">
    29.         "icon-small" type="success" size="16">
    30.         "text">关于我们
    31.       
    32.       "right">》
    33.     
    34.   
    37. "end">
    38.   
    39.     "left">
    40.       "icon-small" type="success" size="16">
    41.       "text">分享好友
    42.     
    43.     "right">》
    44.   
    45.   
    46.     "left">
    47.       "icon-small" type="success" size="16">
    48.       "text">在线客服
    49.     
    50.     "right">》
    51.   
    54. "end">
    55.   
    56.     "left">
    57.       "icon-small" type="success" size="16">
    58.       "text">退出登录
    59.     
    60.   
    61.   
    62.     "left">
    63.       "icon-small" type="success" size="16">
    64.       "text">立即登录
    65.     
    66.   
    68. "footer">
    69.   ©微信小程序个人中心@wxd

    3、wxss代码

    1. /* pages/my/my3.wxss */
    2. page {
    3.   background-color: #f1f1f1;
    4. }
    5.  
    6. /* 设置背景颜色 */
    7. .top-bg {
    8.   height: 200rpx;
    9.   background-color: #008c8c;
    10. }
    11.  
    12. /* 圆角盒子 */
    13. .box {
    14.   background-color: white;
    15.   margin-top: -120rpx;
    16.   border-top-left-radius: 50rpx;
    17.   border-top-right-radius: 50rpx;
    18.   padding: 0 20rpx;
    19. }
    20.  
    21. /* 头像部分 */
    22. .head-box {
    23.   display: flex;
    24.   flex-direction: column;
    25.   justify-content: center;
    26.   align-items: center;
    27.   border-bottom: 1rpx solid #fbdbdc;
    28.   padding-bottom: 20rpx;
    29. }
    30.  
    31. .avatar {
    32.   margin-top: -80rpx;
    33.   font-weight: inherit;
    34.   display: flex;
    35.   justify-content: center;
    36.   background-color: rgba(0, 0, 0, 0);
    37. }
    38.  
    39. .avatar::after {
    40.   border: none;
    41. }
    42.  
    43. .head-img {
    44.   width: 140rpx;
    45.   height: 140rpx;
    46.   overflow: hidden;
    47.   border-radius: 50%;
    48.   background-color: #fbdbdc;
    49. }
    50.  
    51. .tip {
    52.   font-size: 26rpx;
    53.   color: gray;
    54.   margin: 15rpx 0;
    55. }
    56.  
    57. /* 列表部分 */
    58. .row {
    59.   display: flex;
    60.   align-items: center;
    61.   padding: 36rpx 10rpx;
    62.   font-size: 30rpx;
    63.   font-weight: inherit;
    64.   background-color: rgba(0, 0, 0, 0);
    65.   border-bottom: 1rpx solid #fbdbdc;
    66. }
    67.  
    68. .row::after {
    69.   border: none;
    70. }
    71.  
    72. .text {
    73.   margin-left: 15rpx;
    74.   color: #636262;
    75. }
    76.  
    77. .left {
    78.   width: 90%;
    79.   text-align: left;
    80.   display: flex;
    81.   align-items: center;
    82. }
    83.  
    84. .right {
    85.   width: 10%;
    86.   text-align: right;
    87.   color: rgb(148, 147, 147);
    88. }
    89.  
    90. .end {
    91.   background-color: white;
    92.   margin-top: 20rpx;
    93.   padding: 0 20rpx;
    94. }
    95.  
    96. .footer {
    97.   display: flex;
    98.   justify-content: center;
    99.   align-items: center;
    100.   padding: 20rpx 0;
    101.   font-size: 22rpx;
    102.   margin: 30rpx 0;
    103.   color: gray;
    104. }

    4、json代码

    1. {
    2.   "usingComponents": {},
    3.   "navigationBarBackgroundColor": "#008c8c",
    4.   "navigationBarTitleText": "个人中心"
    5. }

  • 相关阅读:
    在Express框架使用ORM模型访问关系型数据库
    nodejs毕业设计基于Nodejs实现的心理健康咨询微信小程序
    3.1 使用点对点信道的数据链路层
    RabbitMQ保证消息的可靠性
    电脑电源灯一闪一闪开不了机怎么办
    Allegro Design Entry HDL（OrCAD Capture HDL）软件设计管理图标详细介绍
    服务器硬件监控解决方案，提升服务器稳定性
    jfinal中如何使用过滤器监控Druid监听SQL执行？
    vue基础（1）
    医疗项目业务介绍
  • 原文地址：https://blog.csdn.net/zgscwxd/article/details/134214748