当前位置: 首页 > news >正文

【微信小程序】使用页面跳转并携带多个特定参数

前言

在我们项目的搭建时常常会用到页面跳转,在微信小程序中也支持多个跳转类型。如(wx.switchTab\wx.reLauch\wx.redirectTo\wx.navigateTo\wx.navigateBack)等等,每一个路由API都是有相对应的特定跳转功能,在这里我就不赘述了。

微信开发者文档关于路由的知识点

这里我们项目的需求是:点击了盒子后跳转至详情页面,并且携带活动的唯一的id值、用户类型(学生或者老师)、事件类型(活动详情、预约详情)。如果要实现该功能,我们需要传入一个特殊参数和两个普通参数。

现在我们将重点放在给路由传入多个特定参数上。首先我们知道可以给路径后携带一个或者多个参数,参数也有不同的类型:普通参数(给定值的参数)、特殊阐述(动态赋予的值,如数据库单个记录的_id等)。给跳转携带多个普通参数很简单,但是我们该如何让它携带一个特殊参数在加上若干个普通参数呢?


给路由携带多个普通参数

如传入给定的值参数我们这里称为普通参数如下所示。

       //跳转到详情页面goDetail(e){wx.navigateTo({// 跳转到详情页面并携带两个参数id1和id2,两个参数直接用&隔开url: '/pages/eventDetail/eventDetail?id1=1&id2=2'})},

在eventDetail页面打印的结果是:

