随着微信小程序的普及，越来越多的网店都选择把自己的店铺同时搬到微信小程序上销售。
而在微信小程序中，商品分类是十分重要的一环，它能够对用户使用小程序的体验产生很大影响。因此，本文将详细介绍如何使用PHP实现微信小程序中的商品分类功能。
一、需求分析
在微信小程序中，商品分类主要有以下几个需求：
1.展示商品分类列表
2.能够点击分类列表，切换到对应的商品列表
3.能够根据分类名称或分类ID进行查询，通过接口传递数据
二、设计思路
针对上述需求，我们需要设计如下几个接口：
接口一：获取商品分类列表
接口URL：http://www.xxx.com/api/v1/goods_category/list
请求方法：GET
返回数据格式：
{ "data":[ { "id": 10, "name": "水果" },{ "id": 20, "name": "蔬菜" } ] }
接口二：根据分类ID获取商品列表
接口URL：http://www.xxx.com/api/v1/goods/list_by_category_id
请求数据格式：
{ "cat_id":"20" }
请求方法：POST
返回数据格式：
{ "data":[ { "id": 1, "name": "青菜", "price": 3.2 }, { "id": 2, "name": "西红柿", "price": 2.8 }] }
接口三：根据分类名称获取商品列表
接口URL：http://www.xxx.com/api/v1/goods/list_by_category_name
请求数据格式：
{ "cat_name":"蔬菜" }
请求方法：POST
返回数据格式：
{ "data":[ { "id": 1, "name": "青菜", "price": 3.2 }, { "id": 2, "name": "西红柿", "price": 2.8 }] }
三、PHP代码实现
- 获取商品分类列表接口
<?php /* 获取商品分类列表接口 */ public function list() { $categoryList = CategoryModel::all([], 'img'); return json($categoryList); }
- 根据分类ID获取商品列表接口
<?php /* 根据分类ID获取商品列表接口 */ public function listByCategoryId() { $cat_id = input('post.cat_id/d'); //分类ID $goodsList = GoodsModel::all(['cat_id' => $cat_id], 'img'); return json($goodsList); }
- 根据分类名称获取商品列表接口
<?php /* 根据分类名称获取商品列表接口 */ public function listByCategoryName() { $post_data = input('post.'); //分类名称 $category = CategoryModel::get(['name' => $post_data['cat_name']]); $goodsList = GoodsModel::all(['cat_id' => $category['id']], 'img'); return json($goodsList); }
四、小程序代码实现
- 展示商品分类列表
在index.wxml中添加如下代码：
<view class="category-list"> <view wx:for="{{categoryList}}" wx:key="index" class="category-list-item" bindtap="SwitchCategory" data-catid="{{item.id}}"> {{item.name}} </view> </view>
在index.js中添加如下代码：
switchCategory: function(e){ var id = e.currentTarget.dataset.catid this.setData({ curIndex: id }) this.getGoodsList() },
- 获取商品列表
在index.js中添加如下代码：
getGoodsList(){ var that = this wx.request({ url: app.globalData.host + '/api/v1/goods/list_by_category_id', method:'POST', data: { cat_id: that.data.curIndex }, success:function(res){ if(res.data.data.length > 0){ that.setData({ goodsList: res.data.data, }) } else{ wx.showToast({ title: '暂无数据', icon:'none' }) that.setData({ goodsList: [], }) } } }) }
在goods.wxml中添加如下代码：
<view wx:for="{{goodsList}}" wx:key="index"> {{item.name}} {{item.price}} </view>
五、总结
到此为止，我们已经实现了微信小程序中的商品分类功能。当然，上述代码只是一个示例，实际生产中还需要加上各种异常处理和安全防护。
不过相信很多小程序初学者可以通过此文章的帮助，轻松的实现商品分类功能。同时也提醒大家，及时关注微信小程序官方文档，并跟随微信小程序的升级进行适配。
