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

devtools/2024/12/25 20:06:22/

页面跳转基础

引言

        在小程序>微信小程序开发中,页面跳转和参数传递是常见的需求。本文将通过一个实际案例——“我的咖啡店”小程序,详细介绍如何在小程序>微信小程序中实现页面跳转和参数传递。

页面跳转基础

        在小程序>微信小程序中,页面跳转主要通过wx.navigateTowx.redirectTo两个API实现。wx.navigateTo用于跳转到新页面,并且可以返回;而wx.redirectTo则是关闭当前页面,跳转到应用内的某个页面。

1. 跳转到普通页面

mine.js中,我们定义了goIndex函数,用于跳转到index页面:

// pages/mine/mine.js
Page({goIndex() {wx.navigateTo({url: '../index/index',});},// 其他函数...
});

2. 跳转到tabBar页面

对于tabBar页面的跳转,我们使用wx.switchTab

// pages/mine/mine.js
Page({goHome() {wx.switchTab({url: '../home/home',});},// 其他函数...
});

带参数跳转

在某些情况下,我们需要在跳转页面时传递参数。这可以通过在URL后面添加查询字符串来实现。

3. 跳转页面并带参数

mine.js中,我们定义了goAA函数,用于跳转到AA页面并传递参数:

// pages/mine/mine.js
Page({goAA(event) {let a = event.currentTarget.dataset.a;console.log("event", a);wx.navigateTo({url: '../AA/AA?aa=' + a,});},// 其他函数...
});

获取传递的参数

在目标页面,我们可以通过onLoad函数的options参数来获取传递的参数。

4. 在跳转的页面中获取参数

AA.js中,我们定义了onLoad函数,用于获取传递的参数:

// pages/AA/AA.js
Page({onLoad(options) {console.log("options", options.aa);this.getxxx(options.aa);},getxxx(aa) {console.log("aa===", aa);}
});

结语

        通过上述步骤,我们成功在“我的咖啡店”小程序中实现了页面跳转和参数传递功能。用户可以在不同页面间跳转,并且可以传递必要的参数。如果你在实现过程中遇到问题,可能是由于路径错误或者参数传递不正确。请检查路径的合法性,并确保参数正确传递。希望这篇文章能帮助你在开发自己的小程序>微信小程序时,更好地实现页面跳转和参数传递功能。

完整代码

app.json

{"pages": ["pages/home/home","pages/index/index","pages/logs/logs","pages/order/order","pages/ordering/ordering","pages/mine/mine","pages/search/search","pages/AA/AA"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "我的咖啡店","navigationBarBackgroundColor": "#ffffff"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents","tabBar": {"color": "#bfbfbf","selectedColor": "#8B7355","backgroundColor": "#ffffff","list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "./image/home.png","selectedIconPath": "./image/home-active.png"},{"pagePath": "pages/order/order","text": "点餐","iconPath": "./image/order.png","selectedIconPath": "./image/order-active.png"},{"pagePath": "pages/ordering/ordering","text": "订单","iconPath": "./image/ordering.png","selectedIconPath": "./image/ordering-active.png"},{"pagePath": "pages/mine/mine","text": "我的","iconPath": "./image/mine.png","selectedIconPath": "./image/mine-active.png"}]},"usingComponents": {"van-search": "@vant/weapp/search/index","van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index"}
}

mine.wxml

<!-- pages/mine/mine.wxml -->
<view class="mine"><van-cell title="去Index" bind:click="goIndex" is-link /><van-cell title="去Home" bind:click="goHome" is-link /><van-cell title="去AA" bind:click="goAA" is-link />
</view>

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,});}
});

AA.js

// pages/AA/AA.js
Page({// 生命周期函数--监听页面加载onLoad(options) {console.log("options", options.aa);// 调用this.getxxx(options.aa);},// 获取参数getxxx(aa) {console.log("aa==>", aa);}
});

展示

我的页面

 去Index页面-普通页面

去Home页面-tabBar页面

 去AA页面-在跳转的页面中获取参数


http://www.ppmy.cn/devtools/145350.html

相关文章

GESP CCF C++五级编程等级考试认证真题 2024年12月

GESP CCF C五级编程等级考试认证真题 202412 1 单选题&#xff08;每题 2 分&#xff0c;共 30 分&#xff09; 第 1 题 下面关于链表和数组的描述&#xff0c;错误的是&#xff08; &#xff09;。 A. 当数据数量不确定时&#xff0c;为了应对各种可能的情况&#xff0c;需要申…

Ubuntu安装教程+网页部署于服务器(前端+后端+mysql数据库)新版

Ubuntu安装配置教程 1、Ubuntu安装教程 1.1、下载Ubuntu 教程&#xff1a;https://blog.csdn.net/weixin_73404807/article/details/132296815?ops_request_misc&request_id&biz_id102&utm_termubuntu-20.04.6-desktop&utm_mediumdistribute.pc_search_res…

Visual Studio 、 MSBuild 、 Roslyn 、 .NET Runtime、SDK Tools之间的关系

1. Visual Studio Visual Studio 是一个集成开发环境&#xff08;IDE&#xff09;&#xff0c;为开发者提供代码编写、调试、测试和发布等功能。它内置了 MSBuild、Roslyn 和 SDK Tools&#xff0c;并提供图形化界面来方便开发者进行项目管理和构建。与其他组件的关系&#xf…

精通Redis

目录 1.NoSQL 非关系型数据库 2.Redis 3.Redis的java客户端 4.Jedis 4.1Jedis快速入门 4.2Jedis连接池及使用 5.SpringDataRedis和RedisTemplate 6.SpringDataRedis快速入门 7.RedisSerializer 1.NoSQL 非关系型数据库 基础篇-02.初始Redis-认识NoSQL_哔哩哔哩_bilib…

设计模式详解(十二):单例模式——Singleton

什么是单例模式 单例模式 (Singleton Pattern) 是一种常见的设计模式&#xff0c;用于确保一个类在整个应用程序运行期间只有一个实例&#xff0c;并提供全局访问点。 本文将详细介绍单例模式的定义、实现方式、优缺点&#xff0c;以及 Android 源码中的使用实例&#xff0c;…

《软件设计的哲学》阅读摘要之设计原则

《软件设计的哲学》&#xff08;A Philosophy of Software Design&#xff09;是一本在软件架构与设计领域颇具影响力的书籍&#xff0c;作者 John Ousterhout 在书中分享了诸多深刻且实用的软件设计理念。书中列举的这些设计原则&#xff0c;汇聚了作者丰富的实战经验与深邃的…

细说STM32F407单片机轮询方式读写SPI FLASH W25Q16BV

目录 一、工程配置 1、时钟、DEBUG 2、GPIO 3、SPI2 4、USART6 5、NVIC 二、软件设计 1、FALSH &#xff08;1&#xff09;w25flash.h &#xff08;2&#xff09; w25flash.c 1&#xff09;W25Q16基本操作指令 2&#xff09;计算地址的辅助功能函数 3&#xff09;器…

Java实现Excel带层级关系的数据导出功能

在Java中实现Excel带层级关系的数据导出&#xff0c;可以使用Apache POI库。Apache POI是一个强大的API&#xff0c;用于操作各种基于Office Open XML标准&#xff08;OOXML&#xff09;和微软的OLE 2复合文档格式&#xff08;OLE2&#xff09;的文件格式&#xff0c;包括Excel…