【微信小程序】5|我的页面 | 我的咖啡店-综合实训

Kika写代码2025-01-17 15:15

我的页面

引言

本文将详细解析如何实现一个包含登录注册、多个功能模块跳转以及特定功能展示的"我的"页面。我们将使用 Vant Weapp 组件库来简化开发过程，并确保代码的高级性和条理性。

1. 项目结构

首先，确保你的项目结构如下所示：

- pages/
  - mine/
    - mine.js
    - mine.wxml
    - mine.wxss
- app.json

2. app.json 配置

在 app.json 中引入 Vant Weapp 组件，确保组件库正确加载：

javascript 复制代码 
{
  "van-cell": "@vant/weapp/cell/index",
  "van-cell-group": "@vant/weapp/cell-group/index"
}

3. mine.js

3.1 代码写作思路

在 mine.js 中，我们定义了三个主要方法：goIndex、goHome 和 goAA，分别用于跳转到普通页面、tabBar 页面和带参数的页面。这些方法通过微信小程序的 API 实现页面跳转。

3.2 介绍方法

  • goIndex ：跳转到普通页面 index。

  • goHome ：跳转到 tabBar 页面 home。

  • goAA ：带参数跳转到页面 AA，参数通过 event.currentTarget.dataset.a 获取，并拼接到 URL 中。

javascript 复制代码 
// pages/mine/mine.js
Page({
  // 1. 跳转到普通页面
  goIndex() {
    wx.navigateTo({
      url: '../index/index',
    });
  },
  // 2. 跳转到tabBar页面
  goHome() {
    wx.switchTab({
      url: '../home/home',
    });
  },
  // 3. 跳转页面 带参数
  goAA(event) {
    // 获取自定义属性a的值
    let a = event.currentTarget.dataset.a;
    console.log("event", a);
    wx.navigateTo({
      // 带参数的url怎么写？
      // 路径？参数名=值
      url: '../AA/AA?aa=' + a,
    });
  }
});

4. mine.wxml

4.1 代码写作思路

在 mine.wxml 中，我们使用 Vant Weapp 的 van-cell 组件和微信小程序的 navigator 组件来构建页面。van-cell 组件用于创建列表单元，navigator 组件用于创建功能模块的跳转入口。

4.2 介绍方法

  • 登录注册 ：使用 van-cell 组件创建登录注册入口，点击时调用 goIndex 方法。

  • 功能模块 ：使用 navigator 组件创建多个功能模块的跳转入口，每个 navigator 包含一个图标和文本。

  • 特定功能 ：使用 van-cell 组件创建特定功能的展示，点击时调用 goHome 或 goAA 方法。

