PHP を使用して WeChat ミニ プログラムに製品分類を実装する方法

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": "果物" },{ "id": 20, "name": "野菜" } ] }

インターフェース 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": "トマト" , "price": 2.8 }] }

インターフェース 3: カテゴリ名に基づいて製品リストを取得します

インターフェースURL: http://www.xxx.com/api/v1/goods/list_by_category_name

リクエストデータ形式:

{ "cat_name":"vegetable" }

リクエストメソッド：POST

返却データ形式：

{ "data":[ { "id": 1, "name": "緑の野菜", "price": 3.2 }, { "id": 2、"name": "トマト"、"price": 2.8 } ] }

3. PHP コードの実装

商品分類リスト インターフェイスの取得

* 商品の取得 カテゴリリストインターフェイス*/ public function list() { $categoryList = CategoryModel::all([], 'img'); return json($categoryList); }

カテゴリIDに基づいて製品リストを取得します。 Interface

* 製品リストを取得します。カテゴリ ID に基づくインターフェース*/ public function listByCategoryId() { $cat_id = input('post.cat_id/d') ; // カテゴリ ID $goodsList = GoodsModel::all(['cat_id' => $cat_id], 'img'); return json($goodsList); }

カテゴリ名に基づいて取得商品リストインターフェイス

* カテゴリ名に基づいて商品リストインターフェイスを取得*/ 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に追加します。

{{item.name}}

次のコードをindex.jsに追加します:

switchCategory: function(e) { var id = e.currentTarget.dataset.catid this.setData({ curIndex: id }) this.getGoodsList() },

##商品リストを取得

2. ##次のコードを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 }、success:function(res){ if(res.data.data.length > 0){ that.setData({ GoodsList: res.data.data, }) } else{ wx.showToast({ title: 'No data', icon:'none' }) that.setData({ GoodsList: [], }) } } }) }

次のコードを追加しますGoods.wxml:

{{item.name}} {{item.price}}

5. 概要

これまでに、WeChat アプレットの商品分類機能を実装しました。もちろん、上記のコードは単なる例であり、実際の運用ではさまざまな例外処理やセキュリティ保護を追加する必要があります。

しかし、小規模プログラムの初心者の多くは、この記事を参考にして簡単に商品分類機能を実装できると思います。同時に、WeChat ミニ プログラムの公式文書にタイムリーに注意し、WeChat ミニ プログラムのアップグレードに応じて適応するよう皆様に注意を促します。

以上がPHP を使用して WeChat ミニ プログラムに製品分類を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。