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.
Untuk mencapai kesan karusel dalam applet WeChat, penyelesaian teknikal berikut diperlukan:
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.
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:
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); ?>
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 SwiperBerikut 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!
RingkasanSudah 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!