微信小程序分类页面代码

以下是一个简单的微信小程序分类页面代码示例：

<!--index.wxml-->
<view class="category">
  <view class="category-header">
    <text>全部分类</text>
  </view>
  <view class="category-list">
    <navigator url="/pages/products/products?type=1">
      <view class="category-item">
        <image src="../../images/clothes.png"></image>
        <text>服饰</text>
      </view>
    </navigator>
    <navigator url="/pages/products/products?type=2">
      <view class="category-item">
        <image src="../../images/shoes.png"></image>
        <text>鞋子</text>
      </view>
    </navigator>
    <navigator url="/pages/products/products?type=3">
      <view class="category-item">
        <image src="../../images/bags.png"></image>
        <text>包包</text>
      </view>
    </navigator>
    <navigator url="/pages/products/products?type=4">
      <view class="category-item">
        <image src="../../images/accessories.png"></image>
        <text>配饰</text>
      </view>
    </navigator>
  </view>
</view>

/*index.wxss*/
.category {
  background-color: #fff;
  padding: 20rpx;
}

.category-header {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
}

.category-item {
  width: 25%;
  text-align: center;
  margin-bottom: 20rpx;
}

.category-item image {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.category-item text {
  font-size: 26rpx;
}

在上面的代码中，我们首先创建了一个分类页面 `category`，它包含一个标题 `category-header` 和一个分类列表 `category-list`。在分类列表中，我们使用 `navigator` 标签将每个分类项链接到相应的产品页面。每个分类项由一个图片和一个文本组成，并且我们使用了 `flex` 布局来让它们在同一行显示。

在 `index.js` 文件中，我们可以添加一些逻辑来处理用户点击每个分类项时的跳转操作。在这个示例中，我们假设我们有一个名为 `type` 的参数来表示用户选择的分类类型，在产品页面中我们可以根据这个参数来显示相应的产品列表。

//index.js
Page({
  navigateToProducts: function (event) {
    var type = event.currentTarget.dataset.type;
    wx.navigateTo({
      url: '/pages/products/products?type=' + type,
    })
  }
})

最后，我们需要在 `app.json` 文件中将分类页面添加到小程序的页面配置中。

{
  "pages": [
    "pages/index/index",
    "pages/products/products"
  ],
  "window": {
    "navigationBarTitleText": "微信小程序分类页面"
  }
}

注意，我们还需要在 `pages` 数组中添加产品页面的路径。这里我们假设产品页面的路径为 `pages/products/products`。