WeChat 미니 프로그램에서 PHP로 개발된 캐러셀 효과 구현 방법-PHP 튜토리얼-php.cn

WeChat 미니 프로그램에서 PHP로 개발된 캐러셀 효과 구현 방법

王林

풀어 주다： 2023-06-01 10:52:01

원래의

1488명이 탐색했습니다.

최근 몇 년 동안 WeChat 미니 프로그램은 모바일 애플리케이션 개발에서 중요한 방법이 되었습니다. 개발자를 위해 WeChat 미니 프로그램은 다양한 요구 사항에 맞는 미니 프로그램을 쉽게 개발할 수 있도록 편리하고 빠른 도구와 기능적 구성 요소를 많이 제공합니다.

WeChat 미니 프로그램에서 캐러셀 효과는 광고 표시, 이미지 및 텍스트 캐러셀 및 기타 기능에 널리 사용됩니다. 캐러셀 효과를 달성하는 방법에는 여러 가지가 있으며 그 중 하나는 개발에 PHP를 사용하는 것입니다.

이 기사에서는 PHP를 사용하여 WeChat 애플릿에서 캐러셀 효과를 개발하는 방법을 소개하고 자세한 구현 방법을 제공합니다.

기술 솔루션 소개

WeChat 미니 프로그램에서 캐러셀 효과를 구현하려면 다음과 같은 기술 솔루션이 필요합니다.

Swiper: JavaScript로 작성된 매우 편리한 모바일 슬라이딩 구성 요소 라이브러리로 널리 사용됩니다. WeChat 미니 프로그램, H5 페이지 등에
PHP: PHP는 매우 인기 있는 오픈 소스 서버측 프로그래밍 언어로, 동적 웹 사이트, 웹 애플리케이션을 구현하고 사용자 입력을 처리하는 데 자주 사용됩니다.
MySQL: 이는 웹 애플리케이션의 백엔드 개발에 널리 사용되는 무료 오픈 소스 관계형 데이터베이스 관리 시스템입니다.

회전판 효과 만들기

먼저 Swiper를 사용하여 회전판 효과를 만들어야 합니다. Swiper 공식 웹사이트에서 캐러셀 효과를 포함하여 다양한 효과 템플릿을 찾을 수 있습니다.

그러나 여기서는 우리가 구축한 WeChat 애플릿에 적용하려면 템플릿을 일부 수정해야 합니다. 구체적으로, 템플릿의 모든 JavaScript 코드를 .js 파일에 넣고 모든 CSS 코드를 .wxss 파일에 넣은 다음 이를 WeChat 애플릿의 해당 파일에 참조해야 합니다.

여기서는 공식 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>

로그인 후 복사

여기서는 이를 WeChat 애플릿의 .wxml 파일에 복사하고 모든 클래스 이름을 WeChat 애플릿에서 지원하는 이름으로 변경하기만 하면 됩니다. 수업 이름.

데이터베이스 저장

캐러셀 효과를 더욱 적용하려면 데이터베이스에서 관련 이미지 정보를 가져와 Swiper가 표시하는 이미지와 바인딩해야 합니다.

그래서 우리는 다음 필드를 포함하는 MySQL 데이터베이스에 그림 테이블을 만들어야 합니다:

id: 그림의 고유 인덱스
url: 그림의 외부 링크 주소
thumb_url: 사진의 썸네일 링크 주소 ;
title: 사진의 제목 정보입니다.

다음 SQL 문을 사용하여 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;

로그인 후 복사

그런 다음 데이터베이스에서 그림 정보를 가져오는 PHP 스크립트만 작성하고 WeChat mini로 반환하면 됩니다. JSON 형식의 데이터 프로그램 버전입니다.

다음은 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);
?>

로그인 후 복사

애플릿이 API를 호출합니다

MySQL 데이터베이스에서 이미지 정보를 가져와서 다음과 같이 사용하기 위해 서버 측에 간단한 PHP 스크립트를 작성했습니다. JSON 형식의 데이터는 WeChat 애플릿으로 반환됩니다.

미니 프로그램 측면에서는 방금 작성한 PHP 스크립트를 호출하려면 WeChat 미니 프로그램에서 제공하는 wx.request() API만 사용하면 됩니다. 구현 방법은 다음과 같습니다.

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

로그인 후 복사

위의 URL을 서버에서 방금 편집한 PHP 스크립트의 URL로 바꿔야 합니다.

Swiper로 데이터 바인딩

마지막으로 서버에서 얻은 이미지 정보만 Swiper 구성 요소에 바인딩하면 됩니다. 특히 Swiper의 템플릿 파일(.wxml)과 스타일 파일(.wxss)을 수정한 다음 이를 WeChat 애플릿에 참조해야 합니다.

다음은 수정된 Swiper 템플릿입니다.

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

로그인 후 복사

Swiper에서는 wx:for 루프를 사용하여 서버에서 얻은 이미지 정보를 탐색하고 표시합니다.

다음은 수정된 Swiper 스타일 파일입니다.

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

로그인 후 복사

이 코드를 WeChat 미니 프로그램의 해당 파일에 복사하면 미니 프로그램에서 완전한 캐러셀 효과를 볼 수 있습니다!

요약

본 글의 서문을 통해 위챗 미니 프로그램에서 PHP를 사용하여 캐러셀 효과를 구현하는 방법을 자세히 설명했습니다. 우리는 Swiper 구성 요소, PHP 스크립트, MySQL 데이터베이스 및 기타 기술을 사용하여 소규모 프로그램 개발에 대한 편의성과 지원을 제공합니다.

물론, 이 글은 구현 방법만을 제공할 뿐 모든 상황을 다룰 수는 없습니다. 따라서 위챗 미니 프로그램을 개발할 때 다른 문제나 요구 사항이 발생하는 경우 위챗 미니 프로그램의 공식 문서를 참조하여 유연하게 다양한 기술적 수단을 활용하시기 바랍니다. 더 나은 결과를 얻기 위해.

위 내용은 WeChat 미니 프로그램에서 PHP로 개발된 캐러셀 효과 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!