微信小程序购物车功能实现（干货满满）

已于 2022-11-02 10:07:28 修改
阅读量4w 收藏 628
点赞数 115
分类专栏： 微信小程序 文章标签： 小程序
于 2020-08-28 16:27:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41317414/article/details/108280176
版权

微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！

1. 应用场景
2. 思路分析
3. 代码分析
4. 具体实现代码

效果截图：
在这里插入图片描述

1.应用场景

适用于商城、秒杀、商品购买等类型的小程序，负责将顾客浏览的商品保存下来，方便客户集中比较商品与购买商品。

2.思路分析

实现购物车功能前请思考以下问题：
1.小程序如何布局？使用什么布局能提升页面开发效率？？
2.将购物车功能分为四个小功能：(1)一键全选/取消商品 （2）动态添加商品可手动输入 （3）计算结算商品金额 （4）左滑动删除商品

答：（1）在小程序中主要是兼容安卓与ios两种型号手机，在页面开发中可使用flex布局，能极大的提高页面的开发效率。（2）请仔细阅读代码分析，看懂自己也可轻松实现购物车功能 so easy！！！

3.代码分析

1. 一键全选/取消

 allSelect: function (e) {
    var that = this
    var allSelect = e.currentTarget.dataset.select//判断是否选中 circle是 success否
    var newList = that.data.slideProductList
    if (allSelect == "circle") {
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "success"
      }
      var select = "success"
    } else {
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "circle"
      }
      var select = "circle"
    }
    that.setData({
      slideProductList: newList,
      allSelect: select
    })
    that.countNum()//计算商品数量
    that.count()//计算商品金额
  },

2. 动态添加商品可手动输入

  • a 添加商品
addtion: function (e) {//添加商品
    var that = this
    var index = e.currentTarget.dataset.index
    var num = e.currentTarget.dataset.num
    if (num < 99) { //默认峰值99件
      num++
    }
    var newList = that.data.slideProductList
    newList[index].num = num
    that.setData({
      goodsNum:num,
      slideProductList: newList
    })
    that.countNum()
    that.count()
  },
  • b 减少商品
  subtraction: function (e) {//减少商品
    var that = this
    var index = e.currentTarget.dataset.index
    var num = e.currentTarget.dataset.num
    var newList = that.data.slideProductList
    //当1件时，再次点击移除该商品
    if (num == 1) {
      newList.splice(index, 1)
    } else {
      num--
      newList[index].num = num
    }
    that.setData({
      goodsNum: num,
      slideProductList: newList
    })
    that.countNum()
    that.count()
  },
  • c 直接输入
inputNum:function(e){
    var num = e.detail.value;
    this.setData({goodsNum:num})
  },
  numIputBlur:function(e){
    var that = this;
    var num = that.data.goodsNum;
    var index = e.currentTarget.dataset.index;
    var newList = that.data.slideProductList
    if (num == "") { //判空
      newList[index].num = 1;
      that.setData({
        slideProductList: newList
      })
    }else if (num < 1) {
      that.setData({
        goodsNum: newList[index].num,
        slideProductList: newList
      })
      wx.showToast({
        title: '亲，该宝贝不能减少了哦~',
        icon: 'none'
      })
    }else if(num>99){
      that.setData({
        goodsNum: newList[index].num,
        slideProductList: newList
      })
      wx.showToast({
        title: '亲，该宝贝最多购买99件哦~',
        icon: 'none'
      })
    }else{
      newList[index].num = num;
      that.setData({
        slideProductList: newList
      })
    }
    that.countNum()
    that.count()
  },

3. 计算结算商品金额

count: function () {//计算金额方法
    var that = this
    var newList = that.data.slideProductList
    var newCount = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].select == "success") {
        newCount += newList[i].num * newList[i].price
      }
    }
    that.setData({
      count: newCount
    })
  },

4. 页面左滑动删除商品

功能后续整理

4. 具体实现代码

1.wxml

 <view class="product-container">
	<view class="product-list" style='height:{{height}}px'>
		<view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key='slideProductList'>
			<slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key='slideProductList'>
				<view class="product-item-wrap">
					<icon type="{{item.select}}" size="19" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" color="red" />
					<view class="product_img">
						<image src="{{item.url}}" class='goods-img' mode="widthFix"></image>
					</view>
					<view class="product-movable-item">
						<view class="goods-name">{{item.name}}</view>
						<view class="goods-type">最新款
							<text>{{item.style}}</text>
						</view>
						<view class="goods-price">￥{{item.price}}</view>
					</view>
					<view class="product-movable-item product-movable-item-amount">
						<view class="num-box">
							<view class="btn-groups">
								<button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
								<input class='num' type='number' data-index="{{index}}" bindblur="numIputBlur" bindinput='inputNum' value='{{item.num}}'></input>
								<button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
							</view>
						</view>
					</view>
				</view>
			</slide-delete>
		</view>
	</view>
	<view class="cart-fixbar">
		<view class="allSelect">
			<icon type="{{allSelect}}" size="19" data-select="{{allSelect}}" bindtap="allSelect" color='#fff' />
			<view class="allSelect-text">全选</view>
		</view>
		<view class="count">
			<text>合计：</text>￥{{count}}
		</view>
		<view class="order">
			<view class="orders">
				去结算
				<text class="allnum">({{num}})</text>
			</view>

		</view>
	</view>