Page({data:{},onLoad(option){console.log("列表所携带的值",option)//打印结果如下图所示},
})

给路由携带一个特殊参数

 <view class="mine_application_content" wx:for="{{imfor}}" ><!-- data-id:给view携带上_id的值--><view class="event" bindtap="goDetail" data-id="{{item._id}}"<view>活动名称:{{item.a1_huodongName}}</view><view class="eventTime">活动开始时间:{{item.a2_startTime}}</view></view>
</view>

//跳转到详情页面goDetail(e){wx.navigateTo({// 跳转到详情页面并携带活动idurl: '/pages/eventDetail/eventDetail?id=' +e.currentTarget.dataset.id})},

Page({data:{},onLoad(option){console.log("列表所携带的值",option.id)//打印结果如下图所示},
})


给路由携带一个特殊参数以及两个普通参数

  <!-- 活动内容 点击可跳转至详情页面 --><view class="mine_application_content" wx:for="{{imfor}}" ><!-- 携带id、用户类型、事件类型(1为活动、2为预约)三个参数--><view class="event" bindtap="goDetail" data-id="{{item._id}}" data-user="stu" data-type="1"><view>活动名称:{{item.a1_huodongName}}</view><view class="eventTime">活动开始时间:{{item.a2_startTime}}</view></view>
</view>

注:在JS部分我们不采用使用JSON转换的方法,而是采取先加后截的方法来获取各个参数,这里我们将用到JS中截取字符串的方法

  • string.substr( )

  • string.slice( a, b)

//跳转到详情页面
goDetail(e){wx.navigateTo({// 跳转到详情页面并携带活动id(包括记录id+用户类型+详情类型)url: '/pages/eventDetail/eventDetail?id=' +e.currentTarget.dataset.id + e.currentTarget.dataset.user + e.currentTarget.dataset.type})
},

Page({data:{},onLoad(option){let that = this//查看传入该页面的参数console.log("列表所携带的值",option.id)// 创建一个变量使其等于参数var parameters = option.id//创建一个type变量用来存储详情的类型截取参数的最后一位,1指的是活动,2指的是预约var type = parameters.substr(parameters.length-1)//创建一个user变量用来存储用户类型截取参数的最后三位var user = parameters.slice(-4,-1)this.setData({user:user,type:type})// 创建id变量来存放活动的_id字段所需要的值var id = parameters.slice(0,-4)console.log("user是",this.data.user)console.log("id是",id)console.log("type是",this.data.type)//全部打印的值如下图所示},
})

这样我们就大功告成了,使用了比较简单的方法获取到了路由所携带的三个参数。


结语

如果有疑问欢迎大家留言讨论,你如果觉得这篇文章对你有帮助可以给我一个免费的赞吗?我们之间的交流是我最大的动力!

相关文章:

【微信小程序】使用页面跳转并携带多个特定参数

前言在我们项目的搭建时常常会用到页面跳转&#xff0c;在微信小程序中也支持多个跳转类型。如(wx.switchTab\wx.reLauch\wx.redirectTo\wx.navigateTo\wx.navigateBack)等等&#xff0c;每一个路由API都是有相对应的特定跳转功能&#xff0c;在这里我就不赘述了。微信开发者文…...

CVPR 2021 | Involution:超越convolution和self-attention的神经网络算子

CVPR 2021 | Involution:超越convolution和self-attention的神经网络算子 论文地址:https://arxiv.org/pdf/2103.06255v2.pdf 代码地址:https://github.com/d-li14/involution Involution卷积,文章描述说它比convolution更轻量更高效,形式上比self-attention更加简洁,可以…...

11 OpenCV图像识别之人脸识别

文章目录1 Eigenfaces1.1 建模流程1.2 示例代码2 Fisherfaces2.1 建模流程2.2 示例代码3 Local Binary Histogram3.1 建模流程3.2 示例代码OpenCV 提供了三种人脸识别方法&#xff1a;Eigenfaces Eigenfaces是一种基于PCA&#xff08;Principal Component Analysis&#xff0c…...

ssh设置:免密登入、修改默认端口、禁止root登入、限制错误登入次数

服务器&#xff1a; 客户端&#xff1a; 在下面不再说明服务器和客户端。 1.修改ssh默认端口 是在服务器中设置。 该设置涉及三部分&#xff1a;sshd配置文件修改/增加新端口、Selinux添加新端口、Firewall开放新端口。 vim /etc/ssh/sshd.config&#xff0c;找到#Port行&…...

【Fastdfs】| 入门连续剧——安装

作者&#xff1a;狮子也疯狂 专栏&#xff1a;《spring开发》 坚持做好每一步&#xff0c;幸运之神自然会降临在你的身上 目录一. &#x1f981; 前言Ⅰ. &#x1f407; 为什么要使用分布式文件系统&#xff1f;1.1 单机系统 vs 独立文件服务器1.2 分布式文件系统1.3 FastDFS引…...

【ESP32-S3】Pycharm 使用 microPython 教程(避坑)

一、下载Pycharm等操作 1.百度云下载链接 链接&#xff1a;https://pan.baidu.com/s/1tkbMzS5B_v-Cn4WQlTqS3Q?pwd0108 提取码&#xff1a;0108 2.安装 按照压缩包中的教程来&#xff0c;你懂的。 二、配置microPython环境 1.安装 microPython 插件 1.1 File > Sett…...

Allegro如何通过报表的方式检查单板上是否有假器件操作指导

Allegro如何通过报表的方式检查单板上是否有假器件操作指导 在做PCB设计的时候,输出生产文件之前,必须保证PCB上不能存在假器件,如下图,是不被允许的 当PCB单板比较大,如何通过报表的方式检查是否存在假器件,具体操作如下 点击Tools点击Reports...

清理bib文件(删除重复项,仅保留tex中引用的条目)

在写latex文件的过程中&#xff0c;经常会遇到添加了一堆文献的bibtex到bib文件中&#xff0c;有时候文章一长同一篇文献用不同的cite-key引用了多次&#xff0c;同时也会有一些文献最后并没被正文引用&#xff0c;这就需要对bib文件进行清理。 删除重复项 可以用JabRef 在J…...

Rust编程细节知识点拾遗

1.Rust中每一个引用都有生命周期&#xff0c;也就是引用保持有效的作用域。生命周期主要目标是避免悬垂引用&#xff0c;悬垂引用就是引用了已经释放的值。函数中&#xff0c;x的生命周期不能小于返回值得生命周期。当有x和y的时候&#xff0c;两者的生命周期是两个里面较小的那…...

【Linux】线程池

&#x1f387;Linux&#xff1a; 博客主页&#xff1a;一起去看日落吗分享博主的在Linux中学习到的知识和遇到的问题博主的能力有限&#xff0c;出现错误希望大家不吝赐教分享给大家一句我很喜欢的话&#xff1a; 看似不起波澜的日复一日&#xff0c;一定会在某一天让你看见坚持…...

运动版蓝牙耳机什么牌子的好、运动款蓝牙耳机推荐

何以解忧&#xff1f;唯有运动。事实已经无数次证明&#xff0c;运动不但可以让你更瘦身、更紧实&#xff0c;更重要的是精神状态也能焕然一新。不知道各位是不是也跟我一样&#xff0c;喜欢在运动的时候听着音乐。但是听音乐就需要有好的续航&#xff0c;否则运动一半没电了&a…...

MySQL中自带的数据库表相关介绍

mysql的自带数据库表主要有以下几个&#xff1a; &#xff08;1&#xff09;information_schema &#xff08;2&#xff09;performance_schema &#xff08;3&#xff09;mysql &#xff08;4&#xff09;sys &#xff08;5&#xff09;可能存在空数据库test 一、informa…...

【微信小程序】--注册小程序账号(一)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#…...

Java多线程 - 利用Callable或CompletableFuture实现多线程异步任务执行

文章目录1. Callable接口源码2. Future接口的源码3. RunnableFuture接口和FutureTask实现类4. 利用线程池和Callable接口实现异步执行任务5. 利用CompleteFutable实现多线程异步任务执行1. Callable接口源码 FunctionalInterface public interface Callable<V> {// 这个…...

【ts + webpack】贪吃蛇小游戏

目录 一、项目搭建 1.1 初始化项目 二、项目界面布局 三、完成Food类 四、完成记分牌类 五、初步完成snake类 六、创建游戏控制器类 - 键盘事件 七、GameControl - 使蛇移动 八、蛇撞墙和吃食检测 一、项目搭建 1.1 初始化项目 1.使用init命令生成package.json文件 …...

传统巨头生“变”,中国毫米波雷达市场战火再升级

进入2023年&#xff0c;中国车载毫米波雷达市场战火明显升级。 一方面&#xff0c;愈演愈烈的份额抢夺战不仅仅存在于几大传统巨头之间&#xff0c;也快速转移到与国产供应商之间&#xff1b;随着部分外资巨头的本土化战略深入落地&#xff0c;同时对国产供应商造成了压力。 …...

26岁曾月薪15K,现已失业3个月,我依然没有拿到offer......

我做测试5年&#xff0c;一线城市薪水拿到15K&#xff0c;中间还修了一个专升本&#xff0c;这个年限不说资深肯定也是配得上经验丰富的。今年行情不好人尽皆知&#xff0c;但我还是对我的薪水不是很满意&#xff0c;于是打算出去面试&#xff0c;希望可以搏一个高薪。 但真到面…...

华为OD机试 - 打印文件 | 机试题算法思路 【2023】

最近更新的博客 华为OD机试 - 简易压缩算法(Python) | 机试题算法思路 【2023】 华为OD机试题 - 获取最大软件版本号(JavaScript) 华为OD机试 - 猜字谜(Python) | 机试题+算法思路 【2023】 华为OD机试 - 删除指定目录(Python) | 机试题算法思路 【2023】 华为OD机试 …...

【前端】浏览器的渲染流程(完整)

本文主要包含以下内容&#xff1a;浏览器渲染整体流程解析 HTML样式计算布局分层生成绘制指令分块光栅化绘制常见面试题浏览器渲染整体流程浏览器&#xff0c;作为用户浏览网页最基本的一个入口&#xff0c;我们似乎认为在地址栏输入 URL 后网页自动就出来了。殊不知在用户输入…...

华为OD机试 - 有效子字符串 | 机试题算法思路 【2023】

最近更新的博客 华为OD机试 - 简易压缩算法(Python) | 机试题算法思路 【2023】 华为OD机试题 - 获取最大软件版本号(JavaScript) 华为OD机试 - 猜字谜(Python) | 机试题+算法思路 【2023】 华为OD机试 - 删除指定目录(Python) | 机试题算法思路 【2023】 华为OD机试 …...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

【Oracle】分区表

个人主页&#xff1a;Guiat 归属专栏&#xff1a;Oracle 文章目录 1. 分区表基础概述1.1 分区表的概念与优势1.2 分区类型概览1.3 分区表的工作原理 2. 范围分区 (RANGE Partitioning)2.1 基础范围分区2.1.1 按日期范围分区2.1.2 按数值范围分区 2.2 间隔分区 (INTERVAL Partit…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)

UniApp 集成腾讯云 IM 富媒体消息全攻略&#xff08;地理位置/文件&#xff09; 一、功能实现原理 腾讯云 IM 通过 消息扩展机制 支持富媒体类型&#xff0c;核心实现方式&#xff1a; 标准消息类型&#xff1a;直接使用 SDK 内置类型&#xff08;文件、图片等&#xff09;自…...