微信小程序商城开发之实现商品加入购物车的功能「代码」

1. 概述

在电商平台中，购物车是不可或缺的功能之一，实现了商品加入购物车的功能，也是商品销售的重要环节之一。

本文将以微信小程序商城为例，介绍实现商品加入购物车的功能，代码实现依赖于微信开发者工具。

2. 功能实现

2.1 获取商品信息

在实现商品加入购物车的功能之前，需要先获取商品的基本信息，包括商品名称、价格、图片等。可以通过在小程序后台或在后端服务器存储商品信息并通过接口获取。

在本文中，我们假设已经在后端服务器存储了商品信息，并通过HTTP请求获取到了商品数据。这里使用微信提供的wx.request方法进行请求，请求返回的数据格式为JSON。

wx.request({
  url: 'http://example.com/api/get_goods',
  success: function (res) {
    if (res.statusCode === 200) {
      console.log(res.data)
    }
  }
})

2.2 实现商品加入购物车

当用户点击加入购物车按钮时，需要将商品信息添加到购物车中。购物车可以通过缓存或在后端服务器实现，本文中，我们使用小程序提供的缓存功能进行实现。

首先需要获取缓存中的购物车数据，若购物车没有数据，则需要创建购物车数组。将新商品信息添加到购物车中，最后将购物车数据存储到缓存中。

// 点击加入购物车按钮
onAddCart: function(e) {
  var goodsId = e.currentTarget.dataset.goodsId
  var goodsName = e.currentTarget.dataset.goodsName
  var goodsPrice = e.currentTarget.dataset.goodsPrice
  var cartList = wx.getStorageSync('cartList') || []
  // 判断购物车中是否已经存在该商品
  var idx = cartList.findIndex(function(item) {
    return item.goods_id === goodsId
  })
  if (idx !== -1) {
    // 如果存在，则修改商品数量
    cartList[idx].quantity++
  } else {
    // 如果不存在，则添加新商品
    cartList.push({
      goods_id: goodsId,
      goods_name: goodsName,
      goods_price: goodsPrice,
      quantity: 1
    })
  }
  // 更新购物车数据到缓存中
  wx.setStorageSync('cartList', cartList)
}

2.3 显示购物车中商品数量

当用户成功将商品加入购物车后，我们需要将购物车中商品的数量显示给用户。可以通过wx.showTabBarRedDot或wx.setTabBarBadge两种方法进行实现。其中，wx.setTabBarBadge方法可以显示更加详细的购物车信息，如购物车中商品数量的具体数字。本文中，我们使用wx.showTabBarRedDot方法进行实现。

// 更新购物车商品数量
updateCartCount: function() {
  var cartList = wx.getStorageSync('cartList') || []
  var totalCount = cartList.reduce(function(sum, item) {
    return sum + item.quantity
  }, 0)
  if (totalCount > 0) {
    wx.showTabBarRedDot({
      index: 2
    })
  } else {
    wx.hideTabBarRedDot({
      index: 2
    })
  }
}

3. 总结

本文主要介绍了如何在微信小程序商城中实现商品加入购物车的功能。在实现过程中，我们通过wx.request方法获取商品数据，并使用缓存功能实现购物车功能。此外，我们还介绍了如何通过wx.showTabBarRedDot方法显示购物车中商品数量。

实现商品加入购物车的功能对于电商平台来说是非常重要的，在实际开发中需要根据具体业务场景进行适当的修改和扩展。