使用微信小程序怎么用wx.storage来实现收藏功能？

我们可以简单看一下利用wx.storage做得收藏功能：

//收藏  star(e){    let {id} = e.currentTarget.dataset var e = wx.getStorageSync('star') if(!e){       var e = this.data.arr  }    if(!this.data.star){  Toast.success('收藏成功');  e.push(this.data.detail)  }else{  Toast.fail('取消收藏');  var index = e.findIndex((v)=>{ return v.basicInfo.id == id })     e.splice(index,1)  }     this.setData({  star:!this.data.star,  arr:e,    })      wx.setStorageSync('star',this.data.arr)      console.log("收藏",this.data.arr)  },

出现得问题：

使用储存得时候第一个储存得值会覆盖另外一个，这是为什么呢？

解答：第二次数据会覆盖第一次的原因就是，每次在触发这个方法的时候初始化了数据。所以就会覆盖数据所以在这个方法里边只需要先获取e这个数据，判断e是否存在值，当有值的时候往里边push 数据，当没有数据的时候直接将数据初始化

 var e = wx.getStorageSync('star')   if(!e){  var e = this.data.arr}

2.在点击收藏小星星得时候点击收藏发现回退历史再进来得时候明明收藏了但是小星星又暗了，那如何解决这个问题呢?怎样判断呢？

onLoad: function (options) {  // console.log(options.id)   // 注意：在收藏的时候判断的是传过来的id值而不是在点击收藏的时候重新赋值一个id,如果是重新赋值那么获取不到，执行顺序的问题   var id = options.id     // 收藏小红星：判断是否收藏   var star = wx.getStorageSync('star')  if(star.length!==0){     var k = star.findIndex((item)=>{  return item.basicInfo.id == id })   }     //  console.log(k)   //如果能找到   if(k>=0){     this.setData({    star:true   })   }else{   this.setData({  star:false    })  }}

3.那么wxml里面得如何添加事件得定义状态得

<view catchtap="star" data-id = "{{detail.basicInfo.id}}" class="infoo">  <van-icon name="star-o" size="70rpx" color="#999" custom-style="margin-right:10rpx;" wx:if="{{!star}}" /><van-icon name="star" size="70rpx" color="red" wx:if="{{star}}" custom-style="margin-right:10rpx;"/>
</view>//定义star得状态为false,不要忘了js方法里面更新状态哦！

使用微信小程序怎么用wx.storage来实现收藏功能？相关推荐

微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照-后端为nodejs
在本文微信小程序相机组件wx.createCameraContext()的使用模拟微信拍照之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodej ...
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转
[微信小程序开发] 用wx.navigateTo方法跳转到tabBar中被定义了的页面将无法跳转举例: main.js中: tabBar中定义了页面"pages/test/main&qu ...
微信小程序-bug-调用wx.login()无响应的原因和解决方案
微信小程序-bug-调用wx.login()无响应的原因和解决方案参考文章: (1)微信小程序-bug-调用wx.login()无响应的原因和解决方案 (2)https://www.cnblogs. ...
微信小程序地理位置接口( wx.getLocation )申请方法
在平时我们在开发小程序时,难免会需要用到用户的地理位置信息的功能,微信小程序开发者开放平台新规要求如果没有申请开通微信小程序地理位置接口( wx.getLocation ),是无法审核通过小程序的. ...
微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...
云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）
云开发(微信-小程序)笔记(十三)---- 注册登陆 1.简介点赞,收藏等都是程序的最简单的功能,在现实的应用中也很常见.这里我就来给大家介绍一下小程序的这个功能. 图标下载地址先去网站上http ...
微信小程序：超强大微信小程序源码下载内含几十款功能王者战力查询,游戏扫码登录,王者巅峰信息查询等等支持流量主收益和CPS收益
这是一款特别强大的一款微信小程序源码初步算了一下,该款小程序目前包含了几十个功能具体功能如以下: 游戏扫码登录王者战力查询改名生成(多种生成方式) 头像框制作(N款模板) 王者巅峰数据查询王 ...
uni-app 微信小程序客服聊天和发送页面卡片功能
微信小程序客服聊天和发送页面卡片功能实现步骤如下: (一):首先登录微信公众平台 :https://mp.weixin.qq.com/ 登录成功后找到----->功能-----> 客服-- ...
微信小程序、APP分销商城开发：分销功能模块设计
前面我们讲了微信小程序商城基础营销功能:微信小程序商城.APP商城开发营销活动功能策划(拼团.砍价.秒杀.直播.优惠券等) 今天讲的分销系统更是强大的营销功能,它应该如何设计呢?我们的系统经过一点一点 ...

使用微信小程序怎么用wx.storage来实现收藏功能？

使用微信小程序怎么用wx.storage来实现收藏功能？相关推荐

最新文章

热门文章