网站前端 设计,比较好的网站开发,中卫网站建设多少钱,网站备案需要的资料前言在我们项目的搭建时常常会用到页面跳转#xff0c;在微信小程序中也支持多个跳转类型。如(wx.switchTab\wx.reLauch\wx.redirectTo\wx.navigateTo\wx.navigateBack)等等#xff0c;每一个路由API都是有相对应的特定跳转功能#xff0c;在这里我就不赘述了。微信开发者文…前言在我们项目的搭建时常常会用到页面跳转在微信小程序中也支持多个跳转类型。如(wx.switchTab\wx.reLauch\wx.redirectTo\wx.navigateTo\wx.navigateBack)等等每一个路由API都是有相对应的特定跳转功能在这里我就不赘述了。微信开发者文档关于路由的知识点这里我们项目的需求是点击了盒子后跳转至详情页面并且携带活动的唯一的id值、用户类型学生或者老师、事件类型活动详情、预约详情。如果要实现该功能我们需要传入一个特殊参数和两个普通参数。现在我们将重点放在给路由传入多个特定参数上。首先我们知道可以给路径后携带一个或者多个参数参数也有不同的类型普通参数给定值的参数、特殊阐述动态赋予的值如数据库单个记录的_id等。给跳转携带多个普通参数很简单但是我们该如何让它携带一个特殊参数在加上若干个普通参数呢给路由携带多个普通参数如传入给定的值参数我们这里称为普通参数如下所示。 //跳转到详情页面goDetail(e){wx.navigateTo({// 跳转到详情页面并携带两个参数id1和id2两个参数直接用隔开url: /pages/eventDetail/eventDetail?id11id22})},在eventDetail页面打印的结果是Page({data:{},onLoad(option){console.log(列表所携带的值,option)//打印结果如下图所示},
})给路由携带一个特殊参数 view classmine_application_content wx:for{{imfor}} !-- data-id给view携带上_id的值--view classevent bindtapgoDetail data-id{{item._id}}view活动名称{{item.a1_huodongName}}/viewview classeventTime活动开始时间{{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 classmine_application_content wx:for{{imfor}} !-- 携带id、用户类型、事件类型1为活动、2为预约三个参数--view classevent bindtapgoDetail data-id{{item._id}} data-userstu data-type1view活动名称{{item.a1_huodongName}}/viewview classeventTime活动开始时间{{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)//全部打印的值如下图所示},
})这样我们就大功告成了使用了比较简单的方法获取到了路由所携带的三个参数。结语如果有疑问欢迎大家留言讨论你如果觉得这篇文章对你有帮助可以给我一个免费的赞吗我们之间的交流是我最大的动力
