How to use WeChat mini program to add favorites

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);//设置缓存
   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] //将获得缓存后匹配的数据放入新的数组
 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!