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

server/2025/1/19 1:13:22/

我的页面

引言

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

1. 项目结构

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

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

2. app.json 配置

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

{"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 中。

// 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 方法。

<!-- 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 右侧文本的样式。

/* 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

    "van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index"

mine.js

// 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

<!-- 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

/* 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;
}

 页面展示

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


http://www.ppmy.cn/server/159496.html

相关文章

Kubernetes 部署 RabbitMQ 集群教程

Kubernetes 部署 RabbitMQ 集群教程

本文介绍如何在 Kubernetes 中部署 RabbitMQ 集群&#xff0c;包含从命名空间创建到配置 NFS 存储的详细步骤。 参考文档&#xff1a; RabbitMQ 集群部署NFS StorageClass 创建 部署步骤 1. 创建命名空间 kubectl create ns rabbitmq2. 创建 RBAC 权限 创建文件 rabbitmq…
阅读更多...
9分布式微服务架构

9分布式微服务架构

分布式微服务架构不光需要从架构上的设计优化系统&#xff0c;还要在编码上优化达到最好的效果 中心化的设计 中心化的设计比较简单&#xff0c;分布式集群中的角色分为两种&#xff0c;管理者和被管理者。 在一个分布式或者集群中&#xff0c;管理者角色管理着其他处理实际…
阅读更多...
Spring Boot 中实现图片文件压缩

Spring Boot 中实现图片文件压缩

图片文件压缩是 Web 应用中常见的需求&#xff0c;尤其是在处理用户上传或动态生成的图片时。压缩图片不仅可以减少服务器的存储空间&#xff0c;还能大幅提高网页加载速度和用户体验。在本文中&#xff0c;我们将探讨如何在 Spring Boot 中实现图片压缩&#xff0c;并提供接口…
阅读更多...
STM32 FreeRTOS 信号量

STM32 FreeRTOS 信号量

信号量的简介 reeRTOS中的信号量是一种用于任务间同步和资源管理的机制。信号量可以是二进制的&#xff08;只能取0或1&#xff09;也可以是计数型的&#xff08;可以是任意正整数&#xff09;。信号量的基本操作包括“获取”和“释放”。 比如动车上的卫生间&#xff0c;一个…
阅读更多...
STM32 FreeRTOS 的任务挂起与恢复以及查看任务状态

STM32 FreeRTOS 的任务挂起与恢复以及查看任务状态

目录 任务的挂起与恢复的API函数 任务挂起函数 任务恢复函数 任务恢复函数&#xff08;中断中恢复&#xff09; 函数说明 注意事项 查看任务状态 任务的挂起与恢复的API函数 vTaskSuspend()&#xff1a;挂起任务, 类似暂停&#xff0c;可恢复 vTaskResume()&#xff1a…
阅读更多...
使用jupyter notebook没有正常打开浏览器的几种情况解决

使用jupyter notebook没有正常打开浏览器的几种情况解决

迅速记录前期 1.下载 https://www.anaconda.com/products/individual 2.安装 直接默认安装就行 3.打开jupyter notebook 在开始菜单里面可以找到 4.遇到的问题解决 1.运行jupyter notebook&#xff0c;黑窗口自动关了 每次黑窗口迅速的加载完就自己关掉了 也没有打开新…
阅读更多...
NumPy；NumPy在数据分析中的应用；NumPy与其他库的搭配使用

NumPy；NumPy在数据分析中的应用；NumPy与其他库的搭配使用

NumPy&#xff1b;NumPy在数据分析中的应用&#xff1b;NumPy与其他库的搭配使用 NumPy&#xff1a;Python 数据分析的核心工具什么是 NumPy&#xff1f;NumPy 的主要优势 NumPy 在数据分析中的应用1. 数据处理与清洗2. 数学和统计分析3. 数组变换与矩阵运算 NumPy 与其他库的搭…
阅读更多...
云IDE：开启软件开发的未来篇章

云IDE：开启软件开发的未来篇章

敖行客一直致力于将整个研发协作流程线上化&#xff0c;从而打破物理环境依赖&#xff0c;让研发组织模式更加灵活、自由且高效&#xff0c;今天就来聊聊AT Work&#xff08;一站式研发协作平台&#xff09;的重要组成部分-云IDE。 在科技领域&#xff0c;历史常常是未来的风向…
阅读更多...
最新文章

Copyright @ 2022~2023