微信小程序收藏功能的實現(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)代碼的文章就介紹到這了,更多相關微信小程序收藏功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: