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


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 相关文章推荐
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
js异步编程小技巧详解
Aug 14 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 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
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php smarty模板引擎的6个小技巧
2014/04/24 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
python爬虫用scrapy获取影片的实例分析
2020/11/23 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
如何使用amaze ui的分页样式封装一个通用的JS分页控件
2020/08/21 HTML / CSS
英国最大的海报商店:GB Posters
2018/03/20 全球购物
政法学院毕业生求职信
2014/02/28 职场文书
公司口号大全
2014/06/11 职场文书
考试保密承诺书
2014/08/30 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
银行先进个人总结
2015/02/15 职场文书
铁人观后感
2015/06/16 职场文书
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang