微信小程序购物车模块(缓存相关知识点)

1.前言：
本购物车模块不使用数据库来实现，将以小程序内置的本地存储模拟实现

2.wxml：
先在加入购物车模块增加点击事件

 <view class="bottom_cart"bindtap="handleCartAdd">加入购物车</view>

3.js：

handleCartAdd(){let cart=wx.getStorageSync('cartKey')||[];//第一次可能没有缓存数据，则设置cart为空数组let index=cart.findIndex(v=>v.goodsInfo===this.goodsInfo.goods_id)if(index==-1){//缓存不存在这个商品，未加入过购物车this.goodsInfo.num=1;//新增num为1cart.push(this.goodsInfo);//在cart这个容器中放入本商品的数据}else{//已经加入过购物车，则index为缓存中的本商品的索引cart[index].num++;}wx.setStorageSync('cartKey', cart);//将cart中的数据放回缓存中wx.showToast({title: '加入成功',icon:'success',mask:'true'})}

基本思路：
先定义变量cart来从缓存中寻找‘cartkey’这个缓存数据，若没有则将空数组赋值给cart，接着通过findIndex()方法寻找本商品对应的缓存区中的索引，若能找到，说明本商品之前缓存过，则直接将此索引对应的缓存区的数据的num值++。若找不到则索引返回-1，则将本商品的goodsInfo新增num数据并++，接着改变后的goodsInfo放进cart数组中，最后将cart数组放入key值为‘cartkey’的缓存区中。

findIndex()用法：
遍历数组中值，返回想要的值组成一个新数组，若这个新数组的值和自己点击的当前值有一样则返回一样的值的那个索引，若不存在则返回-1

效果图：
点击加入购物车后出现“加入成功”动画

缓存区出现key为cartkey的新数据，里面存放着本商品的goodsInfo信息

微信小程序购物车模块(缓存相关知识点)相关推荐

微信小程序调试webview_微信小程序内嵌webview相关知识点整理
前言随着微信小程序的广泛应用,越来越多的商家选择将营销阵营选择迁移到了小程序中,但受其小程序体积限制的影响,不能够完全满足商户的要求,应运而生的web-view组件很好的解决的这一问题.一方面内嵌w ...
原生微信小程序购物车
原生微信小程序购物车!! 效果: html: <view style="background-color: #eeeeee;height: 100vh;"><vi ...
微信小程序购物车功能
微信小程序购物车效果购物车是一个比较简单的小功能~ 购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染 ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序蓝牙模块BLE开发说明基础知识
微信小程序蓝牙模块说明一.简介微信小程序作为轻量级应用的载体,确实方便了很多的应用场景.传统的产品如果要和手机互联互通,那么必须要开发两套APP,即IOS和安卓.十分的麻烦和成本巨高.但是微信小程 ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
微信小程序的项目缓存路径
每次打开微信小程序都会默认缓存一份项目,它的路径如下: C:\Users\Administrator\AppData\Local\微信web开发者工具\User Data C:\Users\Admi ...

微信小程序购物车模块(缓存相关知识点)

微信小程序购物车模块(缓存相关知识点)

微信小程序购物车模块(缓存相关知识点)相关推荐

最新文章

热门文章