1. 基本思路
购物车功能的基本思路是，将用户所选的商品信息保存在本地，然后在购物车页面中将这些信息展示出来，最后计算用户所选商品的总价和总数。
实现购物车功能的主要步骤如下：
- 将用户所选的商品信息保存在本地。
- 在购物车页面中展示用户所选的商品信息。
- 计算用户所选商品的总价和总数。
- 提供用户对购物车中商品的操作，如增加、减少、删除等。
下面我们来逐步实现这些步骤。
2. 将用户所选的商品信息保存在本地
小程序中可以使用wx.setStorageSync(key, data)方法将数据保存在本地。我们可以为每个用户创建一个唯一的user_id作为key，将用户所选的商品信息作为data保存在本地。例如：
var user_id = '123456';
var cart = [
{
id: 1, name: '商品1', price: 100, quantity: 2},
{
id: 2, name: '商品2', price: 200, quantity: 1},
{
id: 3, name: '商品3', price: 300, quantity: 3}
];
wx.setStorageSync(user_id, cart);
以上代码将用户123456所选的商品信息保存在本地。
3. 在购物车页面中展示用户所选的商品信息
在购物车页面中，我们需要读取用户所选的商品信息，并将这些信息展示出来。可以通过wx.getStorageSync(key)方法读取本地存储的数据。例如：
var user_id = '123456';
var cart = wx.getStorageSync(user_id);
以上代码将从本地存储中读取用户123456所选的商品信息。
然后，我们可以使用<scroll-view>标签将商品信息展示出来。例如：
<scroll-view class="cart-list" scroll-y="true">
<view class="cart-item" wx:for="{
{cart}}">
<view class="name">{
{item.name}}</view>
<view class="price">{
{item.price}}</view>
<view class="quantity">{
{item.quantity}}</view>
</view>
</scroll-view>
以上代码使用wx:for指令循环遍历用户所选的商品信息，并将每个商品的名称、价格和数量展示出来。
4. 计算用户所选商品的总价和总数
在展示用户所选的商品信息后，我们需要计算用户所选商品的总价和总数。可以通过循环遍历用户所选的商品信息，累加商品价格和数量，得到总价和总数。例如：
var user_id = '123456';
var cart = wx.getStorageSync(user_id);
var total_price = 0, total_quantity = 0;
for (var i = 0; i < cart.length; i++) {
total_price += cart[i].price * cart[i].quantity;
total_quantity += cart[i].quantity;
}
以上代码使用循环遍历用户所选的商品信息，并累加商品价格和数量，得到总价和总数。
5. 提供用户对购物车中商品的操作
在购物车页面中，我们需要提供用户对购物车中商品的操作，如增加、减少、删除等。可以通过<button>标签来实现这些操作。例如：
<scroll-view class="cart-list" scroll-y="true">
<view class="cart-item" wx:for="{
{cart}}">
<view class="name">{
{item.name}}</view>
<view class="price">{
{item.price}}</view>
<view class="quantity">
<button class="qty-btn" bindtap="decreaseQty">-</button>
<view>{
{item.quantity}}</view>
<button class="qty-btn" bindtap="increaseQty">+</button>
</view>
<button class="delete-btn" bindtap="deleteItem">删除</button>
</view>
</scroll-view>
以上代码为每个商品添加了增加、减少和删除三个按钮。
接下来，我们需要编写decreaseQty、increaseQty和deleteItem三个方法来实现按钮的点击操作。例如：
Page({
data: {
cart: []
},
onLoad: function() {
var user_id = '123456';
this.setData({
cart: wx.getStorageSync(user_id)});
},
decreaseQty: function(e) {
var index = e.currentTarget.dataset.index;
var cart = this.data.cart;
if (cart[index].quantity > 1) {
cart[index].quantity--;
this.setData({
cart: cart});
wx.setStorageSync('123456', cart);
}
},
increaseQty: function(e) {
var index = e.currentTarget.dataset.index;
var cart = this.data.cart;
cart[index].quantity++;
this.setData({
cart: cart});
wx.setStorageSync('123456', cart);
},
deleteItem: function(e) {
var index = e.currentTarget.dataset.index;
var cart = this.data.cart;
cart.splice(index, 1);
this.setData({
cart: cart});
wx.setStorageSync('123456', cart);
}
})
以上代码使用setData方法更新页面数据，并使用wx.setStorageSync方法更新本地存储数据。
6. 注意事项
在实现购物车功能时，需要注意以下几点：
- 将用户所选的商品信息保存在本地时，需要使用唯一的
user_id作为key。 - 使用
<scroll-view>标签展示商品信息时，需要注意设置scroll-y="true"以支持垂直滚动。 - 在实现增加、减少、删除等操作时，需要注意更新页面数据和本地存储数据，保证数据的一致性。
- 在计算商品总价和总数时，需要注意循环遍历数组的方式，尽量避免使用
for...in循环，因为它会遍历对象的所有属性，而不仅仅是数组元素。 - 在展示商品价格时，需要注意格式化价格的方式，可以使用
toFixed()方法将价格保留指定位数的小数。 - 对于一些复杂的业务逻辑，可以将它们封装成独立的函数，便于维护和复用。
7. 总结
购物车功能是电商小程序中比较常见的功能之一，实现起来也比较简单。通过本文的介绍，我们可以学习到如何将用户所选的商品信息保存在本地，如何展示商品信息，如何计算商品总价和总数，以及如何提供用户对购物车中商品的操作。在实际开发中，还可以根据具体需求进行定制和优化，例如添加优惠券、满减活动等功能，提升用户购物体验。