微信小程序收藏功能的实现代码


Posted in Javascript onJune 19, 2020

统一回复,这是我很久以前学习小程序时做的项目,当时是没问题的,最近很多人评论说收藏功能实现不了,但是因为工作原因没空弄

以下是我当时自学小程序的视频地址,里面有收藏的功能的视频,如有需要可以去看看
添加链接描述

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'
  })
 },

结果图

微信小程序收藏功能的实现代码微信小程序收藏功能的实现代码

看起来是可以了,但是不难发现当你退出页面再进来按钮又被重置了…
所以我们要把按钮状态保存下来.在handleCollection函数中继续添加:

//点击收藏图标后缓存数据到本地
  //把data中的index放到新let出来的index中,因为下面要把index也存进去,要用index来判断你收藏了哪个页面
  let { index } = this.data;
  
  //首先去看一下缓存的数据
  wx.getStorage({
   key:'isCollected',
   success:(data)=>{
    let obj = data.data;
    //如果有,则刷新,没有则追加
    obj[index] = isCollected;
    wx.setStorage({
     key: 'isCollected',
     data: obj,
     success: () => {

     }
    });
   }
  })

onLoad生命周期函数中添加逻辑:

//根据本地缓存的数据判读用户是否收藏当前文章
  let detailStorage = wx.getStorageSync('isCollected')
  //如果没有收藏
  if (!detailStorage){
   //初始化一个空的对象
   wx.setStorageSync('isCollected', {});
  }
  //如果收藏了
  if (detailStorage[index]){
   this.setData({
    isCollected: true
   })
  }

总结

到此这篇关于微信小程序收藏功能的实现代码的文章就介绍到这了,更多相关微信小程序收藏功能内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 Javascript
微信小程序实现签到功能
Oct 31 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 #Javascript
微信小程序返回上一级页面的实现代码
Jun 19 #Javascript
小程序中的箭头函数的具体使用
Jun 19 #Javascript
在VUE style中使用data中的变量的方法
Jun 19 #Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 #Javascript
原生JS实现微信通讯录
Jun 18 #Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 #Javascript
You might like
php 获取客户端的真实ip
2009/11/30 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
犀利的js 函数集合
2009/06/11 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
javascript this详细介绍
2016/09/19 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue实现记事本功能
2019/06/26 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
wxpython绘制音频效果
2019/11/18 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
Python求解排列中的逆序数个数实例
2020/05/03 Python
Pytorch实验常用代码段汇总
2020/11/19 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
南京大屠杀观后感
2015/06/02 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
python热力图实现的完整实例
2022/06/25 Python