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


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 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
vue.js的提示组件
Mar 02 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue脚手架中配置Sass的方法
Jan 04 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
微信小程序实现搜索框功能及踩过的坑
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
2006/12/13 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
微信公众号菜单配置微信小程序实例详解
2017/03/31 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
node.js自动上传ftp的脚本分享
2018/06/16 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
python实现对任意大小图片均匀切割的示例
2018/12/05 Python
python django model联合主键的例子
2019/08/06 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
医疗纠纷协议书
2014/04/16 职场文书
C++程序员求职信
2014/05/07 职场文书
公司董事长岗位职责
2014/06/08 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
安全生产工作汇报
2014/10/28 职场文书
技术支持岗位职责
2015/02/13 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书