這次帶給大家怎樣使用微信小程式做出新增收藏，使用微信小程式做出新增收藏的注意事項有哪些，以下就是實戰案例，一起來看一下。
需求
點擊收藏後顯示已收藏，在另一個頁面出現目前點擊收藏的項目
#需要解決的問題
#點擊收藏後需要顯示已收藏，並且文字狀態改變
#另一個頁面如何知道你點擊了收藏，並且獲得你點擊收藏的資料
如何解決？
資料狀態綁定，並且由狀態控制樣式（三元運算子）
快取（setStorageSync, getStorageSync）,點擊頁面設定緩存（數據的id），顯示頁面獲取緩存，透過獲得緩存id，將整個數據中的獲得的id那一項，取出，放入新的數組
具體實作
wxml
<image class="save " src="{{isClick?'../../youzan-image/save-s.png':'../../youzan-image/save.png'}}" 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中文網其它相關文章！
推薦閱讀：
以上是如何使用微信小程式做出新增收藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
