foreword
Page jumps are often used in the construction of our projects, and multiple jump types are also supported in the WeChat applet. Such as ( wx.switchTab\wx.reLauch\wx.redirectTo\wx.navigateTo\wx.navigateBack ) and so on, each routing API has a corresponding specific jump function , I will not go into details here.
Knowledge points about routing in WeChat developer documentation
The requirements of our project here are: click on the box to jump to the details page, and carry the unique id value of the event, user type (student or teacher), event type (event details, appointment details). To implement this function, we need to pass in a special parameter and two normal parameters.
For now we'll focus on passing a number of specific parameters to the route. First of all, we know that one or more parameters can be carried after the path , and the parameters also have different types: ordinary parameters (parameters with given values), special descriptions (dynamically assigned values, such as _id of a single record in the database, etc.) . It is very simple to carry multiple common parameters to the jump, but how do we make it carry a special parameter and add several normal parameters?
Carry multiple common parameters to the route
If the given value parameter is passed in, we call it a normal parameter here as shown below.
//跳转到详情页面
goDetail(e){
wx.navigateTo({
// 跳转到详情页面并携带两个参数id1和id2，两个参数直接用&隔开
url: '/pages/eventDetail/eventDetail?id1=1&id2=2'
})
},The result printed on the eventDetail page is:
Page({
data:{
},
onLoad(option){
console.log("列表所携带的值",option)
//打印结果如下图所示
},
})
Carry a special parameter to the route
<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({
// 跳转到详情页面并携带活动id
url: '/pages/eventDetail/eventDetail?id=' +e.currentTarget.dataset.id
})
},Page({
data:{
},
onLoad(option){
console.log("列表所携带的值",option.id)
//打印结果如下图所示
},
})
Carry a special parameter and two normal parameters to the route
<!-- 活动内容 点击可跳转至详情页面 -->
<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>Note: In the JS part, we do not use the method of JSON conversion, but adopt the method of adding first and then intercepting to obtain each parameter. Here we will use the method of intercepting strings in 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)
//全部打印的值如下图所示
},
})
In this way, we are done, using a relatively simple method to obtain the three parameters carried by the route.
epilogue
If you have any questions, please leave a message to discuss. If you think this article is helpful to you, can you give me a free like? The communication between us is my biggest motivation!