PHP を使用して WeChat ミニ プログラムにプログレス バーとコンポーネントを実装する方法

WeChat ミニ プログラムの継続的な人気に伴い、ますます多くの開発者が WeChat ミニ プログラムの開発に注目し始めています。 WeChat ミニ プログラムでは、通常、ユーザー エクスペリエンスとインターフェイスの美しさを向上させるために、プログレス バーとコンポーネントが使用されます。この記事では、PHP を使用して WeChat アプレットにプログレス バーとコンポーネントを実装する方法を紹介します。

1. プログレス バー

1. HTML と CSS を使用してプログレス バーを作成する

まず、HTML と CSS を使用して単純なプログレス バーを作成できます。 。 HTML コードは次のとおりです。

<div class="progress">
  <div class="progress-bar" style="width: 50%;"></div>
</div>

CSS コードは次のとおりです。

.progress {
  width: 100%;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  color: white;
}

2. 進行状況バーを WeChat アプレットに埋め込みます

WeChat アプレット、プログレス バーは、WXML および WXSS 言語を使用してインターフェイスに埋め込むことができます。 WXML コードは次のとおりです。

<view class="progress">
  <view class="progress-bar" style="width: {{progress}}%;"></view>
</view>

WXSS コードは次のとおりです。

.progress {
  width: 100%;
  height: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
  color: white;
}

このうち、progress はプログレス バーの進行状況を表し、プログレス バーの進行状況を動的に変更できます。 JS でこの変数の値を変更することで変更されます。

3. PHP を WeChat アプレットと組み合わせて使用​​して進行状況バーを実装する

WeChat アプレットでは、通常、PHP を使用してサーバーからデータを取得し、それをアプレットインターフェイス。サーバー側で PHP ファイルを作成し、パラメータを渡すことで進行状況バーの進行状況の値を取得できます。 PHP コードは次のとおりです。

<?php
  $progress = $_GET['progress'];
?>

次に、アプレットで、サーバーにリクエストを送信し、wx.request() 関数を使用して進行状況の値を取得できます。 JS コードは次のとおりです。

wx.request({
  url: 'http://example.com/progress.php?progress=50',
  success: function(res) {
    console.log(res.data);
    that.setData({
      progress: res.data
    })
  }
})

このうち、url パラメータはサーバー側の PHP ファイルのアドレス、progress パラメータはプログレスバーの進行状況の値です。リクエストが成功すると、setData() 関数を通じて進行状況の値をミニ プログラム インターフェイスにレンダリングできます。

2. コンポーネント

WeChat アプレットは、ボタン、入力、画像、ビューなど、非常に使いやすい多くのコンポーネントを提供します。しかし、カスタム コンポーネントを使用する必要がある場合、それをどのように実装すればよいでしょうか? PHP と WeChat アプレットを組み合わせてカスタム コンポーネントを実装できます。

1. カスタム コンポーネントの作成

ミニ プログラムでは、WXML 言語と WXSS 言語を使用してカスタム コンポーネントを作成できます。 WXML コードは次のとおりです:

<view class="custom-component">
  <image src="{{imageSrc}}" mode="{{mode}}"></image>
  <text>{{text}}</text>
</view>

WXSS コードは次のとおりです:

.custom-component {
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-component image {
  width: 80px;
  height: 80px;
}

.custom-component text {
  margin-left: 20px;
  font-size: 24rpx;
  color: #333;
}

2. PHP でカスタム コンポーネントを動的に変更する

サーバー側で, PHP を使用して、カスタム コンポーネントのプロパティ値を動的に変更できます。 PHP コードは次のとおりです。

<?php
  $imageSrc = $_GET['imageSrc'];
  $mode = $_GET['mode'];
  $text = $_GET['text'];
?>

次に、アプレット内で、wx.request() 関数を使用してサーバーにリクエストを送信してデータを取得し、属性値を動的に変更できます。カスタムコンポーネントの。 JSコードは以下の通りです。

wx.request({
  url: 'http://example.com/component.php?imageSrc=../images/avatar.png&mode=aspectFill&text=Hello%20World',
  success: function(res) {
    console.log(res.data)
    that.setData({
      imageSrc: res.data.imageSrc,
      mode: res.data.mode,
      text: res.data.text
    })
  }
})

このうち、urlパラメータはサーバーサイドのPHPファイルのアドレス、imageSrc、mode、textはカスタムコンポーネントの属性値です。

要約すると、PHP を WeChat アプレットと組み合わせて使用​​すると、プログレス バーとコンポーネントを実装できるため、ユーザー エクスペリエンスとインターフェイスの美しさが向上します。

以上がPHP を使用して WeChat ミニ プログラムにプログレス バーとコンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。