跳蚤市场小程序开发学习记录之“我的”界面登录及非登录状态

登录状态 

非登录状态

一、wxml文件代码

<!-- 以下是页面头部相关的代码块，根据用户是否登录展示不同的内容 -->
<!-- 已登录 -->
<view class="top_root" wx:if="{{user&&user.name}}">
  <!-- 显示用户头像，绑定点击事件goInfo，点击可跳转到相关信息页面 -->
  <image class="top_img" src="{{user.avatarUrl}}" bindtap="goInfo"></image>
  <view>
    <view class="top_name">
      <!-- 展示用户名 -->
      <text>{{user.name}}</text>
    </view>
    <view class="login_out" bind:tap="loginOut">
      <!-- 点击此区域可执行退出登录操作 -->
      <text>退出登录</text>
    </view>
  </view>
</view>
<!-- 未登录 -->
<view class="top_root" wx:else>
  <!-- 显示默认的人员图标 -->
  <image class="top_img" src="/image/人员.png"></image>
  <view class="top_name" bindtap="login">
    <!-- 点击此处可触发登录操作 -->
    <text>点击登录</text>
  </view>
</view>

<!-- 以下是页面按钮相关的代码块，展示反馈建议和在线客服两个按钮 -->
<view class="buttonRoot">
  <!-- 反馈建议按钮，点击可唤起相应的反馈建议功能，通过open-type="feedback"实现 -->
  <button class="button" open-type="feedback">反馈建议</button>
  <!-- 在线客服按钮，点击可唤起在线客服功能，通过open-type="contact"实现 -->
  <button class="button" open-type="contact">在线客服</button>
</view>

<!-- 以下是九宫格相关的代码块，只有在用户登录的情况下才会展示 -->
<view class="jiugongge_root" wx:if="{{user&&user.name}}">
  <view class="jiugongge_item" bindtap="goInfo">
    <!-- 显示设置图标，点击可跳转到相关修改资料的页面 -->
    <image src="cloud://fleamarket-7g51bean4803bb56.666c-fleamarket-7g51bean4803bb56-1330959456/weda-uploader/image/设置.png"></image>修改资料
  </view>
  <view class="jiugongge_item" bindtap="goMyorder">
    <!-- 显示相关图标，点击可跳转到查看我购买的商品相关页面 -->
    <image src="cloud://fleamarket-7g51bean4803bb56.666c-fleamarket-7g51bean4803bb56-1330959456/weda-uploader/image/法案.png"></image>我购买的
  </view>
  <view class="jiugongge_item" bindtap="goMysell">
    <!-- 显示相关图标，点击可跳转到查看我卖出的商品相关页面 -->
    <image src="cloud://fleamarket-7g51bean4803bb56.666c-fleamarket-7g51bean4803bb56-1330959456/weda-uploader/image/卖出.png"></image>我卖出的
  </view>
  <view class="jiugongge_item" bindtap="goControlShop">
    <!-- 显示相关图标，点击可跳转到查看我发布的商品相关页面 -->
    <image src="cloud://fleamarket-7g51bean4803bb56.666c-fleamarket-7g51bean4803bb56-1330959456/weda-uploader/image/商品.png"></image>我发布的
  </view>
</view>

用户登录状态判断与头部展示：通过 wx:if 和 wx:else 指令根据用户是否登录（依据 user 对象以及其中 name 属性是否存在来判断）来差异化地展示页面头部内容。已登录时展示用户头像、用户名以及退出登录的操作入口；未登录时展示默认的人员图标和引导登录的点击区域。

功能按钮部分：在页面中固定展示两个按钮，分别是 “反馈建议” 和 “在线客服” 按钮，利用微信小程序原生的 open-type 属性来关联对应的系统功能，方便用户进行反馈和联系客服。

九宫格功能区（登录后显示）：同样基于用户登录状态（wx:if 判断），在用户已登录时呈现九宫格形式的功能模块，每个九宫格项包含一个图标和对应的文字描述，并且绑定了不同的点击事件（如 goInfo、goMyorder 等），点击后可跳转到相应的与用户自身信息、购买、售卖以及发布商品等相关的功能页面，整体实现了根据用户登录与否来展示不同交互功能模块的页面布局逻辑。

二、wxss文件代码

/* 设置页面整体背景颜色为浅灰色 */
page{
  background: rgb(240, 240, 240);
}

/* 头部相关样式设置 */
.top_root {
  /* 使用线性渐变设置背景颜色，从左到右颜色渐变过渡 */
  background: -webkit-linear-gradient(left,rgb(244,157,4),rgb(255, 102, 0));
  /* 设置元素的圆角半径，使头部呈现圆角效果 */
  border-radius: 10px;
  /* 使用 flex 布局，方便内部元素的排列对齐 */
  display: flex;
  /* 使内部元素在交叉轴（垂直方向，这里因为是水平的 flex 布局，垂直方向就是交叉轴）上居中对齐 */
  align-items: center;
  /* 设置头部元素距离上下左右的外边距为 20rpx，rpx 是小程序中自适应的长度单位 */
  margin: 20rpx;
  /* 给头部元素添加阴影效果，增强立体感 */
  box-shadow:5px 5px 5px 5px rgba(0, 0,0, 0.3);
  /* 设置头部元素内部上下的内边距为 20rpx */
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.top_img {
  /* 设置头像图片元素的外边距为 20rpx，让其与周围元素有间隔 */
  margin: 20rpx;
  /* 设置头像图片的宽度为 200rpx */
  width: 200rpx;
  /* 设置头像图片的高度为 200rpx */
  height: 200rpx;
  /* 将头像图片设置为圆形，通过设置圆角半径为宽度/高度的一半来实现 */
  border-radius: 50%;
  /* 设置头像图片距离右侧元素的外边距为 40rpx，调整与其他内容的间距 */
  margin-right: 40rpx;
}

.top_name {
  /* 设置用户名文字的字体大小为 44rpx */
  font-size: 44rpx;
  /* 设置用户名文字的颜色为白色 */
  color: white;
}

.login_out {
  /* 设置退出登录文字的字体大小为 30rpx */
  font-size: 30rpx;
  /* 设置退出登录文字距离顶部的外边距为 20rpx，调整垂直位置 */
  margin-top: 20rpx;
}

/* 九宫格整体的样式设置 */
.jiugongge_root {
  /* 使用 flex 布局，并且允许内部元素换行，用于实现九宫格的多行排列效果 */
  display: flex;
  flex-wrap: wrap;
  /* 设置九宫格背景颜色为白色 */
  background: white;
  /* 设置九宫格的圆角半径，使其呈现圆角外观 */
  border-radius: 10px;
  /* 设置九宫格距离上下左右的外边距为 10rpx */
  margin: 10rpx;
  /* 给九宫格添加阴影效果，增强视觉效果 */
  box-shadow:5px 5px 5px 5px rgba(0, 0,0, 0.3);
}

.jiugongge_item {
  /* 使用 flex 布局，并且设置为垂直方向排列（column），方便内部图标和文字的上下排列布局 */
  display: flex;
  flex-direction: column;
  /* 使内部元素在主轴（这里因为是垂直方向布局，主轴就是垂直方向）上居中对齐 */
  justify-content: center;
  /* 使内部元素在交叉轴（水平方向）上居中对齐 */
  align-items: center;
  /* 设置每个九宫格项的宽度占父元素（九宫格容器）宽度的 25%，实现九宫格的均匀划分 */
  width: 25%;
  /* 设置九宫格项底部的外边距为 10rpx，调整九宫格项之间的垂直间距 */
  margin-bottom: 10rpx;
}

.jiugongge_item image {
  /* 设置九宫格项中图片的宽度为 80rpx */
  width: 80rpx;
  /* 设置九宫格项中图片的高度为 80rpx */
  height: 80rpx;
  /* 设置图片距离底部和顶部的外边距，调整图片在九宫格项中的垂直位置 */
  margin-bottom: 20rpx;
  margin-top: 20rpx;
}

/* 按钮所在容器的样式设置 */
.buttonRoot {
  /* 使用 flex 布局，方便内部按钮的排列 */
  display: flex;
  /* 设置按钮容器距离顶部的外边距为 40rpx，调整垂直位置 */
  margin-top: 40rpx;
  /* 设置按钮容器距离底部的外边距为 20rpx，调整垂直位置 */
  margin-bottom: 20rpx;
}

.button {
  /* 设置按钮文字的字体大小为 30rpx */
  font-size: 30rpx;
  margin-left: auto; 
}

整体页面布局与背景设置：首先通过对 page 选择器的设置，确定了整个页面的背景颜色为浅灰色，奠定了页面的整体色调基础。

头部样式设计：针对头部区域（类名为 .top_root），运用了线性渐变背景、圆角、flex 布局等方式，使其呈现出具有色彩渐变效果、圆角外观且内部元素（头像、用户名、退出登录文字等）能水平居中对齐并带有阴影效果的样式。头像图片有特定的尺寸、圆形样式以及与周围元素的间距设置，用户名和退出登录文字也有各自相应的字体大小、颜色以及外边距等样式调整，使得头部区域布局合理、美观且功能清晰（展示用户信息与提供退出操作入口）。

九宫格样式构建：九宫格部分（类名为 .jiugongge_root 及其内部的 .jiugongge_item）利用 flex 布局的换行特性实现多行排列，整体设置了白色背景、圆角和阴影效果，让九宫格整体视觉上比较规整且有立体感。每个九宫格项又通过 flex 布局的垂直排列、宽度占比以及内部图片和文字的间距、尺寸等样式设置，确保了九宫格中各个功能项图标与文字展示清晰、布局均匀，点击交互友好。

按钮区域样式处理：按钮所在的容器（.buttonRoot）使用 flex 布局并设置了上下的外边距来调整其在页面中的垂直位置，内部按钮（.button）通过 margin-left: auto 实现靠右排列，同时设置了字体大小等基本样式，整体使得按钮区域布局简洁，按钮易于操作和识别。

三、全局变量定义

我使用全局变量实现登录逻辑，其基本思路是：在小程序启动时初始化一个全局对象用于存储用户登录相关的信息，比如用户的账号、昵称、头像等。当用户进行登录操作后，将获取到的用户信息保存到这个全局变量中，然后在小程序的各个页面就可以方便地访问这些信息来判断用户是否登录以及展示对应的用户相关内容。

在小程序项目的根目录下找到 app.js 文件，它是小程序的全局逻辑文件，在这里定义一个全局数据对象用于存储用户登录信息，示例代码如下

// app.js
App({
  globalData: {
    users: {
    }
  },
  onLaunch: function () {
    wx.cloud.init({
      env: '你的云开发环境名',
      traceUser: true,
    })
  }
})

四、js文件代码

const app = getApp();
const db = wx.cloud.database()
Page({
  // 页面的数据对象，用于存储页面相关的数据
  data: {
    user: {},
    phone: '',
    num: 0,
  },
  // 页面加载时触发的生命周期函数，目前为空实现
  onLoad(options) {},
  // 页面显示时触发的生命周期函数
  onShow() {
    let that = this;
      // 将全局数据中的用户信息设置到页面的data对象的user属性中，用于展示当前用户相关信息（前提是全局数据中有正确的用户数据存储）
    that.setData({
      user: app.globalData.users
    });
  },
  // 点击登录按钮触发的函数，用于跳转到登录页面（'/pages/login/login'）
  login() {
    wx.navigateTo({
      url: '/pages/login/login',
    })
  },
  // 点击跳转到个人信息页面（'/pages/myInfo/myInfo'）的函数，用于查看或编辑用户个人信息等操作
  goInfo() {
    wx.navigateTo({
      url: '/pages/myInfo/myInfo',
    })
  },
  // 点击跳转到商品管理页面（'/pages/setShop/setShop'）的函数，用于管理用户发布的商品相关操作
  // 去商品管理
  goControlShop() {
    wx.navigateTo({
      url: '/pages/setShop/setShop'
    })
  },
  // 点击跳转到我的订单页面（'/pages/myOrder/myOrder'）的函数，用于查看用户的订单相关情况
  goMyorder() {
    wx.navigateTo({
    url: '/pages/myOrder/myOrder'
    })
  },
  // 点击跳转到我卖出的商品页面（'/pages/mySell/mySell'）的函数，用于查看用户已卖出商品的相关情况
  goMysell() {
    wx.navigateTo({
      url: '/pages/mySell/mySell'
    })
  },
  // 点击退出登录按钮触发的函数，将页面data对象中的user属性重置为空对象，模拟退出登录清除用户信息的操作
  loginOut() {
    this.setData({
      user: {}
    })
  },
  onReachBottom() {
  },
  onShareAppMessage() {}
})

整体架构与初始化：首先通过 getApp() 获取小程序的应用实例，以及引入云开发数据库实例 db，为后续操作做准备。在页面的数据对象 data 中初始化了 user、phone、num 等属性，分别用于存储用户信息、电话号码以及分页查询的计数等。

用户信息更新：从全局数据 app.globalData.users 中获取用户信息并更新到页面的 user 属性，用于在页面上展示当前登录用户的相关信息。

登录相关：定义了 login 函数，点击对应按钮时，利用 wx.navigateTo 导航到登录页面，方便用户进行登录操作。loginOut 函数在点击退出登录按钮时被触发，通过重置 user 属性为空对象来模拟清除用户信息，实现简单的退出登录效果。

各类信息查看与管理功能：分别定义了 goInfo、goControlShop、goMyorder、goMysell 等函数，点击相应按钮后通过 wx.navigateTo 跳转到对应的功能页面，比如个人信息页、商品管理页、我的订单页、我卖出的商品页等，满足用户不同的功能操作需求。