做微信小程序点击加入购物车实现购物车有添加的商品数量的图标的代码

以下是实现微信小程序点击加入购物车并显示购物车商品数量的代码：

1. 在app.js中定义全局变量cartList，用于存放购物车商品列表

App({
  globalData: {
    cartList: []
  }
})

2. 在商品列表页面的wxml中添加加入购物车按钮，并绑定tap事件

<view class="add-cart" bindtap="addToCart">加入购物车</view>

3. 在商品列表页面的js中编写addToCart方法，将商品添加到购物车列表中，并更新购物车图标上的数量

const app = getApp()

Page({
  data: {
    goodsList: [...],
    cartCount: 0
  },

  addToCart(e) {
    const goodsId = e.currentTarget.dataset.goodsId
    const cartList = app.globalData.cartList
    const index = cartList.findIndex(item => item.id === goodsId)

    if (index !== -1) {
      cartList[index].count++
    } else {
      cartList.push({
        id: goodsId,
        count: 1
      })
    }

    const cartCount = cartList.reduce((sum, item) => sum + item.count, 0)

    this.setData({
      cartCount
    })
  }
})

4. 在app.json中配置购物车页面路径和购物车图标

{
  "pages": [
    "...",
    "pages/cart/cart"
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home_selected.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "assets/tabbar/cart.png",
        "selectedIconPath": "assets/tabbar/cart_selected.png"
      }
    ]
  }
}

5. 在购物车页面的wxml中显示购物车商品数量

<view class="cart-count">{{cartCount}}</view>

6. 在购物车页面的js中获取购物车商品列表，并计算购物车商品数量

const app = getApp()

Page({
  data: {
    cartList: [],
    cartCount: 0
  },

  onLoad() {
    const cartList = app.globalData.cartList
    const cartCount = cartList.reduce((sum, item) => sum + item.count, 0)

    this.setData({
      cartList,
      cartCount
    })
  }
})

以上就是实现微信小程序点击加入购物车并显示购物车商品数量的代码。