Kaedah pelaksanaan kesan karusel dibangunkan dalam PHP dalam program mini WeChat

Dalam beberapa tahun kebelakangan ini, program mini WeChat telah menjadi kaedah penting dalam pembangunan aplikasi mudah alih. Bagi pembangun, program mini WeChat menyediakan banyak alatan dan komponen berfungsi yang mudah dan pantas supaya mereka boleh membangunkan program mini yang memenuhi pelbagai keperluan dengan mudah.

Dalam program mini WeChat, kesan karusel digunakan secara meluas dalam paparan pengiklanan, karusel imej dan teks serta fungsi lain. Terdapat banyak cara untuk mencapai kesan karusel, salah satunya adalah menggunakan PHP untuk pembangunan.

Artikel ini akan memperkenalkan cara menggunakan PHP untuk membangunkan kesan karusel dalam applet WeChat, dan memberikan kaedah pelaksanaan terperinci.

1. Pengenalan kepada penyelesaian teknikal

Untuk mencapai kesan karusel dalam applet WeChat, penyelesaian teknikal berikut diperlukan:

• Swiper: Ini Ia adalah perpustakaan komponen gelongsor mudah alih yang sangat mudah yang ditulis dalam JavaScript, yang digunakan secara meluas dalam applet WeChat, halaman H5, dll.
• PHP: PHP ialah bahasa pengaturcaraan bahagian pelayan sumber terbuka yang sangat popular, sering digunakan untuk melaksanakan tapak Web dinamik, aplikasi Web dan memproses input pengguna.
• MySQL: Ini adalah sistem pengurusan pangkalan data perhubungan sumber terbuka dan percuma yang digunakan secara meluas untuk pembangunan belakang aplikasi web.

2. Mencipta kesan karusel

Pertama, kita perlu menggunakan Swiper untuk mencipta kesan karusel. Kami boleh menemui banyak templat kesan yang berbeza di tapak web rasmi Swiper, termasuk kesan karusel.

Walau bagaimanapun, di sini, kami perlu membuat beberapa pengubahsuaian pada templat untuk digunakan pada applet WeChat yang kami bina. Khususnya, kita perlu meletakkan semua kod JavaScript dalam templat ke dalam fail .js, meletakkan semua kod CSS ke dalam fail .wxss, dan kemudian merujuknya kepada fail applet WeChat yang sepadan.

Di sini, kami mengambil kod sampel kesan karusel Swiper rasmi sebagai contoh:

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

Di sini kami hanya perlu menyalinnya ke fail .wxml applet WeChat dan menambah semua kelas Hanya tukar nama kepada nama kelas yang disokong oleh applet WeChat.

3. Storan Pangkalan Data

Untuk menjadikan kesan karusel lebih terpakai, kita perlu mendapatkan maklumat imej yang berkaitan daripada pangkalan data dan menggabungkannya dengan imej yang dipaparkan oleh Swiper Make yang mengikat.

Jadi, kita perlu mencipta jadual gambar dalam pangkalan data MySQL, yang mengandungi medan berikut:

• id: indeks unik gambar
• url: alamat pautan Luar gambar;
• url_gambar kecil: alamat pautan imej kecil bagi imej;
• Kita boleh menggunakan pernyataan SQL berikut untuk mencipta jadual gambar dalam pangkalan data 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;

Kemudian, kita hanya perlu menulis skrip PHP untuk mendapatkan maklumat gambar daripada pangkalan data, dan kemudian Ia dikembalikan kepada applet WeChat sebagai data dalam format JSON.

Berikut ialah contoh kod yang kami tulis dalam 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);
?>

Aplet memanggil API

4. Kami telah menulis yang ringkas pada pelayan skrip PHP sisi yang digunakan untuk mendapatkan maklumat imej daripada pangkalan data MySQL dan mengembalikannya ke applet WeChat sebagai data dalam format JSON.

Di bahagian program mini, kami hanya perlu menggunakan API wx.request() yang disediakan oleh program mini WeChat untuk memanggil skrip PHP yang baru kami tulis. Berikut ialah cara untuk melaksanakannya:

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

Perhatikan bahawa anda perlu menggantikan URL di atas dengan URL skrip PHP yang baru anda edit pada pelayan.

Ikat data dengan Swiper

5. Akhir sekali, kita hanya perlu mengikat maklumat imej yang diperolehi daripada pelayan kepada komponen Swiper. Khususnya, kita perlu mengubah suai fail templat Swiper (.wxml) dan fail gaya (.wxss), dan kemudian merujuknya ke dalam applet WeChat.

Berikut ialah templat Swiper kami yang diubah suai:

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

Perhatikan bahawa kami menggunakan gelung wx:for dalam Swiper untuk melintasi maklumat imej yang diperoleh daripada pelayan dan memaparkannya.

Berikut ialah fail gaya Swiper kami yang diubah suai:

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

Selepas kami menyalin kod ini ke fail yang sepadan dalam applet WeChat, anda boleh melihat fail lengkap dalam applet Carousel effect sekarang!

Ringkasan

6. Melalui pengenalan artikel ini, kami menerangkan secara terperinci cara menggunakan PHP untuk melaksanakan kesan karusel dalam program mini WeChat. Kami menggunakan komponen Swiper, skrip PHP, pangkalan data MySQL dan teknologi lain untuk menyediakan kemudahan dan sokongan untuk pembangunan program kecil.

Sudah tentu, artikel ini hanya menyediakan kaedah pelaksanaan dan tidak boleh merangkumi semua situasi Oleh itu, jika anda menghadapi masalah atau keperluan yang berbeza semasa membangunkan program mini WeChat, sila rujuk dokumentasi rasmi program mini WeChat , dan fleksibel menggunakan pelbagai cara teknikal untuk mencapai hasil yang lebih baik.

Atas ialah kandungan terperinci Kaedah pelaksanaan kesan karusel dibangunkan dalam PHP dalam program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!