WeChat 미니 프로그램의 인기에 따라 판매를 위해 매장을 WeChat 미니 프로그램으로 옮기는 온라인 상점이 점점 더 많아지고 있습니다.
WeChat 미니 프로그램에서 제품 분류는 매우 중요한 부분으로, 이는 사용자의 미니 프로그램 사용 경험에 큰 영향을 미칠 수 있습니다. 따라서 이 기사에서는 PHP를 사용하여 WeChat 미니 프로그램에서 상품 분류 기능을 구현하는 방법을 자세히 소개합니다.
1. 수요 분석
WeChat 미니 프로그램에서 상품 분류는 주로 다음과 같은 요구 사항을 갖습니다.
1. 상품 분류 목록 표시
2. 카테고리 목록을 클릭하면 해당 상품 목록으로 전환됩니다.
3. 카테고리 이름 또는 카테고리 ID를 기반으로 쿼리하고 인터페이스를 통해 데이터를 전송하는 기능 2. 디자인 아이디어 위 요구 사항에 대응하여 다음 인터페이스를 디자인해야 합니다. 인터페이스 1: 가져오기 제품 카테고리 목록 인터페이스 URL: http: //www.xxx.com/api/v1/goods_category/list요청 방법: GET반환 데이터 형식:{ "data":[ { "id": 10, "name": "Fruit" } ,{ "id": 20, "name": "vegetables" } ] }인터페이스 2: 카테고리 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": "tomato", "price": 2.8 }] }인터페이스 3: 카테고리 이름에 따라 제품 목록 가져오기인터페이스 URL: http://www.xxx.com/api/v1/goods/list_by_category_name요청 데이터 형식: { "cat_name":"vegetables" } 요청 방법: POST반환 데이터 형식: { "data ":[ { "id": 1, "name": "녹색 야채", "price": 3.2 }, { "id": 2, "name": "tomatoes", "price": 2.8 }] } 3. 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를 사용하여 WeChat 미니 프로그램에서 제품 분류를 구현하는 방법의 상세 내용입니다. 자세한 내용은 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) }4. 미니 프로그램 코드 구현
제품 카테고리 목록
index.wxml에 다음 코드를 추가하세요.제품 가져오기 list
index.js에 다음 코드를 추가하세요.getGoodsList(){ var that = this wx.request({ url: app.globalData.host + '/api/v1/goods/list_by_category_id', method:' POST', 데이터: { cat_id: that.data.curIndex }, 성공:function(res){ if(res.data.data.length > 0){ that.setData({ productsList: res.data.data, } ) } else{ wx.showToast({ title: 'No data', icon:'none' }) that.setData({ goodList : [], }) } } }) }goods.wxml에 다음 코드를 추가하세요. :