PHP를 사용하여 WeChat 미니 프로그램에서 페이징 데이터 로딩을 구현하는 방법-PHP 튜토리얼-php.cn

WeChat 미니 프로그램의 인기로 인해 점점 더 많은 개발자가 참여하기 시작했습니다. 일반적인 요구 사항 중 하나는 페이지를 매긴 데이터 로드입니다.

WeChat 애플릿에서 페이징 데이터 로딩을 구현할 때 PHP를 백엔드 언어로 사용할 수 있고, MySQL 데이터베이스를 사용하여 데이터를 저장할 수 있으며, WeChat 애플릿에서 제공하는 인터페이스를 사용하여 데이터 수집 및 표시를 달성할 수 있습니다.

다음에서는 PHP를 사용하여 WeChat 미니 프로그램용 페이징 데이터 로딩을 구현하는 방법을 자세히 소개합니다.

준비

코드 작성을 시작하기 전에 다음 도구와 자료를 준비해야 합니다.

애플릿 프로젝트를 생성하고 페이지 디자인 및 기타 작업을 수행하는 데 사용되는 WeChat 애플릿 개발 도구입니다.
PHP 개발 환경은 XAMPP와 같은 통합 환경이나 Linux 시스템을 사용하여 구축할 수 있습니다.
MySQL 데이터베이스를 만들고 그 안에 해당 데이터 테이블을 만듭니다.

데이터 테이블 만들기

페이징에 표시해야 하는 데이터를 저장하기 위해 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는 각각 데이터 생성 시간과 업데이트 시간을 기록하는 데 사용됩니다. id字段为自增长主键，name存储商品名称，price存储商品价格，description存储商品描述，image存储商品图片地址，created_at和updated_at分别用于记录数据的创建时间和更新时间。

编写PHP代码

接下来，我们需要编写PHP代码，用于处理微信小程序的数据请求，并将数据分页返回。

在PHP代码中，我们需要首先进行参数校验，获取小程序前端传递的参数。一般而言，小程序需要传递两个参数：当前页码和每页显示的记录数。

<?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-Type，确保小程序前端可以正常解析返回的数据。

小程序前端代码

最后，我们需要在小程序前端代码中调用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()