html 复制代码 
<!-- pages/mine/mine.wxml -->
<view class="mine">
  <!-- 登录页面开始 -->
  <van-cell class="login" title="点击登录/注册" bind:click="goIndex" is-link>
    <image slot="icon" src="/image/user.png" class="custom-icon" mode="aspectFit" referrerPolicy="no-referrer" />
  </van-cell>
  <!-- 登陆页面结束 -->

  <!-- 小页面跳转开始 -->
  <view class="container">
    <!-- 第一行 -->
    <view class="row">
      <navigator url="/pages/bookshelf/bookshelf" class="item">
        <image class="icon" src="/image/bookshelf-icon.png" />
        <text class="text">书架</text>
      </navigator>
      <navigator url="/pages/dailyupdate/dailyupdate" class="item">
        <image class="icon" src="/image/dailyupdate-icon.png" />
        <text class="text">每日更新</text>
      </navigator>
      <navigator url="/pages/readinghistory/readinghistory" class="item">
        <image class="icon" src="/image/readinghistory-icon.png" />
        <text class="text">浏览历史</text>
      </navigator>
    </view>
    <!-- 第二行 -->
    <view class="row">
      <navigator url="/pages/favorites/favorites" class="item">
        <image class="icon" src="/image/favorites-icon.png" />
        <text class="text">点赞的漫画</text>
      </navigator>
      <navigator url="/pages/downloads/downloads" class="item">
        <image class="icon" src="/image/downloads-icon.png" />
        <text class="text">我的下载</text>
      </navigator>
      <navigator url="/pages/messages/messages" class="item">
        <image class="icon" src="/image/messages-icon.png" />
        <text class="text">我的消息</text>
      </navigator>
    </view>
    <!-- 第三行 -->
    <view class="row">
      <navigator url="/pages/author/author" class="item">
        <image class="icon" src="/image/author-icon.png" />
        <text class="text">成为作家</text>
      </navigator>
      <navigator url="/pages/merchandise/merchandise" class="item">
        <image class="icon" src="/image/merchandise-icon.png" />
        <text class="text">周边商城</text>
      </navigator>
      <navigator url="/pages/wallet/wallet" class="item">
        <image class="icon" src="/image/wallet-icon.png" />
        <text class="text">我的钱包</text>
      </navigator>
    </view>
    <!-- 第四行 -->
    <view class="row">
      <navigator url="/pages/feedback/feedback" class="item">
        <image class="icon" src="/image/feedback-icon.png" />
        <text class="text">反馈与帮助</text>
      </navigator>
      <navigator url="/pages/productculture/productculture" class="item">
        <image class="icon" src="/image/productculture-icon.png" />
        <text class="text">KC指南</text>
      </navigator>
      <!-- 空白占位 -->
      <navigator class="item">
        <image class="icon" />
        <text class="text"></text>
      </navigator>
    </view>
  </view>
  <!-- 小页面跳转结束 -->

  <!-- cell实现开始 -->
  <van-cell title="免流服务">
    <text slot="right-icon" class="right-icon-text">流量免费任性看漫画</text>
  </van-cell>
  <van-cell title="0元抽奖">
    <text slot="right-icon" class="right-icon-text">K币会员等你来抽</text>
  </van-cell>
  <van-cell title="青少年模式">
    <text slot="right-icon" class="right-icon-text">未开启</text>
  </van-cell>
  <van-cell title="设置" is-link />
  <!-- cell实现结束 -->

  <van-cell title="去Home" bind:click="goHome" is-link />
  <van-cell title="去AA" bind:click="goAA" data-a="123" is-link />
</view>

5. mine.wxss

5.1 代码写作思路

在 mine.wxss 中，我们定义了页面的样式，确保布局和视觉效果符合设计要求。通过灵活使用 Flexbox 布局，我们实现了响应式设计，确保页面在不同设备上都能良好显示。

5.2 介绍方法

  • .mine：设置页面的外层容器。

  • .custom-icon：设置登录注册图标。

  • .van-cell：设置列表单元的样式。

  • .container：设置功能模块的容器。

  • .row：设置每行的功能模块。

  • .item：设置每个功能模块的样式。

  • .icon：设置功能模块的图标。

  • .text：设置功能模块的文本。

  • .right-icon-text ：设置 van-cell 右侧文本的样式。

css 复制代码 
/* pages/mine/mine.wxss */
.mine {
  padding: 0rpx;
}

.custom-icon {
  width: 80px;
  height: 100px;
}

.van-cell {
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30rpx;
  /* 每个 item 占据 30% 的宽度 */
  width: 30%;
}

.icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 10rpx;
}

.text {
  /* 设置字体大小 */
  font-size: 10px;
  /* 设置文本对齐方式 */
  text-align: center;
  /* 设置行高 */
  line-height: 24px;
}

.right-icon-text {
  /* 设置字体大小 */
  font-size: 10px;
  /* 浅灰色 */
  color: #c0c0c0;
}

6. 页面展示

6.1 登录注册

点击"点击登录/注册"会跳转到 index 页面。

6.2 功能模块

包含书架、每日更新、浏览历史、点赞的漫画、我的下载、我的消息、成为作家、周边商城、我的钱包、反馈与帮助、KC指南等模块，点击会跳转到相应的页面。

