少儿舞蹈小程序（16）购物车功能开发

前言

在上一篇中，我们完成了商城数据源的搭建和商品列表页面的开发。现在家长可以浏览商品并将其加入购物车，但购物车功能尚未完善。本篇将详细介绍如何利用低代码平台，通过变量、自定义方法和组件等功能，快速搭建一个功能完整的购物车系统，包括购物车图标的显示、商品添加、数量修改、清空购物车等功能。

1. 核心数据管理：定义全局状态变量

在低代码平台中，数据管理是核心。我们不需要手动编写 let cartItems = ... 这样的代码，而是通过平台提供的全局状态数据来定义和管理购物车数据。

在“全局”面板中，创建一个名为 cart 的数组变量。这个数组将用于存储购物车中的商品信息，例如商品的 id、name、price 和 quantity。

操作步骤：

1. 在左侧的全局面板中，点击+。
2. 将变量名命名为 cart。
3. 选择数据类型为 数组（Array），并设置默认值为 []（空数组）。

这样，我们就创建了一个持久化的购物车数据源，它将在整个应用中共享。

2. 购物车图标与数量显示

接下来，我们将在商城页面的右下角放置一个购物车图标，并实时显示购物车中的商品数量。

操作步骤：

在数据列表下添加一个普通容器，里边添加图标和文本组件

将图标样式改为购物车图标

设置普通容器的样式

:root {position: fixed;bottom: 80px;right: var(--spacing-lg);width: 50px;height: 50px;background: var(--primary-color);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: white;font-size: 20px;box-shadow: var(--shadow-lg);z-index: 999;
}

设置文本组件的样式

:root {position: absolute;top: -5px;right: -5px;background: var(--error-color);color: white;border-radius: 50%;width: 20px;height: 20px;font-size: var(--font-size-xs);display: flex;align-items: center;justify-content: center;
}

文本内容绑定为数组元素的大小

通过这种方式，当 cart 变量中的数据发生变化时，文本组件会自动更新，无需手动编写更新逻辑。

3. 实现“加入购物车”功能

现在，我们来处理用户点击“加入购物车”按钮时的逻辑。在低代码平台中，这通常通过创建自定义方法来实现。

操作步骤：

在左侧的代码区或自定义方法面板中，点击“新建JavaScript方法”。

将方法命名为 addToCart。

平台的模板会预置好方法框架，如 export default function({event, data}) { ... }。

在方法体内部，编写添加购物车商品的逻辑。这个逻辑将从组件事件中获取商品数据，并更新 cart 变量。

自定义方法 addToCart 的逻辑代码：
这个函数接收 product 对象作为参数，包含 id、name、price 等信息。

export default function({event, data}) {
const product = data.target; // 假设商品数据通过参数传入const cartItems = $w.app.dataset.state.cart; // 获取全局购物车变量const existingItem = cartItems.find(item => item.id === product._id);if (existingItem) {existingItem.quantity += 1;} else {cartItems.push({id: product._id,name: product.name,price: product.price,quantity: 1});}// 更新全局状态数据$w.app.dataset.state.cart = cartItems$w.utils.showToast({title:"加入成功",icon:"success",duration:1000})
}

选中“加入购物车”按钮组件。在右侧的事件面板中，为按钮的“点击”事件绑定我们刚刚创建的 addToCart 方法。在绑定时，将当前商品的数据作为参数传递给 addToCart 方法。

4. 购物车弹窗展示与交互

点击购物车图标时，弹出一个模态框来展示购物车内容。

4.1 弹窗结构搭建

添加弹窗组件

在弹窗内容里添加第一部分，显示商品数量和清空按钮

设置普通容器的布局为横向排列，两端对齐

文本内容绑定如下表达式

`共:${$w.app.dataset.state.cart.length} 件商品`

继续添加循环展示组件用来展示购买的商品

数据绑定为我们的购物车变量

循环展示组件里边我们用普通容器来搭建内容部分，让内容两端对齐

第一部分我们来显示商品的名称和单价

第二部分显示一个数量的切换效果

第三部分显示合计总价

总价需要用表达式计算得出

$w.app.dataset.state.cart.reduce((sum, item) => sum + (item.price * item.quantity), 0)

4.2 购物车功能实现

为每个交互操作创建对应的自定义方法。

修改商品数量 updateCartItem

export default function({event, data}) {const { record, type } = data.target; // 从事件数据中解构出商品记录和操作类型const cartItems = $w.app.dataset.state.cart; // 获取全局购物车变量console.log("record",record._id)const existingItemIndex = cartItems.findIndex(item => item.id === record.id);console.log("existingItemIndex",existingItemIndex)// 确保商品存在于购物车中if (existingItemIndex > -1) {let newQuantity = cartItems[existingItemIndex].quantity;if (type === 'add') {newQuantity += 1;} else if (type === 'subtract') {newQuantity -= 1;} else {// 如果操作类型未知，直接返回return;}if (newQuantity <= 0) {// 数量小于等于0时，从购物车数组中移除该商品cartItems.splice(existingItemIndex, 1);$w.utils.showToast({title: `${record.name} 已移除`,icon: 'success',duration: 1000});} else {// 更新商品数量cartItems[existingItemIndex].quantity = newQuantity;$w.utils.showToast({title: `已更新数量为 ${newQuantity}`,icon: 'success',duration: 1000});}// 更新全局状态数据$w.app.dataset.state.cart = cartItems;}
}

方法定义好之后，给图标配置事件，减号的事件调用

入参配置如下

({record:$w.item_repeater2,type:'subtract'})

加号的图标配置事件和减号是一样的，只是入参略有变化

({record:$w.item_repeater2,type:'add'})

清空购物车 clearCart

export default function({event, data}) {
$w.app.dataset.state.cart = []
}

清空购物车只需要将数组置空即可，给按钮配置点击事件调用方法

整体效果

通过以上步骤，我们无需从零开始编写HTML和CSS，而是利用低代码平台提供的变量、组件和自定义方法，像搭积木一样快速构建了整个购物车系统。

低代码方案的优势在于：

1. 所见即所得： 通过拖拽组件直接搭建界面。
2. 数据驱动： 变量的变化会自动更新绑定它的组件，无需手动管理DOM。
3. 高效开发： 将复杂逻辑封装在自定义方法中，并通过事件绑定轻松调用。

在下一篇教程中，我们将继续利用低代码平台的优势，快速搭建结算页面，敬请期待！