搭建电商平台小程序方案

{
  "usingComponents": {},
  "pages": [
    "pages/index/index",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "电商平台",
    "navigationBarTextStyle": "black"
  }
}

<!-- pages/index/index.wxml -->
<view class="container">
  <view class="product-list">
    <block wx:for="{{products}}" wx:key="id">
      <view class="product-item" bindtap="navigateToDetail" data-id="{{item.id}}">
        <image class="product-image" src="{{item.image}}"></image>
        <text class="product-name">{{item.name}}</text>
        <text class="product-price">￥{{item.price}}</text>
      </view>
    </block>
  </view>
</view>

// pages/index/index.js
Page({
  data: {
    products: [
      { id: 1, name: '商品1', price: 100, image: 'https://example.com/image1.jpg' },
      { id: 2, name: '商品2', price: 200, image: 'https://example.com/image2.jpg' }
    ]
  },
  navigateToDetail(e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    });
  }
});