À propos de la mise en œuvre de la fonction de collecte du mini programme WeChat

Cet article présente principalement le code d'implémentation de la fonction de collection de l'applet WeChat. La fonction de base est d'afficher les éléments collectés après avoir cliqué sur la collection, et l'élément de collection actuellement cliqué apparaîtra sur une autre page. Les amis dans le besoin peuvent se référer aux

Exigences

Après avoir cliqué sur la collection, il montrera qu'elle a été collectée, et la collection actuellement cliquée apparaîtra sur une autre page Projet

Problèmes qui doivent être résolus

1. Après avoir cliqué sur le favori, il doit montrer qu'il a été collecté et le statut du texte change

2. Comment une autre page sait-elle que vous avez cliqué pour collecter , et obtenir les données que vous avez cliqué pour collecter ?
   

Comment le résoudre ?

1. L'état des données est lié et stylisé par le contrôle d'état (opérateur ternaire)

2. Cache (setStorageSync, getStorageSync), cliquez sur la page pour définir le cache (identifiant de données), affichez la page pour obtenir le cache, et en obtenant l'identifiant du cache, retirez l'élément d'identification obtenu dans l'ensemble des données et placez-le dans un nouveau tableau

Mise en œuvre spécifique

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>

Cliquez sur la 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
  })
  }
 })

pour afficher la 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,
 })
 },
})

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

L'applet WeChat implémente les fonctions de like, de suppression de liste et de partage

Applet WeChat Implémentation du défilement notifications de messages

Affichage dynamique de l'applet WeChat de l'effet de compte à rebours du projet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!