So verwenden Sie das WeChat-Miniprogramm zum Hinzufügen von Favoriten

Dieses Mal zeige ich Ihnen, wie Sie das WeChat-Applet zum Hinzufügen von Favoriten verwenden und welche Vorsichtsmaßnahmen für die Verwendung des WeChat-Applets zum Hinzufügen von Favoriten gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Anforderungen

Nachdem Sie auf die Sammlung geklickt haben, wird diese als gesammelt angezeigt und der aktuell zum Sammeln angeklickte Gegenstand erscheint auf einer anderen Seite

Probleme, die gelöst werden müssen

1. Nachdem Sie auf die Sammlung geklickt haben, wird sie angezeigt muss als gesammelt angezeigt werden und der Textstatus ändert sich

2. Woher weiß eine andere Seite, dass Sie auf den Favoriten geklickt haben und erhält die Daten Ihres Klicks auf den Favoriten?

Wie löst man das Problem?

1. Datenzustandsbindung und zustandsgesteuerter Stil (ternärer Operator)

2. Cache(setStorageSync, getStorageSync), Klicken Sie auf die Seite, um den Cache (die ID der Daten) festzulegen, und zeigen Sie die Seite an, um den Cache abzurufen. Nehmen Sie 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?'已收藏':'收藏'}}</text>

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

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So ändern Sie den Konstruktor-Rückgabewert und diesen Zeiger von new() in js

So senden Sie eine POST-Anfrage im JSON-Format

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das WeChat-Miniprogramm zum Hinzufügen von Favoriten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!