微信小程序 商城 代码 微信小程序商城代码解释怎么写

微信小程序商城是一种基于微信平台的轻量级应用，用户无需下载安装即可使用，它具有开发成本低、用户获取容易、易于传播等特点，下面是一个简单的微信小程序商城的代码示例，包括商品列表、商品详情、购物车和订单提交等基本功能。

1. 项目结构

miniprogram/
├── pages/
│   ├── index/
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   ├── index.js
│   │   └── index.json
│   ├── detail/
│   │   ├── detail.wxml
│   │   ├── detail.wxss
│   │   ├── detail.js
│   │   └── detail.json
│   ├── cart/
│   │   ├── cart.wxml
│   │   ├── cart.wxss
│   │   ├── cart.js
│   │   └── cart.json
│   └── order/
│       ├── order.wxml
│       ├── order.wxss
│       ├── order.js
│       └── order.json
├── app.wxss
├── app.json
└── app.js

2. app.json

{
  "pages": [
    "pages/index/index",
    "pages/detail/detail",
    "pages/cart/cart",
    "pages/order/order"
  ],
  "window": {
    "navigationBarTitleText": "商城"
  }
}

3. app.wxss

/* 全局样式 */
page {
  background-color: #f8f8f8;
}
.container {
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  color: #333;
  text-align: center;
  margin-top: 20rpx;
}
.button {
  background-color: #1aad19;
  color: #fff;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
}

4. pages/index/index.js

Page({
  data: {
    products: []
  },
  onLoad: function() {
    this.getProducts();
  },
  getProducts: function() {
    const that = this;
    wx.request({
      url: 'https://your-api.com/products',
      success(res) {
        that.setData({
          products: res.data
        });
      }
    });
  },
  goToDetail: function(e) {
    wx.navigateTo({
      url: /pages/detail/detail?id=${e.currentTarget.dataset.id}
    });
  }
});

5. pages/index/index.wxml

<view class="container">
  <view class="title">商品列表</view>
  <view class="product-list">
    <block wx:for="{{products}}" wx:key="id">
      <view class="product-item" bindtap="goToDetail" data-id="{{item.id}}">
        <image class="product-image" src="{{item.image}}" />
        <view class="product-info">
          <view class="product-name">{{item.name}}</view>
          <view class="product-price">￥{{item.price}}</view>
        </view>
      </view>
    </block>
  </view>
</view>

6. pages/detail/detail.js

Page({
  data: {
    product: {}
  },
  onLoad: function(options) {
    this.getProduct(options.id);
  },
  getProduct: function(id) {
    const that = this;
    wx.request({
      url: https://your-api.com/products/${id},
      success(res) {
        that.setData({
          product: res.data
        });
      }
    });
  },
  addToCart: function() {
    wx.showToast({
      title: '加入购物车成功',
      icon: 'success'
    });
  }
});

7. pages/detail/detail.wxml

<view class="container">
  <view class="product-image" style="background-image: url('{{product.image}}');"></view>
  <view class="product-info">
    <view class="product-name">{{product.name}}</view>
    <view class="product-price">￥{{product.price}}</view>
    <button class="button" bindtap="addToCart">加入购物车</button>
  </view>
</view>

8. pages/cart/cart.js

Page({
  data: {
    cartItems: []
  },
  onLoad: function() {
    this.getCartItems();
  },
  getCartItems: function() {
    const cartItems = wx.getStorageSync('cartItems') || [];
    this.setData({
      cartItems
    });
  },
  goToOrder: function() {
    wx.navigateTo({
      url: '/pages/order/order'
    });
  }
});

9. pages/cart/cart.wxml

<view class="container">
  <view class="title">购物车</view>
  <view class="cart-list">
    <block wx:for="{{cartItems}}" wx:key="id">
      <view class="cart-item">
        <image class="product-image" src="{{item.image}}" />
        <view class="product-info">
          <view class="product-name">{{item.name}}</view>
          <view class="product-price">￥{{item.price}}</view>
        </view>
      </view>
    </block>
  </view>
  <button class="button" bindtap="goToOrder">去结算</button>
</view>

10. pages/order/order.js

Page({
  data: {
    orderItems: []
  },
  onLoad: function() {
    const cartItems = wx.getStorageSync('cartItems') || [];
    this.setData({
      orderItems: cartItems
    });
  },
  placeOrder: function() {
    wx.request({
      url: 'https://your-api.com/orders',
      method: 'POST',
      data: { items: this.data.orderItems },
      success(res) {
        wx.showToast({
          title: '下单成功',
          icon: 'success'
        });
        wx.removeStorageSync('cartItems');
        wx.reLaunch({
          url: '/pages/index/index'
        });
      }
    });
  }
});

11. pages/order/order.wxml

<view class="container">
  <view class="title">订单确认</view>
  <view class="order-list">
    <block wx:for="{{orderItems}}" wx:key="id">
      <view class="order-item">
        <image class="product-image" src="{{item.image}}" />
        <view class="product-info">
          <view class="product-name">{{item.name}}</view>
          <view class="product-price">￥{{item.price}}</view>
        </view>
      </view>
    </block>
  </view>
  <button class="button" bindtap="placeOrder">提交订单</button>
</view>