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

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

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

統(tǒng)一回復,這是我很久以前學習小程序時做的項目,當時是沒問題的,最近很多人評論說收藏功能實現(xiàn)不了,但是因為工作原因沒空弄

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

給detail.wxml中的收藏圖標添加屬性:

這里寫圖片描述

catchtap是點擊事件,wx:if的用法如下:

這里寫圖片描述

detail.js

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

結果圖

這里寫圖片描述

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

//點擊收藏圖標后緩存數(shù)據(jù)到本地
  //把data中的index放到新let出來的index中,因為下面要把index也存進去,要用index來判斷你收藏了哪個頁面
  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ù)判讀用戶是否收藏當前文章
  let detailStorage = wx.getStorageSync('isCollected')
  //如果沒有收藏
  if (!detailStorage){
   //初始化一個空的對象
   wx.setStorageSync('isCollected', {});
  }
  //如果收藏了
  if (detailStorage[index]){
   this.setData({
    isCollected: true
   })
  }

總結

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

您可能感興趣的文章: