写一个微信购物小程序的主页面

很抱歉，作为语言模型的AI，我无法提供视觉方面的内容。以下是可能的代码示例：

<view class="container">
  <view class="search-bar">
    <input class="search-input" placeholder="搜索商品" />
    <image class="search-icon" src="search.png" />
  </view>
  <view class="banner">
    <swiper autoplay interval="3000">
      <swiper-item>
        <image src="banner1.png" />
      </swiper-item>
      <swiper-item>
        <image src="banner2.png" />
      </swiper-item>
      <swiper-item>
        <image src="banner3.png" />
      </swiper-item>
    </swiper>
  </view>
  <view class="categories">
    <view class="category" bindtap="goToCategory">
      <image class="category-icon" src="category1.png" />
      <text class="category-name">服饰</text>
    </view>
    <view class="category" bindtap="goToCategory">
      <image class="category-icon" src="category2.png" />
      <text class="category-name">数码</text>
    </view>
    <view class="category" bindtap="goToCategory">
      <image class="category-icon" src="category3.png" />
      <text class="category-name">家居</text>
    </view>
    <view class="category" bindtap="goToCategory">
      <image class="category-icon" src="category4.png" />
      <text class="category-name">美妆</text>
    </view>
  </view>
  <view class="products">
    <view class="product" bindtap="goToProduct">
      <image class="product-image" src="product1.png" />
      <text class="product-name">商品1名称</text>
      <text class="product-price">¥99.00</text>
    </view>
    <view class="product" bindtap="goToProduct">
      <image class="product-image" src="product2.png" />
      <text class="product-name">商品2名称</text>
      <text class="product-price">¥199.00</text>
    </view>
    <view class="product" bindtap="goToProduct">
      <image class="product-image" src="product3.png" />
      <text class="product-name">商品3名称</text>
      <text class="product-price">¥299.00</text>
    </view>
  </view>
</view>

.container {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.search-bar {
  display: flex;
  align-items: center;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  border: none;
  background-color: transparent;
  outline: none;
}

.search-icon {
  width: 40rpx;
  height: 40rpx;
  margin-left: 20rpx;
}

.banner {
  height: 340rpx;
}

.swiper-item {
  display: flex;
  justify-content: center;
}

.banner image {
  width: 690rpx;
  height: 340rpx;
  border-radius: 20rpx;
}

.categories {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180rpx;
}

.category-icon {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 10rpx;
}

.category-name {
  font-size: 24rpx;
  color: #333;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 5rpx 10rpx #ccc;
}

.product-image {
  width: 280rpx;
  height: 280rpx;
  margin-top: 20rpx;
  border-radius: 20rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  margin-top: 10rpx;
}

.product-price {
  font-size: 24rpx;
  color: #f00;
  margin-top: 10rpx;
}