6.3 特定功能

包含免流服务、0元抽奖、青少年模式、设置等，点击"去Home"会跳转到 home 页面，点击"去AA"会带参数跳转到 AA 页面。

7. 总结

通过上述步骤，我们成功实现了一个功能丰富且用户友好的"我的"页面。使用 Vant Weapp 组件库可以大大简化开发过程，提高开发效率。组件化的设计不仅提高了代码的复用性和可维护性，还使得页面结构更加清晰。希望本文能对你有所帮助，如果你有任何问题或建议，欢迎留言交流。

8. 代码仓库

你可以在 GitHub 找到完整的项目代码，欢迎 Star 和 Fork。

完整代码

app.json

javascript 复制代码 
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index"

mine.js

javascript 复制代码 
// pages/mine/mine.js
Page({
  // 1. 跳转到普通页面
  goIndex() {
    wx.navigateTo({
      url: '../index/index',
    });
  },
  // 2. 跳转到tabBar页面
  goHome() {
    wx.switchTab({
      url: '../home/home',
    });
  },
  // 3. 跳转页面 带参数
  goAA(event) {
    // 获取自定义属性a的值
    let a = event.currentTarget.dataset.a;
    console.log("event", a);
    wx.navigateTo({
      // 带参数的url怎么写？
      // 路径？参数名=值
      url: '../AA/AA?aa=' + a,
    });
  }
});

mine.wxml

XML 复制代码 
<!-- pages/mine/mine.wxml -->
<view class="mine">
  <!-- 登录页面开始 -->
  <van-cell class="login" title="点击登录/注册" bind:click="goIndex" is-link>
    <image slot="icon" src="/image/user.png" class="custom-icon" mode="aspectFit" referrerPolicy="no-referrer" />
  </van-cell>
  <!-- 登陆页面结束 -->

  <!-- 小页面跳转开始 -->
  <view class="container">
    <!-- 第一行 -->
    <view class="row">
      <navigator url="/pages/bookshelf/bookshelf" class="item">
        <image class="icon" src="/image/bookshelf-icon.png" />
        <text class="text">书架</text>
      </navigator>
      <navigator url="/pages/dailyupdate/dailyupdate" class="item">
        <image class="icon" src="/image/dailyupdate-icon.png" />
        <text class="text">每日更新</text>
      </navigator>
      <navigator url="/pages/readinghistory/readinghistory" class="item">
        <image class="icon" src="/image/readinghistory-icon.png" />
        <text class="text">浏览历史</text>
      </navigator>
    </view>
    <!-- 第二行 -->
    <view class="row">
      <navigator url="/pages/favorites/favorites" class="item">
        <image class="icon" src="/image/favorites-icon.png" />
        <text class="text">点赞的漫画</text>
      </navigator>
      <navigator url="/pages/downloads/downloads" class="item">
        <image class="icon" src="/image/downloads-icon.png" />
        <text class="text">我的下载</text>
      </navigator>
      <navigator url="/pages/messages/messages" class="item">
        <image class="icon" src="/image/messages-icon.png" />
        <text class="text">我的消息</text>
      </navigator>
    </view>
    <!-- 第三行 -->
    <view class="row">
      <navigator url="/pages/author/author" class="item">
        <image class="icon" src="/image/author-icon.png" />
        <text class="text">成为作家</text>
      </navigator>
      <navigator url="/pages/merchandise/merchandise" class="item">
        <image class="icon" src="/image/merchandise-icon.png" />
        <text class="text">周边商城</text>
      </navigator>
      <navigator url="/pages/wallet/wallet" class="item">
        <image class="icon" src="/image/wallet-icon.png" />
        <text class="text">我的钱包</text>
      </navigator>
    </view>
    <!-- 第四行 -->
    <view class="row">
      <navigator url="/pages/feedback/feedback" class="item">
        <image class="icon" src="/image/feedback-icon.png" />
        <text class="text">反馈与帮助</text>
      </navigator>
      <navigator url="/pages/productculture/productculture" class="item">
        <image class="icon" src="/image/productculture-icon.png" />
        <text class="text">KC指南</text>
      </navigator>
      <!-- 空白占位 -->
      <navigator class="item">
        <image class="icon" />
        <text class="text"></text>
      </navigator>
    </view>
  </view>
  <!-- 小页面跳转结束 -->

  <!-- cell实现开始 -->
  <van-cell title="免流服务">
    <text slot="right-icon" class="right-icon-text">流量免费任性看漫画</text>
  </van-cell>
  <van-cell title="0元抽奖">
    <text slot="right-icon" class="right-icon-text">K币会员等你来抽</text>
  </van-cell>
  <van-cell title="青少年模式">
    <text slot="right-icon" class="right-icon-text">未开启</text>
  </van-cell>
  <van-cell title="设置" is-link />
  <!-- cell实现结束 -->


  <van-cell title="去Home" bind:click="goHome" is-link />
  <van-cell title="去AA" bind:click="goAA" is-link />
