Everyday when we shop on a mobile app, when we click on the dazzling array of products on the app homepage, we will jump to the specific page of the product.
No matter which product we click on, the layout of the specific page that jumps to the product is the same, but the data on the page is different, such as the product name, pictures, etc. This means that when clicking on a product, parameters are passed when jumping to a specific page. Depending on the parameters, the data on the page will be different.
So now we will briefly talk about how to carry parameters when jumping in WeChat applet.
Table of contents
Receiving data and data processing
wmxl part
First, we use wx:for to take out the data in the data in the js file and loop through it to render the page.
Use bindtap="gmJump" to add a click event to the view. The name is gmJump. This function is used to write the jump function.
For example, take the homepage of the mobile Taobao app, the waterfall flow layout is combined with lazy loading. When sliding down, the amount of rendered product data is also increasing, and the rendered data is relatively large. How can you only click on a product when jumping? Jump with the data of this product instead of jumping with all the product data.
We use data-num="{ {item}}" to bind the data somewhere. As for where, we will see next.
<view wx:for="{
{dataArr}}" wx:key="index" data-num="{
{item}}" bindtap="gmJump">
//省略的dom结构，都是在根据数据渲染界面，所以省去。
</view>jump function
bound data
In our jump function gmJump, we write a formal parameter called e. Let's print e and see what's in it.
gmJump(e){//携带参数跳转
console.log(e);
}The print result is as shown below. This e is an object, which is all the information of the element. We bind the data to the information of this element.
Expand the data. In e.currentTarget.dataset.num, it is the data we bound in. So we can process this part of the data.
Jump function with parameters
First, we assign the required data e.currentTarget.dataset.num to a variable det.
Then use wx.navigateTo to write a jump and splice the data after the url . Note that the name is spliced after the English question mark, and then the plus sign is used outside the quotation marks to splice the data.
We use JSON.stringify to convert complex object data into string data and splice it behind the URL. If we directly splice complex object data, an error will be reported.
gmJump(e){//携带参数跳转
console.log(e);
let det = e.currentTarget.dataset.num.attributes
wx.navigateTo({
url: '跳转去的url地址?det='+JSON.stringify(det),
success: ()=>{
console.log("成功");
}
})
},Receiving jump page data
Receiving data and data processing
The page you jump to can receive the passed data through its own life cycle function onLoad (life cycle function-monitoring page loading).
onLoad(options) {
let opt = JSON.parse(options.det)//传过来的参数进行处理
this.setData({//将传过来的数据赋值给data里面的dataArr
dataArr: opt,
})
// console.log(this.data.dataArr);
}We directly write a formal parameter options to the onLoad function and print what the options are.
As shown in the picture, this is the data we passed. But it is in string form, and we must convert it into object form before we can operate on it. So we use JSON.parse() to convert string data into objects, which makes it easier for us to manipulate the data.
After converting the data, print the data again to see what it is. The following data becomes a normal object form, and we can operate on the data.
Save data into data
Then we use this.setData to save the data into data. I defined a dataArr to save the data here. Later, when rendering the page, you can directly manipulate the data in the data.
this.setData({
dataArr: opt,
})At this point, we have completed the jump of parameters between pages in the WeChat applet. Thank you for reading.