</view>
<view class="footer">
	<navigator class="ft_item" url="../shoping/shoping" hover-class="none" open-type='redirect'>
		<image src="../../image/sy_1.png"></image>
		<view class="item_title">首页</view>
	</navigator>
	<navigator url="../classification/classification" hover-class="none" open-type='redirect' class="ft_item">
		<image src="../../image/fl_1.png"></image>
		<view class="item_title">分类</view>
	</navigator>
	<view class="ft_item">
		<image src="../../image/gwc.png"></image>
		<view class="item_title">购物车</view>
	</view>
	<navigator hover-class="none" url="../my/my" open-type='redirect' class="ft_item">
		<image src="../../image/gr_1.png"></image>
		<view class="item_title">我的</view>
	</navigator>
</view>

2.js

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    goodsNum:'',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),

    slideProductList: [
      {
        id:1,
        name: '智能手环1111111112222211',
        url: "../../image/bracelet.jpg",
        style: "2代",
        price: "149.5",
        select: "circle",
        num: "1",
        code: "0001",
        amount: 500
      },
      {
        id: 2,
        name: "指环支架",
        url: "../../image/ring.jpg",
        style: "金色",
        price: "19.9",
        select: "circle",
        code: "0002",
        num: "1",
        amount: 500
      },
      {
        id: 3,
        name: "新款平板电脑",
        url: "../../image/iphone.png",
        style: "9.7英寸",
        price: "100",
        select: "circle",
        code: "0003",
        num: "1",
        amount: 110
      },
      {
        id: 4,
        code: "0001",
        name: "无人机",
        url: "../../image/uav.jpg",
        style: "低配版",
        price: "4999",
        select: "circle",
        code: "0004",
        num: "1",
        amount: 200
      },
      {
        id: 5,
        code: "0001",
        name: "无人机",
        url: "../../image/uav.jpg",
        style: "低配版",
        price: "4999",
        select: "circle",
        code: "0004",
        num: "1",
        amount: 200
      },
      {
        id: 6,
        code: "0001",
        name: "无人机",
        url: "../../image/uav.jpg",
        style: "低配版",
        price: "4999",
        select: "circle",
        code: "0004",
        num: "1",
        amount: 200
      },
    ],
    allSelect: "circle",
    num: 0,
    count: 0,
    lastX: 0,
    lastY: 0,
    text: "没有滑动",

   
  },

  change: function (e) {
    var that = this
    var index = e.currentTarget.dataset.index
    var select = e.currentTarget.dataset.select

    if (select == "circle") {
      var stype = "success"
    } else {
      var stype = "circle"
    }
    var newList = that.data.slideProductList
    newList[index].select = stype
    that.setData({
      slideProductList: newList
    })
    that.countNum()
    that.count()
  },
  addtion: function (e) {
    var that = this
    var index = e.currentTarget.dataset.index
    var num = e.currentTarget.dataset.num
    //默认99件
    if (num < 99) {
      num++
    }
    var newList = that.data.slideProductList
    newList[index].num = num
    that.setData({
      goodsNum:num,
      slideProductList: newList
    })
    that.countNum()
    that.count()
  },
  inputNum:function(e){
    var num = e.detail.value;
    this.setData({
      goodsNum:num
    })
  },
  numIputBlur:function(e){
    var that = this
    var num = that.data.goodsNum
    var index = e.currentTarget.dataset.index
    var newList = that.data.slideProductList
    if (num == "") { //盘空
      newList[index].num = 1;
      that.setData({
        slideProductList: newList
      })
    }else if (num < 1) {
      that.setData({
        goodsNum: newList[index].num,
        slideProductList: newList
      })
      wx.showToast({
        title: '亲，该宝贝不能减少了哦~',
        icon: 'none'
      })
    }else if(num>99){
      
      that.setData({
        goodsNum: newList[index].num,
        slideProductList: newList
      })
      wx.showToast({
        title: '亲，该宝贝最多购买99件哦~',
        icon: 'none'
      })
    }else{
      newList[index].num = num;
      that.setData({
        slideProductList: newList
      })
    }
    that.countNum()
    that.count()
  },
  //减法
  subtraction: function (e) {
    var that = this
    var index = e.currentTarget.dataset.index
    var num = e.currentTarget.dataset.num
    var newList = that.data.slideProductList
    
    if (num == 1) {//当数量为1件时，再次点击移除该商品
      newList.splice(index, 1)
    } else {
      num--
      newList[index].num = num
    }
    that.setData({
      goodsNum: num,
      slideProductList: newList
    })
    that.countNum()
    that.count()
  },
  //全选
  allSelect: function (e) {
    var that = this
    var allSelect = e.currentTarget.dataset.select //先判断是否选中
    var newList = that.data.slideProductList
    console.log(newList)
    if (allSelect == "circle") {
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "success"
      }
      var select = "success"
    } else {
      for (var i = 0; i < newList.length; i++) {
        newList[i].select = "circle"
      }
      var select = "circle"
    }
    that.setData({
      slideProductList: newList,
      allSelect: select
    })
    that.countNum()
    that.count()
  },
 
  countNum: function () { //计算数量
    var that = this
    var newList = that.data.slideProductList
    var allNum = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].select == "success") {
        allNum += parseInt(newList[i].num)
      }
    }
    parseInt
    that.setData({
      num: allNum
    })
  },
  
  count: function () {//计算金额方法
    var that = this
    var newList = that.data.slideProductList
    var newCount = 0
    for (var i = 0; i < newList.length; i++) {
      if (newList[i].select == "success") {
        newCount += newList[i].num * newList[i].price
      }
    }
    that.setData({
      count: newCount
    })
  },

  

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var width=wx.getSystemInfoSync().windowWidth
    var height=wx.getSystemInfoSync().windowHeight
    height=height-55-53;
    this.setData({
      height:height
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})