</view>

mine.wxss

css 复制代码 
/* pages/mine/mine.wxss */
.mine {
  padding: 0rpx;
}

.custom-icon {
  width: 80px;
  height: 100px;
}

.van-cell {
  display: flex;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 30rpx;
  /* 每个 item 占据 30% 的宽度 */
  width: 30%;
}

.icon {
  width: 70rpx;
  height: 70rpx;
  margin-bottom: 10rpx;
}

.text {
  /* 设置字体大小 */
  font-size: 10px;
  /* 设置文本对齐方式 */
  text-align: center;
  /* 设置行高 */
  line-height: 24px;
}

.right-icon-text {
  /* 设置字体大小 */
  font-size: 10px;
  /* 浅灰色 */
  color: #c0c0c0;
}

页面展示

包含登录注册、多个功能模块跳转以及特定功能展示的"我的"页面

相关推荐
既生向阳10 小时前
记录一次微信小程序使用云能力开发的过程
微信小程序·小程序
说私域10 小时前
数字化转型的新引擎：开源AI智能名片2+1链动模式S2B2C商城小程序源码的应用与实践
人工智能·小程序·开源
guanpinkeji14 小时前
解锁“搭子小程序”开发新机遇，助力企业数字化转型
小程序·软件开发·app开发·小程序开发·小程序制作·搭子小程序·搭子
雯0609~15 小时前
微信小程序：实现单选，多选，通过变量控制单选/多选
微信小程序·小程序·notepad++
黑马源码库miui5208616 小时前
智慧城市V4电商商城系统源码独立版全插件全开源
人工智能·微信小程序·小程序·uni-app·智慧城市·微信公众平台
V+zmm1013417 小时前
微信小程序研学自习室选座与门禁系统的实现与开发springboot+论文源码调试讲解
java·数据库·微信小程序·小程序·毕业设计
V+zmm1013418 小时前
疫苗预约小程序ssm+论文源码调试讲解
java·数据库·微信小程序·小程序·毕业设计
code袁18 小时前
校园跑腿小程序---任务界面 发布以及后端模板下载
小程序·校园跑腿小程序·node·开源软件
guanpinkeji18 小时前
AI数字人小程序：解锁个性化智能交互体验
大数据·人工智能·小程序·软件开发·小程序开发
热门推荐
01Oracle 高阶函数与高级功能详解02Dell服务器升级ubuntu 22.04失败解决03半导体应用系统一些小知识收集(strip&wafer mapping,EAP&scada)04每天40分玩转Django：问题解答（一）05密码学原理技术-第六章-introduction to pulibc-key cryptography06优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间07具身智能之RT-H08(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明09渗透测试之SQLMAP工具详解 kali自带SQLmap解释 重点sqlmap --tamper 使用方式详解 搞完你就很nice了10Oracle Scheduler: Calendaring