About the implementation of WeChat mini program collection function

This article mainly introduces the implementation code of the WeChat applet collection function. The basic function is to display the collected items after clicking on the collection, and the currently clicked collection item will appear on another page. Friends who need it can refer to

Requirements

After clicking the collection, it will show that it has been collected, and the currently clicked collection will appear on another page. Project

Problems that need to be solved

1. After clicking to favorite It needs to show that it has been collected, and the text status changes

2. How does another page know that you clicked to collect, and get the data you clicked to collect
   

How to solve?

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

2. (setStorageSync, getStorageSync), click on the page to set the cache (data id), display the page to obtain the cache, and by obtaining 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?&#39;已收藏&#39;:&#39;收藏&#39;}}</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
  })
  }
 })

to display the 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,
 })
 },
})

The above is the entire content of this article , I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

WeChat Mini Program implements the functions of liking, deleting lists and sharing

WeChat Mini Program Implementation of scrolling message notifications

WeChat applet dynamically displays the effect of project countdown

The above is the detailed content of About the implementation of WeChat mini program collection function. For more information, please follow other related articles on the PHP Chinese website!