Implementation method of carousel effect developed in PHP in WeChat mini program

In recent years, WeChat mini programs have become an important method in mobile application development. For developers, WeChat mini programs provide many convenient and fast tools and functional components so that they can easily develop mini programs that meet various needs.

In WeChat mini programs, the carousel effect is widely used in functions such as advertising display and image and text carousels. There are many ways to achieve the carousel effect, one of which is to use PHP for development.

This article will introduce how to use PHP to develop the carousel effect in the WeChat applet, and give detailed implementation methods.

1. Introduction to technical solutions

To achieve the carousel effect in the WeChat applet, the following technical solutions are required:

• Swiper: This It is a very convenient mobile sliding component library written in JavaScript, which is widely used in WeChat applets, H5 pages, etc.
• PHP: PHP is a very popular open source server-side programming language, often used to implement dynamic Web sites, Web applications, and process user input.
• MySQL: This is a free and open source relational database management system that is widely used for back-end development of web applications.

2. Create a carousel effect

First, we need to use Swiper to create a carousel effect. We can find many different effect templates on the Swiper official website, including the carousel effect.

However, here, we need to make some modifications to the template to apply to the WeChat applet we built. Specifically, we need to put all the JavaScript code in the template into a .js file, put all the CSS code into a .wxss file, and then reference them to the corresponding files of the WeChat applet.

Here, we take the official Swiper carousel effect sample code as an example:

<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>

Here we only need to copy it to the .wxml file of the WeChat applet and add all classes Just change the name to a class name supported by the WeChat applet.

3. Database Storage

In order to make the carousel effect more applicable, we need to obtain relevant image information from the database and combine it with the image displayed by Swiper Make the binding.

So, we need to create a picture table in the MySQL database, which contains the following fields:

• id: the unique index of the picture;
• url: the picture's External link address;
• thumb_url: thumbnail link address of the picture;
• title: title information of the picture.

We can use the following SQL statement to create a picture table in the MySQL database:

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;

Then, we only need to write a PHP script to get the picture information from the database, and then It is returned to the WeChat applet as data in JSON format.

The following is the sample code we wrote in 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);
?>

4. The small program calls the API

We have written a simple one on the server side PHP script used to obtain image information from the MySQL database and return it to the WeChat applet as data in JSON format.

On the mini program side, we only need to use the wx.request() API provided by the WeChat mini program to call the PHP script we just wrote. The following is the implementation method:

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
        });
      }
    })
  }
})

Note that the above URL needs to be replaced with the URL of the PHP script just edited on the server.

5. Binding data with Swiper

Finally, we only need to bind the image information obtained from the server to the Swiper component. Specifically, we need to modify Swiper's template file (.wxml) and style file (.wxss), and then reference them into the WeChat applet.

The following is our modified Swiper template:

<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>

Note that we use a wx:for loop in Swiper to traverse the image information obtained from the server and display it.

The following is our modified Swiper style file:

.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;
}

After we copy these codes to the corresponding files in the WeChat applet, we can see the complete file in the applet Carousel effect now!

6. Summary

Through the introduction of this article, we explained in detail how to use PHP to achieve the carousel effect in WeChat mini programs. We use Swiper components, PHP scripts, MySQL database and other technologies to provide convenience and support for the development of small programs.

Of course, this article only provides an implementation method and cannot cover all situations. Therefore, if you encounter different problems or needs when developing WeChat mini programs, please refer to the official documentation of WeChat mini programs. , and flexibly use various technical means to achieve better results.

The above is the detailed content of Implementation method of carousel effect developed in PHP in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!