Méthode d'implémentation de l'effet carrousel développée en PHP dans le mini programme WeChat

Ces dernières années, les mini-programmes WeChat sont devenus une méthode importante dans le développement d'applications mobiles. Pour les développeurs, les mini-programmes WeChat fournissent de nombreux outils et composants fonctionnels pratiques et rapides afin qu'ils puissent facilement développer des mini-programmes répondant à divers besoins.

Dans les mini-programmes WeChat, l'effet carrousel est largement utilisé dans l'affichage publicitaire, le carrousel d'images et de texte et d'autres fonctions. Il existe de nombreuses façons d’obtenir l’effet carrousel, l’une d’elles consiste à utiliser PHP pour le développement.

Cet article expliquera comment utiliser PHP pour développer l'effet carrousel dans l'applet WeChat et donnera des méthodes d'implémentation détaillées.

1. Introduction aux solutions techniques

Pour obtenir l'effet carrousel dans les mini-programmes WeChat, les solutions techniques suivantes sont requises :

• Swiper : Il s'agit d'une bibliothèque de composants coulissants mobiles très pratique écrite en JavaScript et largement utilisée. aux applets WeChat, aux pages H5, etc.
• PHP : PHP est un langage de programmation côté serveur open source très populaire, souvent utilisé pour implémenter des sites Web dynamiques, des applications Web et traiter les entrées des utilisateurs.
• MySQL : Il s'agit d'un système de gestion de bases de données relationnelles gratuit et open source qui est largement utilisé pour le développement back-end d'applications Web.

2. Créer un effet carrousel

Tout d'abord, nous devons utiliser Swiper pour créer un effet carrousel. Nous pouvons trouver de nombreux modèles d'effets différents sur le site officiel de Swiper, y compris l'effet carrousel.

Cependant, ici, nous devons apporter quelques modifications au modèle à appliquer à l'applet WeChat que nous avons créée. Plus précisément, nous devons mettre tout le code JavaScript du modèle dans un fichier .js, mettre tout le code CSS dans un fichier .wxss, puis les référencer aux fichiers correspondants de l'applet WeChat.

Ici, nous prenons comme exemple l'exemple de code officiel de l'effet carrousel Swiper :

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
  </div>
  <!-- 添加 分页器 -->
  <div class="swiper-pagination"></div>
</div>

Ici, il nous suffit de le copier dans le fichier .wxml de l'applet WeChat et de remplacer tous les noms de classe par ceux pris en charge par l'applet WeChat. Juste le nom de classe.

3. Stockage de base de données

Afin de rendre l'effet carrousel plus applicable, nous devons obtenir des informations d'image pertinentes à partir de la base de données et les lier à l'image affichée par Swiper.

Nous devons donc créer une table d'image dans la base de données MySQL, qui contient les champs suivants :

• id : l'index unique de l'image
• url : l'adresse du lien externe de l'image ; l'adresse du lien miniature de l'image ;
• titre : informations sur le titre de l'image.
• Nous pouvons utiliser l'instruction SQL suivante pour créer une table d'images dans la base de données MySQL :

CREATE TABLE `photos` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `url` varchar(255) DEFAULT NULL,
  `thumb_url` varchar(255) DEFAULT NULL,
  `title` varchar(128) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4;

Ensuite, il nous suffit d'écrire un script PHP pour obtenir les informations sur l'image de la base de données, puis de les renvoyer au mini WeChat version en tant que programme de données au format JSON.

Voici l'exemple de code que nous avons écrit en PHP :

<?php
$conn=mysqli_connect("localhost","username","password","database");
if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
}
$sql="SELECT * FROM `photos` LIMIT 9";
$result=mysqli_query($conn, $sql);
$photos = array();
while($row=mysqli_fetch_assoc($result)) {
    $photo['url'] = $row['url'];
    $photo['thumb_url']=$row['thumb_url'];
    $photo['title']=$row['title'];
    $photos[] = $photo;
}
mysqli_close($conn);
echo json_encode($photos);
?>

L'applet appelle l'API

4. Nous avons écrit un simple script PHP côté serveur pour obtenir les informations sur l'image de la base de données MySQL et l'utiliser comme les données au format JSON sont renvoyées à l'applet WeChat.

Côté mini programme, il suffit d'utiliser l'API wx.request() fournie par le mini programme WeChat pour appeler le script PHP que nous venons d'écrire. Voici comment l'implémenter :

Page({
  data: {
    photos: []
  },
  onLoad: function(options) {
    var that = this;
    wx.request({
      url: 'http://yourdomain.com/yourapi.php',
      success: function(res) {
        console.log(res.data);
        that.setData({
          photos: res.data
        });
      }
    })
  }
})

Notez que vous devez remplacer l'URL ci-dessus par l'URL du script PHP que vous venez de modifier sur le serveur.

Lier les données avec Swiper

5. Enfin, il nous suffit de lier les informations d'image obtenues du serveur au composant Swiper. Plus précisément, nous devons modifier le fichier modèle (.wxml) et le fichier de style (.wxss) de Swiper, puis les référencer dans l'applet WeChat.

Voici notre modèle Swiper modifié :

<div class="swiper-container">
  <div class="swiper-wrapper">
    <block wx:for="{{photos}}">
      <div class="swiper-slide">
        <image src="{{item.thumb_url}}" mode="widthFix" />
        <div class="title">{{item.title}}</div>
      </div>
    </block>
  </div>
  <!-- 添加 分页器 -->
  <div class="swiper-pagination"></div>
</div>

Notez que nous utilisons une boucle wx:for dans Swiper pour parcourir les informations d'image obtenues à partir du serveur et les afficher.

Voici notre fichier de style Swiper modifié :

.swiper-container {
  height: 200rpx;
}

.swiper-slide {
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.swiper-slide .title {
  font-size: 16rpx;
  margin-top: 10rpx;
}

Après avoir copié ces codes dans les fichiers correspondants dans le mini programme WeChat, nous pouvons voir l'effet carrousel complet dans le mini programme !

Résumé

6. À travers l'introduction de cet article, nous avons expliqué en détail comment utiliser PHP pour implémenter l'effet carrousel dans les mini-programmes WeChat. Nous utilisons des composants Swiper, des scripts PHP, une base de données MySQL et d'autres technologies pour offrir commodité et support au développement de petits programmes.

Bien entendu, cet article ne fournit qu'une méthode de mise en œuvre et ne peut pas couvrir toutes les situations. Par conséquent, si vous rencontrez différents problèmes ou besoins lors du développement des mini-programmes WeChat, veuillez vous référer aux documents officiels des mini-programmes WeChat et les utiliser avec flexibilité. Divers moyens techniques. pour obtenir de meilleurs résultats.

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!