Comment utiliser PHP pour implémenter le chargement des données de pagination dans les mini-programmes WeChat

PHPz
Libérer: 2023-06-03 16:02:02
original
1296 Les gens l'ont consulté

Avec la popularité des mini-programmes WeChat, de plus en plus de développeurs commencent à s'impliquer. L'une des exigences courantes est le chargement des données paginées.

Lors de la mise en œuvre du chargement des données de pagination dans l'applet WeChat, nous pouvons utiliser PHP comme langage back-end, utiliser la base de données MySQL pour stocker les données et utiliser l'interface fournie par l'applet WeChat pour réaliser l'acquisition et l'affichage des données.

Ce qui suit présentera en détail comment utiliser PHP pour implémenter le chargement des données de pagination pour les mini-programmes WeChat.

  1. Préparation

Avant de commencer à écrire du code, nous devons préparer les outils et le matériel suivants :

  • Outil de développement d'applets WeChat, qui est utilisé pour créer des projets d'applets et effectuer la conception de pages et d'autres opérations.
  • L'environnement de développement PHP peut être construit à l'aide d'un environnement intégré tel que XAMPP ou sur un système Linux.
  • Une base de données MySQL et créez-y les tables de données correspondantes.
  1. Créer une table de données

Créez une table de données dans la base de données MySQL pour stocker les données qui doivent être affichées dans la pagination. La structure du tableau de données doit inclure les champs de données qui doivent être affichés, ainsi que certains champs supplémentaires pour les opérations de pagination.

Par exemple, si l'on souhaite afficher une liste de produits, la structure du tableau de données peut être la suivante :

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;
Copier après la connexion

Dans le tableau de données ci-dessus, le champ id est un champ primaire auto-croissant clé, et name stocke le nom du produit, price stocke le prix du produit, description stocke la description du produit, image stocke l'adresse de l'image du produit, created_at et updated_at sont utilisés pour enregistrer respectivement l'heure de création et l'heure de mise à jour des données. id字段为自增长主键,name存储商品名称,price存储商品价格,description存储商品描述,image存储商品图片地址,created_atupdated_at分别用于记录数据的创建时间和更新时间。

  1. 编写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']);
Copier après la connexion

在上述代码中,我们使用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);
Copier après la connexion

在上述代码中,我们使用LIMIT关键字限制查询结果的返回数量,其中$offset变量表示当前页的起始位置,$pageSize表示每页显示的记录数。

接下来,我们需要将查询到的结果转换为JSON格式,并返回给小程序前端。

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

在上述代码中,我们使用了json_encode()函数将数据转换为JSON格式,并通过header()函数设置响应头的Content-Type,确保小程序前端可以正常解析返回的数据。

  1. 小程序前端代码

最后,我们需要在小程序前端代码中调用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();
  },
});
Copier après la connexion

在上述代码中,我们定义了一个loadMoreGoods()函数,用于加载更多的数据。在该函数中,我们通过比较当前列表中展示的记录数和总记录数来判断是否需要继续加载更多数据。

当用户上拉列表时,我们调用loadMoreGoods()

    Écrire du code PHP
    1. Ensuite, nous devons écrire du code PHP pour gérer la demande de données de l'applet WeChat et renvoyer les données dans les pages.

    Dans le code PHP, nous devons d'abord effectuer une vérification des paramètres pour obtenir les paramètres transmis par le front-end du mini programme. De manière générale, l'applet doit transmettre deux paramètres : le numéro de la page courante et le nombre d'enregistrements affichés sur chaque page.

    rrreee

    Dans le code ci-dessus, nous utilisons la fonction intval() pour convertir le paramètre de type chaîne en un type entier, et utilisons la fonction max() pour garantir que le numéro de page ne sera pas inférieur à 1. Si les paramètres sont manquants ou dans un format incorrect, le programme renverra un message d'erreur et terminera l'exécution.

    🎜Ensuite, nous devons utiliser l'instruction de requête de la base de données MySQL pour obtenir les données et effectuer un traitement de pagination en fonction du numéro de page et du nombre d'enregistrements affichés sur chaque page. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons le mot-clé LIMIT pour limiter le nombre de résultats de requête renvoyés, où la variable $offset représente la position de départ de la page actuelle, $ pageSize indique le nombre d'enregistrements affichés sur chaque page. 🎜🎜Ensuite, nous devons convertir les résultats de la requête au format JSON et les renvoyer au front-end du mini-programme. 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction json_encode() pour convertir les données au format JSON et définissons le Content-Type de l'en-tête de réponse via header() code> fonction. Assurez-vous que le frontal du mini-programme peut analyser les données renvoyées normalement. 🎜<ol start="4">🎜Code frontal du mini programme🎜🎜🎜Enfin, nous devons appeler l'interface PHP dans le code frontal du mini programme pour obtenir les données de pagination. De manière générale, nous pouvons utiliser la fonction <code>wx.request() pour lancer une requête réseau et restituer les données obtenues dans la page. 🎜rrreee🎜Dans le code ci-dessus, nous définissons une fonction loadMoreGoods() pour charger plus de données. Dans cette fonction, nous déterminons si nous devons continuer à charger plus de données en comparant le nombre d'enregistrements affichés dans la liste actuelle avec le nombre total d'enregistrements. 🎜🎜Lorsque l'utilisateur affiche la liste, nous appelons la fonction loadMoreGoods() pour obtenir les données sur la page suivante. Après avoir épissé les données nouvellement obtenues avec les données déjà affichées, nous mettons à jour les données de la page. . 🎜🎜🎜Résumé🎜🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de chargement des données de pagination pour les mini-programmes WeChat utilisant PHP. Grâce à l'introduction du code et des principes ci-dessus, vous devriez maintenant maîtriser la méthode d'implémentation du chargement de pagination. 🎜🎜Bien sûr, ce n'est que l'utilisation la plus basique. Dans le développement réel, nous devons également prêter attention à certains détails, tels que l'optimisation de la mise en cache des données, le rendu des pages, etc. J'espère que le contenu ci-dessus pourra vous aider pour le développement de votre applet WeChat. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal