小程序电商卡片制作全指南

制作一个精美的“小程序电商卡片”（通常指商品展示卡片），主要涉及 WXML（结构）、WXSS（样式） 和 JS（逻辑/数据） 三部分。

下面我将为你提供一个完整、可直接复用的电商卡片示例,包含：

• 商品图片支持截断）
• 价格（突出显示）
• 原价（划线处理）
• 标签（如“新品”、“热销”）
• 点击交互

✅ 一、最终效果预览

┌──────────────────────────────┐
│  [商品图片]       [标签: 新品] │
│                              │文字标题文字标题文字 │文字标题文字...       │
│                              │
│  ¥99.00    ~~¥129.00~~       │
│                              │
└──────────────────────────────┘

✅ 二、代码实现

WXML（结构）

<view class="product-card" bindtap="onCardTap">
  <!-- 图片区域 -->
  <view class="card-image-wrapper">
    <image 
      class="card-image" 
      src="{{item.image}}" 
      mode="aspectFill" 
      lazy-load
    />
    <!-- 标签 -->
    <view class="card-tag" wx:if="{{item.tag}}">{{item.tag}}</view>
  </view>
  <!-- 内容区域 -->
  <view class="card-content">
    <!-- 标题 -->
    <view class="card-title">{{item.title}}</view>
    <!-- 价格区域 -->
    <view class="card-price-row">
      <text class="card-price">¥{{item.price}}</text>
      <text class="card-original-price" wx:if="{{item.originalPrice}}">¥{{item.originalPrice}}</text>
    </view>
    <!-- 销量/描述（可选） -->
    <view class="card-extra" wx:if="{{item.sales}}">
      <text>已售 {{item.sales}}+</text>
    </view>
  </view>
</view>

WXSS（样式）

/* 卡片容器 */
.product-card {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  margin: 20rpx;
  transition: transform 0.2s;
}
.product-card:active {
  transform: scale(0.98); /* 点击缩放效果 */
}
/* 图片区域 */
.card-image-wrapper {
  position: relative;
  width: 100%;
  height: 300rpx;
}
.card-image {
  width: 100%;
  height: 100%;
}
/* 标签 */
.card-tag {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  z-index: 1;
}
区域 */
.card-content {
  padding: 16rpx;
}
*/
.card-title {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 最多显示2行 */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8rpx;
}
/* 价格行 */
.card-price-row {
  display: flex;
  align-items: baseline;
  margin-top: 8rpx;
}
.card-price {
  font-size: 36rpx;
  color: #ff4d4f;
  font-weight: bold;
}
.card-price::before {
  content: '¥';
  font-size: 24rpx;
  margin-right: 2rpx;
}
.card-original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 12rpx;
}
/* 额外信息 */
.card-extra {
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #999;
}

JS（数据与逻辑）

Page({
  data: {
    // 模拟商品数据
    item: {
      image: 'https://via.placeholder.com/300x300?text=Product', // 替换为真实图片URL
      title: '2024新款夏季纯棉短袖T恤男宽松潮流百搭半袖上衣',
      price: '99.00',
      originalPrice: '129.00',
      tag: '新品',
      sales: '500'
    }
  },
  // 点击卡片事件
  onCardTap() {
    const { item } = this.data;
    console.log('点击了商品:', item.title);
    // 跳转到商品详情页
    wx.navigateTo({
      url: `/pages/product/detail?id=${item.id || '123'}` // 替换为你的实际页面路径
    });
  }
});

✅ 三、关键设计要点解析

✅ 四、进阶优化建议

1. 多商品列表布局
   如果你要做“两列商品网格”，可以将 .product-card 放在 wx:for 循环中，并用 flex-wrap: wrap 实现两列布局：

   .product-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
   }
   .product-card {
     width: 48%; /* 两列，留4%间距 */
     margin-bottom: 20rpx;
   }

2. 懒加载优化
   使用 lazy-load 属性,提升长列表滚动性能。

3. 骨架屏（Skeleton）
   数据加载前显示灰色占位块,提升用户体验。

4. 动态标签
   可根据 item.tag 值动态设置不同颜色（如“新品”红色，“促销”橙色）。

5. 无障碍访问
   为 <image> 添加 alt 属性（虽然小程序不支持标准 alt，但可加 aria-label 或注释）。

✅ 五、完整使用步骤

1. 在小程序项目中创建页面（如 pages/product/product）。
2. 将上述 WXML、WXSS、JS 代码分别放入对应文件。
3. 替换 item.image 为真实商品图片 URL。
4. 调整颜色、字体大小以匹配你的品牌风格。
5. 在 app.json 或页面 JSON 中配置导航栏。

如需三列布局、横向滑动卡片、或带加入购物车按钮的版本,我可以继续为你扩展！