微信小程序商城首页静态页面案例

以下是一个微信小程序商城首页的静态页面案例：

<view class="container">
  <view class="header">
    <text class="title">MyShop</text>
    <button class="cart-button">
      <image src="/images/cart.png" class="cart-icon"></image>
      <text class="cart-count">3</text>
    </button>
  </view>
  <view class="banner">
    <image src="/images/banner.png" class="banner-image"></image>
  </view>
  <view class="category">
    <view class="category-item">
      <image src="/images/category-1.png" class="category-icon"></image>
      <text class="category-name">服饰</text>
    </view>
    <view class="category-item">
      <image src="/images/category-2.png" class="category-icon"></image>
      <text class="category-name">美妆</text>
    </view>
    <view class="category-item">
      <image src="/images/category-3.png" class="category-icon"></image>
      <text class="category-name">数码</text>
    </view>
    <view class="category-item">
      <image src="/images/category-4.png" class="category-icon"></image>
      <text class="category-name">家居</text>
    </view>
  </view>
  <view class="product-list">
    <view class="product-item">
      <image src="/images/product-1.png" class="product-image"></image>
      <text class="product-name">时尚连衣裙</text>
      <text class="product-price">299</text>
    </view>
    <view class="product-item">
      <image src="/images/product-2.png" class="product-image"></image>
      <text class="product-name">美白面膜</text>
      <text class="product-price">69</text>
    </view>
    <view class="product-item">
      <image src="/images/product-3.png" class="product-image"></image>
      <text class="product-name">智能手表</text>
      <text class="product-price">599</text>
    </view>
  </view>
</view>

解释说明：

- 页面整体包含一个容器（`.container`），里面包含了商城的各个模块。
- 头部（`.header`）包含商城名称（`.title`）和购物车按钮（`.cart-button`）。购物车按钮里面有购物车图标（`.cart-icon`）和购物车商品数量（`.cart-count`）。
- 轮播图（`.banner`）用来展示促销信息或新品推荐等内容。
- 商品分类（`.category`）用来展示商城的各个分类，每个分类包含一个图标（`.category-icon`）和名称（`.category-name`）。
- 商品列表（`.product-list`）用来展示商城的商品，每个商品包含一张图片（`.product-image`）、商品名称（`.product-name`）和价格（`.product-price`）。

这是一个简单的静态页面，可以根据实际需要进行扩展和修改。