WeChat 미니 프로그램 수집 기능 구현에 대해

이 글에서는 위챗 애플릿 수집 기능의 구현 코드를 주로 소개합니다. 기본 기능은 컬렉션을 클릭한 후 수집된 항목을 표시하는 것이며, 현재 클릭한 컬렉션 항목이 다른 페이지에 나타납니다. 도움이 필요한 친구들은

요구 사항

을 참고할 수 있습니다. 컬렉션을 클릭하면 컬렉션으로 표시되며, 현재 클릭한 컬렉션 항목이 다른 페이지에 나타납니다

해결해야 할 문제

1. 수집 클릭 후 수집으로 표시되어야 하고, 텍스트 상태가 변경됩니다

2. 수집 클릭을 다른 페이지에서 어떻게 알 수 있고, 수집하려면 클릭하세요?
   

어떻게 해결하나요?

1. 데이터 상태는 바인딩되어 있으며 스타일은 상태에 의해 제어됩니다(삼항 연산자)

2. Cache(setStorageSync, getStorageSync), 페이지를 클릭하여 캐시(데이터의 ID)를 설정합니다. ), 캐시를 가져오는 페이지를 표시하고, 캐시 ID를 가져오고, 전체 데이터에서 얻은 ID 항목을 꺼내서 새로운 배열에 넣습니다

특정 구현

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>

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

페이지 표시 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,
 })
 },
})

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 내용이 있으니 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

위챗 미니 프로그램 좋아요, 목록 삭제, 공유 기능 구현

위챗 미니 프로그램 스크롤 메시지 알림 구현

위챗 미니 프로그램 동적으로 표시되는 효과 프로젝트 카운트다운

위 내용은 WeChat 미니 프로그램 수집 기능 구현에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!