Comment utiliser le mini programme WeChat pour ajouter des favoris

Cette fois, je vais vous montrer comment utiliser l'applet WeChat pour ajouter des favoris, et quelles sont les précautions à prendre pour utiliser l'applet WeChat pour ajouter des favoris. Ce qui suit est un cas pratique, jetons un coup d'œil.

Exigences

Après avoir cliqué sur la collection, elle sera affichée comme collectée et l'élément actuellement cliqué pour collecter apparaîtra sur une autre page

Problèmes à résoudre

1. Après avoir cliqué sur le favori, il doit être affiché comme favori et le statut du texte change

2. Comment une autre page sait-elle que vous avez cliqué sur le favori et obtient les données de votre clic sur le favori ?

Comment le résoudre ?

1. Liaison de l'état des données et style contrôlé par l'état (opérateur ternaire)

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

Implémentation 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?'已收藏':'收藏'}}</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
  })
  }
 })

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,
 })
 },
})

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment changer la valeur de retour du constructeur et ce pointeur de new() en js

Comment envoyer une requête POST au format JSON

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!