PHPで開発したカルーセル効果をWeChatミニプログラムに実装する方法-PHPチュートリアル-php.cn

PHPで開発したカルーセル効果をWeChatミニプログラムに実装する方法

王林

リリース： 2023-06-01 10:52:01

オリジナル

1481 人が閲覧しました

近年、WeChat ミニプログラムはモバイルアプリケーション開発における重要な手法となっています。開発者にとって、WeChat ミニプログラムは、さまざまなニーズを満たすミニプログラムを簡単に開発できるように、多くの便利で高速なツールと機能コンポーネントを提供します。

WeChat ミニプログラムでは、カルーセル効果は広告表示や画像とテキストのカルーセルなどの機能で広く使用されています。カルーセル効果を実現するにはさまざまな方法がありますが、その 1 つは開発に PHP を使用することです。

この記事では、PHP を使用して WeChat アプレットでカルーセル効果を開発する方法と、詳細な実装方法を紹介します。

技術ソリューションの紹介

WeChat アプレットでカルーセル効果を実現するには、次の技術ソリューションが必要です:

スワイパー:これは、JavaScript で書かれた非常に便利なモバイルスライドコンポーネントライブラリであり、WeChat アプレットや H5 ページなどで広く使用されています。
PHP: PHP は非常に人気のあるオープンソースのサーバー側プログラミング言語であり、動的な Web サイト、Web アプリケーションの実装、およびユーザー入力の処理によく使用されます。
MySQL: これは、Web アプリケーションのバックエンド開発に広く使用されている、無料のオープンソースのリレーショナルデータベース管理システムです。

カルーセル効果の作成

まず、スワイパーを使用してカルーセル効果を作成する必要があります。 Swiper の公式 Web サイトでは、カルーセル効果を含むさまざまな効果テンプレートを見つけることができます。

ただし、ここでは、作成した 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 Make によって表示される画像と組み合わせる必要があります。バインディング。

したがって、次のフィールドを含む画像テーブルを 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;

ログイン後にコピー

その後、ピクチャ情報をデータベースに保存され、JSON 形式のデータとして WeChat アプレットに返されます。

以下は、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 データベースから画像情報を取得し、それを JSON 形式のデータとして WeChat アプレットに返すために使用されるサーバー側 PHP スクリプト。

ミニプログラム側では、WeChat ミニプログラムによって提供される wx.request() API を使用して、先ほど作成した PHP スクリプトを呼び出すだけです。実装方法は以下のとおりです。

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 を使用して WeChat ミニプログラムにカルーセル効果を実装する方法を詳しく説明しました。当社は、Swiper コンポーネント、PHP スクリプト、MySQL データベース、その他のテクノロジーを使用して、小規模プログラムの開発に利便性とサポートを提供します。

もちろん、この記事は実装方法を提供するだけであり、すべての状況をカバーできるわけではありません。したがって、WeChat ミニプログラムの開発中に別の問題やニーズが発生した場合は、WeChat ミニプログラムの公式ドキュメントを参照してください。より良い結果を達成するために、さまざまな技術的手段を柔軟に使用します。

以上がPHPで開発したカルーセル効果をWeChatミニプログラムに実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。