PHP を使用して WeChat ミニ プログラムにページング データの読み込みを実装する方法

WeChat ミニ プログラムの人気に伴い、ますます多くの開発者が参加し始めています。一般的な要件の 1 つは、ページ分割されたデータの読み込みです。

WeChat アプレットにページング データの読み込みを実装する場合、PHP をバックエンド言語として使用し、MySQL データベースを使用してデータを保存し、WeChat アプレットが提供するインターフェイスを使用してデータの取得と表示を実現できます。 。

以下では、PHP を使用して WeChat ミニ プログラムのページング データ読み込みを実装する方法を詳しく紹介します。

1. 準備作業

コードを書き始める前に、次のツールと資料を準備する必要があります:

• WeChat ミニ プログラム開発ツール、小さなプログラム プロジェクトを作成し、ページ デザインやその他の操作を実行するために使用されます。
• PHP 開発環境は、XAMPP などの統合環境を使用することも、Linux システムに構築することもできます。
• MySQL データベースを作成し、その中に対応するデータ テーブルを作成します。

2. データ テーブルの作成

MySQL データベースにデータ テーブルを作成し、ページに表示する必要があるデータを保存します。データ テーブルの構造には、表示する必要があるデータ フィールドと、ページング操作用の追加フィールドが含まれている必要があります。

たとえば、製品リストを表示したい場合、データ テーブルの構造は次のようになります。

CREATE TABLE `goods` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  `description` text NOT NULL,
  `image` varchar(255) NOT NULL,
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

上記のデータ テーブルでは、idフィールドは自動増加する主キーです。 name は製品名を格納します。 price は製品価格を格納します。 description は製品の説明を格納します。 image には商品画像のアドレスが格納され、created_at と updated_at はそれぞれデータの作成時間と更新時間を記録するために使用されます。

3. PHP コードの作成

次に、WeChat アプレットのデータ要求を処理し、ページ内のデータを返すための PHP コードを作成する必要があります。

PHP コードでは、最初にパラメーター検証を実行して、ミニ プログラムのフロントエンドによって渡されたパラメーターを取得する必要があります。一般に、アプレットは、現在のページ番号と各ページに表示されるレコードの数という 2 つのパラメータを渡す必要があります。

<?php
if (!isset($_GET['page'])) {
    die('参数错误：缺少page参数');
}
if (!isset($_GET['pagesize'])) {
    die('参数错误：缺少pagesize参数');
}

$page = max(intval($_GET['page']), 1);
$pageSize = intval($_GET['pagesize']);

上記のコードでは、intval() 関数を使用して文字列型パラメータを整数型に変換し、max() 関数を使用してページ番号が 1 未満にならないようにしてください。パラメータが欠落しているか形式が間違っている場合、プログラムはエラー メッセージを返し、実行を終了します。

次に、MySQL データベースのクエリ文を使用してデータを取得し、ページ番号と各ページに表示されるレコード数に応じてページング処理を実行する必要があります。

$offset = ($page - 1) * $pageSize;
$sql = 'SELECT * FROM goods ORDER BY created_at DESC LIMIT ' . $offset . ',' . $pageSize;
$result = $pdo->query($sql);
$goods = $result->fetchAll(PDO::FETCH_ASSOC);

上記のコードでは、LIMIT キーワードを使用して、返されるクエリ結果の数を制限します。$offset 変数は、現在のクエリ結果の開始位置を表します。ページ、$pageSize は、各ページに表示されるレコードの数を示します。

次に、クエリ結果を JSON 形式に変換し、ミニ プログラム フロントエンドに返す必要があります。

header('Content-Type: application/json');
die(json_encode([
    'errno' => 0,
    'errmsg' => '',
    'data' => [
        'list' => $goods,
        'page' => $page,
        'pagesize' => $pageSize,
        'total' => $total,
    ],
]));

上記のコードでは、json_encode() 関数を使用してデータを JSON 形式に変換し、header() を通じて応答ヘッダーの Content- を設定します。 関数。ミニ プログラム フロントエンドが返されたデータを正常に解析できることを確認するために入力します。

4. ミニ プログラム フロントエンド コード

最後に、ミニ プログラム フロントエンド コードで PHP インターフェイスを呼び出して、ページング データを取得する必要があります。一般に、wx.request() 関数を使用してネットワーク リクエストを開始し、取得したデータをページにレンダリングできます。

Page({
  data: {
    goodsList: [],
    page: 1,
    pagesize: 10,
    total: 0,
  },
  onLoad: function () {
    this.loadGoodsList();
  },
  loadGoodsList: function () {
    wx.showLoading({
      title: '加载中',
    });
    wx.request({
      url: 'http://your.site.com/api/goods.php',
      data: {
        page: this.data.page,
        pagesize: this.data.pagesize,
      },
      success: (res) => {
        wx.hideLoading();
        const list = res.data.data.list || [];
        const page = res.data.data.page || 1;
        const pagesize = res.data.data.pagesize || 10;
        const total = res.data.data.total || 0;
        this.setData({
          goodsList: [...this.data.goodsList, ...list],
          page,
          pagesize,
          total,
        });
      },
      fail: (res) => {
        wx.hideLoading();
        wx.showToast({
          title: res.errmsg || '请求失败',
          icon: 'none',
        });
      },
    });
  },
  loadMoreGoods: function () {
    if (this.data.goodsList.length >= this.data.total) {
      return;
    }
    this.setData({
      page: this.data.page + 1,
    });
    this.loadGoodsList();
  },
});

上記のコードでは、さらにデータを読み込むための loadMoreGoods() 関数を定義します。この関数では、現在のリストに表示されているレコード数と総レコード数を比較することにより、さらにデータの読み込みを続ける必要があるかどうかを判断します。

ユーザーがリストを表示すると、loadMoreGoods() 関数を呼び出して次のページのデータを取得します。新しく取得したデータと既に表示されているデータを結合した後、ページはデータが更新されました。

5. 概要

上記の手順により、PHP を使用して WeChat ミニ プログラムにページング データを読み込む機能を実装することに成功しました。上記のコードと原則の導入により、ページング読み込みの実装方法を習得できたはずです。

もちろん、これは最も基本的な使用方法にすぎませんが、実際の開発では、データ キャッシュの最適化やページ レンダリングなどの細部にも注意を払う必要があります。上記の内容があなたの WeChat アプレット開発に少しでも役立つことを願っています。

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