微信小程序分类栏开发代码

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

1. 在 `app.json` 文件中添加 `tabBar` 字段，定义分类栏的样式和图标：

"tabBar": {
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home_selected.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "images/category.png",
      "selectedIconPath": "images/category_selected.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "购物车",
      "iconPath": "images/cart.png",
      "selectedIconPath": "images/cart_selected.png"
    },
    {
      "pagePath": "pages/profile/profile",
      "text": "我的",
      "iconPath": "images/profile.png",
      "selectedIconPath": "images/profile_selected.png"
    }
  ]
}

2. 在 `pages` 目录下创建分类页面 `category` ，并在 `category.json` 文件中定义页面样式：

{
  "navigationBarTitleText": "分类",
  "usingComponents": {},
  "style": {}
}

3. 在 `category.wxml` 文件中编写页面结构代码：

<view class="category">
  <view class="category-list">
    <view class="category-item" wx:for="{{categoryList}}" wx:key="{{item.id}}">
      <image src="{{item.image}}" class="category-image"></image>
      <text class="category-name">{{item.name}}</text>
    </view>
  </view>
</view>

4. 在 `category.js` 文件中编写页面逻辑代码：

Page({
  data: {
    categoryList: [
      {
        id: 1,
        name: "水果",
        image: "/images/fruit.png"
      },
      {
        id: 2,
        name: "蔬菜",
        image: "/images/vegetable.png"
      },
      {
        id: 3,
        name: "零食",
        image: "/images/snack.png"
      }
    ]
  }
})

5. 在 `app.wxss` 文件中定义页面样式：

.category {
  background-color: #f5f5f5;
  height: 100%;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
}

.category-item {
  width: 30%;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 2rpx 2rpx 5rpx #ccc;
}

.category-image {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.category-name {
  display: block;
  padding: 10rpx;
  font-size: 28rpx;
  text-align: center;
}

通过以上步骤，我们就完成了微信小程序分类栏的开发。