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


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 相关文章推荐
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
当鼠标移动时出现特效的JQuery代码
Nov 08 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
Mar 01 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
Taro小程序自定义顶部导航栏功能的实现
Dec 17 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 checkbox 取值详细说明
2010/08/19 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
常用DOM整理
2015/06/16 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
js实现时间日期校验
2020/05/26 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Django实现分页功能
2018/07/02 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
俄罗斯大型在线书店:Читай-город
2019/10/10 全球购物
会计工作决心书
2014/03/11 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
协议书与合同的区别
2014/04/18 职场文书
《赶海》教学反思
2014/04/20 职场文书
学习方法演讲稿
2014/05/10 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
2019暑假学生安全口号
2019/06/27 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技