微信小程序简易商城代码

这里提供一个简单的微信小程序商城代码示例：

1. 页面结构

pages/
├── index/
│   ├── index.wxml
│   ├── index.js
│   └── index.json
├── detail/
│   ├── detail.wxml
│   ├── detail.js
│   └── detail.json
└── cart/
    ├── cart.wxml
    ├── cart.js
    └── cart.json

2. 首页代码

index.js

Page({
  data: {
    products: [
      {
        id: 1,
        name: '商品1',
        image: '/images/product1.jpg',
        price: 9.9,
      },
      {
        id: 2,
        name: '商品2',
        image: '/images/product2.jpg',
        price: 19.9,
      },
      {
        id: 3,
        name: '商品3',
        image: '/images/product3.jpg',
        price: 29.9,
      },
    ],
  },
  goToDetail(e) {
    const productId = e.currentTarget.dataset.productId;
    wx.navigateTo({
      url: `/pages/detail/detail?id=${productId}`,
    });
  },
});

index.wxml

<view class="product-list">
  <block wx:for="{{products}}">
    <view class="product-item" bindtap="goToDetail" data-product-id="{{item.id}}">
      <image class="product-image" src="{{item.image}}" />
      <view class="product-name">{{item.name}}</view>
      <view class="product-price">￥{{item.price}}</view>
    </view>
  </block>
</view>

3. 商品详情页代码

detail.js

const products = [
  {
    id: 1,
    name: '商品1',
    image: '/images/product1.jpg',
    price: 9.9,
    description: '这是商品1的描述',
  },
  {
    id: 2,
    name: '商品2',
    image: '/images/product2.jpg',
    price: 19.9,
    description: '这是商品2的描述',
  },
  {
    id: 3,
    name: '商品3',
    image: '/images/product3.jpg',
    price: 29.9,
    description: '这是商品3的描述',
  },
];

Page({
  data: {
    product: {},
  },
  onLoad(options) {
    const productId = options.id;
    const product = products.find((item) => item.id === parseInt(productId));
    this.setData({
      product,
    });
  },
  addToCart() {
    const cart = wx.getStorageSync('cart') || [];
    const product = {
      id: this.data.product.id,
      name: this.data.product.name,
      image: this.data.product.image,
      price: this.data.product.price,
      quantity: 1,
    };
    const existingProduct = cart.find((item) => item.id === product.id);
    if (existingProduct) {
      existingProduct.quantity++;
    } else {
      cart.push(product);
    }
    wx.setStorageSync('cart', cart);
    wx.showToast({
      title: '添加成功',
      icon: 'none',
    });
  },
});

detail.wxml

<view class="detail">
  <image class="product-image" src="{{product.image}}" />
  <view class="product-name">{{product.name}}</view>
  <view class="product-description">{{product.description}}</view>
  <view class="product-price">￥{{product.price}}</view>
  <button class="add-to-cart" bindtap="addToCart">加入购物车</button>
</view>

4. 购物车页面代码

cart.js

Page({
  data: {
    cart: [],
    totalPrice: 0,
  },
  onShow() {
    const cart = wx.getStorageSync('cart') || [];
    const totalPrice = cart.reduce((total, item) => total + item.price * item.quantity, 0);
    this.setData({
      cart,
      totalPrice,
    });
  },
  changeQuantity(e) {
    const productId = e.currentTarget.dataset.productId;
    const operator = e.currentTarget.dataset.operator;
    const cart = this.data.cart;
    const product = cart.find((item) => item.id === productId);
    if (operator === 'minus') {
      if (product.quantity > 1) {
        product.quantity--;
      } else {
        const index = cart.findIndex((item) => item.id === productId);
        cart.splice(index, 1);
      }
    } else if (operator === 'plus') {
      product.quantity++;
    }
    const totalPrice = cart.reduce((total, item) => total + item.price * item.quantity, 0);
    wx.setStorageSync('cart', cart);
    this.setData({
      cart,
      totalPrice,
    });
  },
});

cart.wxml

<view class="cart">
  <block wx:for="{{cart}}">
    <view class="cart-item">
      <image class="product-image" src="{{item.image}}" />
      <view class="product-name">{{item.name}}</view>
      <view class="product-price">￥{{item.price}}</view>
      <view class="product-quantity">
        <button class="quantity-operator minus" data-product-id="{{item.id}}" data-operator="minus" bindtap="changeQuantity">-</button>
        <view class="quantity">{{item.quantity}}</view>
        <button class="quantity-operator plus" data-product-id="{{item.id}}" data-operator="plus" bindtap="changeQuantity">+</button>
      </view>
    </view>
  </block>
  <view class="total-price">总价: ￥{{totalPrice}}</view>
</view>

这只是一个简单的示例代码，实际开发中还需要更多的逻辑处理和页面优化。