微信小程序中如何实现购物车功能？

本文共计1746个文字，预计阅读时间需要7分钟。

前言：以往的购物车，基本都是通过大量的DOM操作来实现。微信小程序实际上跟vue.js的用法非常相似，接下来我们就看看小程序如何实现购物车功能。

需求：首先，澄清购物车的需求。

单

前言

以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。

需求

先来弄清楚购物车的需求。

• 单选、全选和取消，而且会随着选中的商品计算出总价

• 单个商品购买数量的增加和减少

• 删除商品。当购物车为空时，页面会变为空购物车的布局

根据设计图，我们可以先实现静态页面。接下来，再看看一个购物车需要什么样的数据。

• 首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id)

• 然后左下角的全选，需要一个字段(selectAllStatus)表示是否全选了

• 右下角的总价(totalPrice)

• 最后需要知道购物车是否为空(hasList)

知道了需要这些数据，在页面初始化的时候我们先定义好这些。