Informationen zur Implementierung der WeChat-Miniprogramm-Sammelfunktion

In diesem Artikel wird hauptsächlich der Implementierungscode der WeChat-Applet-Sammlungsfunktion vorgestellt. Die Grundfunktion besteht darin, die gesammelten Elemente anzuzeigen, nachdem auf die Sammlung geklickt wurde, und das aktuell angeklickte Sammlungselement wird auf einer anderen Seite angezeigt. Freunde in Not können sich auf

Anforderungen

beziehen. Nachdem Sie auf die Sammlung geklickt haben, wird angezeigt, dass sie gesammelt wurde, und Die aktuell angeklickte Sammlung erscheint auf einer anderen Seite.

Probleme, die gelöst werden müssen

1. Nach dem Klicken auf „Favorit“ muss angezeigt werden, dass es gesammelt wurde, und der Textstatus ändert sich

2. Woher weiß eine andere Seite, dass Sie auf „Sammeln“ geklickt haben? , und erhalten Sie die Daten, auf deren Erfassung Sie geklickt haben?
   

Wie kann ich das Problem lösen?

1. Der Datenstatus wird durch die Zustandssteuerung (ternärer Operator) gebunden und gestaltet.

2. zwischengespeichert (setStorageSync, getStorageSync), klicken Sie auf die Seite, um den Cache (Daten-ID) festzulegen, zeigen Sie die Seite zum Abrufen des Caches an und nehmen Sie durch Abrufen der Cache-ID das erhaltene ID-Element aus den gesamten Daten heraus und fügen Sie es in ein neues Array ein

Spezifische Implementierung

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>

Klicken Sie auf die Seite 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
  })
  }
 })

, um die Seite 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,
 })
 },
})

anzuzeigen Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

WeChat-Applet implementiert die Funktionen „Gefällt mir“, „Liste löschen“ und „Teilen“

WeChat-Applet Implementierung des Scrollens Nachrichtenbenachrichtigungen

WeChat-Applet dynamische Anzeige des Projekt-Countdown-Effekts

Das obige ist der detaillierte Inhalt vonInformationen zur Implementierung der WeChat-Miniprogramm-Sammelfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!