快捷導(dǎo)航

微信小程序收藏功能的實(shí)現(xiàn)代碼

更新時(shí)間：2020年06月19日 11:34:24 作者：qq_36901488

這篇文章主要介紹了微信小程序收藏功能的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

統(tǒng)一回復(fù),這是我很久以前學(xué)習(xí)小程序時(shí)做的項(xiàng)目,當(dāng)時(shí)是沒問題的,最近很多人評(píng)論說收藏功能實(shí)現(xiàn)不了,但是因?yàn)楣ぷ髟驔]空弄

以下是我當(dāng)時(shí)自學(xué)小程序的視頻地址,里面有收藏的功能的視頻,如有需要可以去看看
添加鏈接描述

給detail.wxml中的收藏圖標(biāo)添加屬性:

這里寫圖片描述

catchtap是點(diǎn)擊事件,wx:if的用法如下:

這里寫圖片描述

detail.js

data: {
  detailObj:{},
  index:null,
  // 是否收藏
  isCollected:false
 },
 handleCollection(){
  let isCollected = !this.data.isCollected
  this.setData({
   // 下面本來是這樣子的:isCollected=isCollected,可以簡(jiǎn)寫
   isCollected
  })
  //提示用戶
  wx.showToast({
    title: isCollected ? '收藏成功' : '取消收藏',
    icon:'success'
  })
 },

結(jié)果圖

這里寫圖片描述

看起來是可以了,但是不難發(fā)現(xiàn)當(dāng)你退出頁面再進(jìn)來按鈕又被重置了…
所以我們要把按鈕狀態(tài)保存下來.在handleCollection函數(shù)中繼續(xù)添加:

//點(diǎn)擊收藏圖標(biāo)后緩存數(shù)據(jù)到本地
  //把data中的index放到新let出來的index中,因?yàn)橄旅嬉裪ndex也存進(jìn)去,要用index來判斷你收藏了哪個(gè)頁面
  let { index } = this.data;
  
  //首先去看一下緩存的數(shù)據(jù)
  wx.getStorage({
   key:'isCollected',
   success:(data)=>{
    let obj = data.data;
    //如果有,則刷新,沒有則追加
    obj[index] = isCollected;
    wx.setStorage({
     key: 'isCollected',
     data: obj,
     success: () => {

     }
    });
   }
  })

在onLoad生命周期函數(shù)中添加邏輯:

//根據(jù)本地緩存的數(shù)據(jù)判讀用戶是否收藏當(dāng)前文章
  let detailStorage = wx.getStorageSync('isCollected')
  //如果沒有收藏
  if (!detailStorage){
   //初始化一個(gè)空的對(duì)象
   wx.setStorageSync('isCollected', {});
  }
  //如果收藏了
  if (detailStorage[index]){
   this.setData({
    isCollected: true
   })
  }

總結(jié)

到此這篇關(guān)于微信小程序收藏功能的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)微信小程序收藏功能內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: