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

我的页面

引言

        本文将详细解析如何实现一个包含登录注册、多个功能模块跳转以及特定功能展示的“我的”页面。我们将使用 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">