This time I will show you how to use the WeChat applet to add favorites, and what are the precautions for using the WeChat applet to add favorites. The following is a practical case, let’s take a look.

Requirements

After clicking the favorite, it will be displayed as a favorite, and the currently clicked favorite item will appear on another page

Problems that need to be solved

1. After clicking the favorite, it needs to be displayed as a favorite and the text status changes

2. How does another page know that you clicked on the collection and obtain the data of your click on the collection?

How to solve it?

1. Data state binding, and controlled by state style (ternary operator)

2. Cache (setStorageSync, getStorageSync), click on the page to set the cache (data id), display the page to get the cache, and by getting the cache id, take out the obtained id item in the entire data and put it into a new array

Specific implementation

wxml

<image class="save " src="{{isClick?&#39;../../youzan-image/save-s.png&#39;:&#39;../../youzan-image/save.png&#39;}}" bindtap="haveSave"></image>
???<text class="saveText">{{isClick?'已收藏':'收藏'}}</text>

Click the page js

?Page({
??data:?{
??job:?[],
??jobList:?[],
??id:?'',
??isClick:?false,
??jobStorage:?[],
??jobId:?''
??},
??haveSave(e)?{
??if?(!this.data.isClick?==?true)?{
???let?jobData?=?this.data.jobStorage;
???jobData.push({
???jobid:?jobData.length,
???id:?this.data.job.id
???})
???wx.setStorageSync('jobData',?jobData);//設(shè)置緩存
???wx.showToast({
???title:?'已收藏',
???});
??}?else?{
???wx.showToast({
???title:?'已取消收藏',
???});
??}
??this.setData({
???isClick:?!this.data.isClick
??})
??}
?})

Display page js

import?jobList?from?'../../api/detail'
Page({
?data:?{
?id:'',
?job:[],
?savejob:[],
?},
?onLoad:?function?(options)?{
?console.log(wx.getStorageSync('jobData'));
?let?savejob?=?wx.getStorageSync('jobData')//獲得緩存
?let?index?=?savejob.length-1;
?console.log(savejob[index].id);
?let?jobid?=?savejob[index].id
?let?temp=?jobList[jobid]?//將獲得緩存后匹配的數(shù)據(jù)放入新的數(shù)組
?let?job=?[];
?job.push(temp);
?this.setData({
??id:index,
??job:?job,
?})
?},
})

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to change the constructor return value and this pointer of new() in js

How to send POST request using JSON format

The above is the detailed content of How to use WeChat mini program to add favorites. For more information, please follow other related articles on the PHP Chinese website!