微信小程序开发实战：实现商品加入购物车功能

目录

微信小程序开发实战：实现商品加入购物车功能

一、验证 Vuex 配置是否成功

二、封装添加商品到购物车的方法

三、在商品详情页调用添加方法实现功能

---

在微信小程序开发过程中，实现商品加入购物车功能是一个非常常见且重要的需求。今天这篇博客，就来详细分享如何一步步完成这一功能，从验证 Vuex 配置，到封装添加商品方法，再到在商品详情页调用实现添加，还会附上完整代码示例，帮助大家更好地理解和实践。

一、验证 Vuex 配置是否成功

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，在小程序开发中使用 Vuex 可以方便地管理共享数据。在开始实现加入购物车功能前，需要先确保 Vuex 配置正确无误。

1. 实现思路：在商品详情页通过mapState辅助函数，将 Vuex 中购物车模块里的数组映射到当前页面作为计算属性，然后在页面渲染该数组的长度。如果能成功渲染，就证明 Vuex 配置成功。
2. 具体步骤
   • 打开subpackage目录下的商品详情页，找到<script>节点。
   • 在<script>头部使用import按需导入mapState：

import { mapState } from 'vuex';

• 在计算属性computed中调用mapState方法，指定要访问的模块名称（假设购物车模块名为m_cart）和要映射的成员（假设购物车数组名为cart）：

computed: {
  ...mapState('m_cart', ['cart'])
}

• 在页面合适位置（比如运费区后面）渲染cart.length，例如在wxml文件中可以这样写：

<view>快递免运费 -- {
  
  {cart.length}}</view>

• 保存代码后，在微信开发者工具中查看，如果能看到正确打印出数组长度（初始可能为 0），则证明 Vuex 配置成功。最后记得删除这些测试代码。

二、封装添加商品到购物车的方法

在 Vuex 的mutations中封装一个方法，用于将商品信息对象存储到购物车数组中，同时处理商品已存在时数量更新的逻辑。

1. 实现思路：在store目录下的cart.js模块中，定义一个addTocart方法。该方法接收state（包含购物车数据）和要添加的商品信息对象两个参数。通过find方法查找购物车数组中是否已存在该商品，若不存在则直接添加，若存在则更新商品数量。
2. 具体代码：在cart.js模块中找到mutations节点，添加如下代码：

mutations: {
  addTocart(state, goods) {
    const findResult = state.cart.find(x => x.goodsId === goods.goodsId);
    if (!findResult) {
      state.cart.push(goods);
    } else {
      findResult.goodsCount++;
    }
  }
}

三、在商品详情页调用添加方法实现功能

完成addTocart方法的封装后，接下来要在商品详情页调用该方法，实现点击加入购物车按钮将商品信息对象存储到购物车数组的功能。

1. 实现思路：在商品详情页通过mapMutations辅助函数将addTocart方法映射到当前页面，为商品导航组件绑定点击事件，在事件处理函数中判断用户点击的是否是加入购物车按钮。如果是，组织商品信息对象并调用addTocart方法。
2. 具体步骤和代码
   • 在商品详情页的<script>头部按需导入mapMutations：

import { mapMutations } from 'vuex';

• 在methods中调用mapMutations方法，指定模块名称和要映射的方法名：

methods: {
  ...mapMutations('m_cart', ['addTocart'])
}

• 为商品导航组件绑定buttonclick事件，在methods中定义事件处理函数buttonclick：

<view bind:buttonclick="buttonclick">商品导航组件</view>

methods: {
  buttonclick(e) {
    if (e.content.text === '加入购物车') {
      const goods = {
        goodsId: this.goodsInfo.goodsId,
        goodsName: this.goodsInfo.goodsName,
        goodsPrice: this.goodsInfo.goodsPrice,
        goodsCount: 1,
        goodsSmallLogo: this.goodsInfo.goodsSmallLogo,
        isChecked: true
      };
      this.addTocart(goods);
    }
  }
}

• 为了验证商品是否成功加入购物车，可以在addTocart方法内部添加console.log打印，例如：

mutations: {
  addTocart(state, goods) {
    const findResult = state.cart.find(x => x.goodsId === goods.goodsId);
    console.log(findResult);
    if (!findResult) {
      state.cart.push(goods);
    } else {
      findResult.goodsCount++;
    }
    console.log(state.cart);
  }
}

• 在微信开发者工具中进行测试，点击加入购物车按钮后，查看控制台打印信息，确认商品是否正确加入购物车以及数量是否正确更新。测试完成后删除这些用于测试的console.log代码。

通过以上步骤，我们就成功实现了微信小程序中商品加入购物车的功能。希望这篇博客能对大家在小程序开发过程中有所帮助，让大家更熟练地掌握 Vuex 的使用以及功能开发技巧。如果在实践过程中有任何问题，欢迎在评论区留言交流。