## 写在最后

如果你觉得这篇文章写得不错或者对您有用的话请帮忙点赞加收藏，毕竟原创不易；如果您觉得文章有什么地方写得不对或者需要改进的地方，欢迎通过评论私聊博主！
风泽木
关注
  • 115
    点赞
  • 踩
  • 628
    收藏
    觉得还不错? 一键收藏
  • 50
    评论
专栏目录
微商小程序购物车功能范例代码.rar
07-10
这是一个微信小商城中的购物车实现范例，在微商程序中，都会用到购物车，在淘宝、京东、天猫，这几乎都是基础的功能了，微信小程序中的购物车同样是基于Java Cookies的，如果你之前对Java中的cookie使用很熟悉，那么本代码你会很轻松就能理解了。需要更具体的实现方法，请下载本源码打开源代码文件查看。
微信小程序实现购物车功能
01-22
本文实例为大家分享了微信小程序实现购物车功能的具体代码，供大家参考，具体内容如下 1、购物车界面功能实现 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出总价 单个商品购买数量的增加和减少 删除商品。当购物车为空时，页面会变为空购物车的布局 根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。 首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id) 然后左下角的全选，需要一个字段(selectAllStatus)
基础购物车（Javascript）
2301_81449444的博客
06-18 373
使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。
微信小程序商品列表和购物车完整代码实例
12-13
微信小程序开发，代码完整可用，用于电商微信平台开发参考，有二个界面（商品展示页和购物车页面）商品展示页选择商品加入购物车，再进入购物车页面将看到加入购物车的商品，并有商品件数和金额，和淘宝的购物车类似，有很好的参考价值。
微信小程序批量编辑(购物车也适用)
04-09
微信小程序,批量编辑数据,适用于购物车等,包含弹窗提交数据等效果,压缩包内有效果截图
小程序css实现遮罩弹出层
01-20
小程序中用css实现遮罩弹出层
微信小程序购物车实现 微信小程序购物车实现
06-04
微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现微信小程序购物车实现...
微信小程序实现购物车代码实例详解
10-16
主要介绍了微信小程序实现购物车代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
微信小程序购物车代码.zip
07-08
微信小程序购物车代码.zip是一个包含实现微信小程序购物车功能的源代码压缩包。在这个项目中，我们可以探索到微信小程序在电商应用中的核心组件和功能，包括商品选择、数量增减、总价计算、选中状态管理以及可能的...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
2401_84049282的博客
04-12 970
由于细节内容实在太多了，为了不影响文章的观赏性，只截出了一部分知识点大致的介绍一下，每个小节点里面都有更细化的内容！小编准备了一份Java进阶学习路线图（Xmind）以及来年金三银四必备的一份《Java面试必备指南》《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，真正体系化！**
微信小程序购物车页面实现
qq_62280810的博客
05-31 6084
3.需要判断商品加入购物车的逻辑：一种是已经存在购物车中，如果再加，数量加一即可；还有是不存在购物车中的。1.先在product_detail下的index.wxml的view标签下添加bindtap。2.对应在js文件夹下写点击事件handleCartAdd:商品加入购物车。4.上面代码优化：可以将上面代码封装为setCartadd。32.商品加入购物车逻辑实现（前端）
微信小程序(黑马优购:加入购物车)
jklzbc的博客
03-28 874
cart.js//购物车的数组，用来存储购物车中每个商品的信息对象//每个商品的信息对象，都包含如下6个属性cart: []}),if(!
【微信小程序】进阶篇 -- uni-app 项目--- 购物车 -- 配置 tabBar 效果（五十一）
JMFive的博客
03-27 4481
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第51篇文章;今天开始学习微信小程序的第35天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
uniapp开发精选短视频视频小程序实战笔记20240725，实现顶部轮播图和热门短剧
最新发布
Python私教
07-25 1013
本教程讲解了uniapp开发短视频小程序的入门教程，主要讲解了如何配置底部导航，如何开发顶部轮播图以及热门短视频。打赏20元即可获取本套教程的全部源码。人生苦短，我用Python，我是您身边的Python私教~
JAVA同城服务场馆门店预约系统支持H5小程序APP源码程序
2401_84414018的博客
07-24 483
只需动动手指，就能提前锁定你心仪的时间段，享受无缝对接的优质服务。打开手机，选择你想要预约的场馆，浏览可选的时间段，点击确认，就完成啦！无论是想挥洒汗水的健身房，还是放松心情的SPA中心，或是提升技能的培训机构，同城服务场馆门店预约系统都为你覆盖到了。一个平台，满足你所有的预约需求，让生活更加丰富多彩。不定期推出的专属优惠券、会员折扣，让你在享受便捷的同时，还能省下不少开销。我们的预约系统采用高级加密技术，保护你的每一份数据。🔥同城服务场馆门店预约系统：一键预约，便捷生活新体验！🎉专属优惠，尊享不停🎉。
PHP多功能投票系统源码小程序
2401_84414018的博客
07-25 328
在这个快节奏的时代，「多功能投票小程序」无疑是提升我们生活和工作效率的好助手。它让决策变得更加简单、快捷和有趣，帮助我们摆脱选择困难的烦恼。💡 快来试试吧！相信你会爱上这个便捷又实用的投票神器！
C# 二维码小程序
a876106354的博客
07-24 337
在C#中创建一个能够生成二维码的小程序，你可以使用。你可以通过NuGet包管理器来安装。首先，你需要在你的项目中安装。
基于JAVA+SpringBoot+Vue+uniApp的校园日常作品商品分享小程序
znbcj的博客
07-24 1020
基于JAVA+SpringBoot+Vue+uniApp的校园日常作品商品分享小程序是一款专为校园内的学生和教师设计的移动应用程序。该小程序旨在提供一个便捷的平台，让学生和教师能够轻松地分享自己的手工制作、设计作品或二手物品，同时也方便其他用户浏览和购买这些商品。通过这款小程序，校园内的学生们可以轻松地将自己的作品分享给其他同学，增加彼此之间的交流和合作机会；同时，教师们也可以借此平台推广自己的教学成果或者寻找合适的教学资源。此外，该小程序还有助于减少校园内的浪费现象，提高资源的利用率。
微信小程序购物车功能实现
05-25
微信小程序购物车功能实现可以分为以下几个步骤： 1. 创建购物车页面和购物车数据结构：创建一个购物车页面，用于展示用户添加的商品信息，并创建一个购物车数据结构，用于存储商品信息。 2. 实现商品添加功能：在商品详情页面中，添加“加入购物车”按钮，点击按钮后将商品信息添加到购物车数据结构中。同时，更新购物车图标上的商品数量。 3. 实现商品删除功能：在购物车页面中，对于每个商品项，添加“删除”按钮，点击按钮后将该商品从购物车数据结构中删除，并更新购物车图标上的商品数量。 4. 实现商品数量修改功能：在购物车页面中，对于每个商品项，添加增加数量和减少数量的按钮，点击按钮后更新商品数量，并更新购物车总价和总数量。 5. 实现结算功能：在购物车页面中，添加“结算”按钮，点击按钮后跳转到订单确认页面，展示用户选择的商品信息和总价，用户确认无误后提交订单。 以上是购物车功能的基本实现步骤，具体实现时根据需求进行适当调整。
评论 50
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值