WeChat 미니 프로그램을 사용하여 즐겨찾기를 추가하는 방법

이번에는 WeChat 미니 프로그램을 사용하여 즐겨찾기를 추가하는 방법과 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?'已收藏':'收藏'}}</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 중국어 웹사이트의 다른 관련 기사에 주목하세요.

추천 자료:

js에서 생성자 반환 값과 new()의 이 포인터를 변경하는 방법

JSON 형식을 사용하여 POST 요청을 보내는 방법

위 내용은 WeChat 미니 프로그램을 사용하여 즐겨찾기를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!