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

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

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

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

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

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

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

2. カルーセル効果の作成

まず、スワイパーを使用してカルーセル効果を作成する必要があります。 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 アプレットでサポートされているクラス名に置き換えられます。

3. データベース ストレージ

カルーセル効果をより応用できるようにするには、データベースから関連する画像情報を取得し、それを 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);
?>

4. この小さなプログラムは 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 に置き換える必要があることに注意してください。

5. 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 アプレット内の対応するファイルにコピーすると、アプレットのカルーセル効果で完全なファイルを確認できるようになります。

6. 概要

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

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

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