WeChat ミニ プログラムの簡単なデモのレイアウト、ロジック、スタイルの演習

WeChat アプレットのレイアウト例:

以下の順番で紹介していきます。

レイアウトの実装
ロジックの実装
スタイルの実装

1. レイアウトの実装

最大のレイアウトはビューです。ビュー レイアウトには、画像、テキストの説明、情報バー、分割線が含まれます。

2. ロジックの実装

ページインターフェースを登録したところです

3. スタイルの実装

.home-view1 スタイル: 表示は、最大のビュー レイアウトが柔軟なレイアウトであることを指定し、justify-content はコンテンツが中央に配置され、垂直に配置されることを指定します。

.home-view3 スタイル: display は、情報バーのレイアウトが柔軟なレイアウトであることを規定し、justify-content はコンテンツが水平方向に均等に分散されることを規定します。

.home-view4 スタイル: display は、コレクションの画像とコレクション番号の親レイアウトが柔軟なレイアウトであることを指定し、align-items はコンテンツが垂直方向の中央に配置されることを指定します。

.home-image1 スタイル: 画像の高さを指定します。

.home-image-heart スタイル: 収集した写真のサイズを指定します

.home-text1 style: 説明テキストのスタイルを指定し、text-align は中央に配置するテキストを指定し、line-height はテキストの 2 行間の高さを指定します。

.home-text-heart style: コレクション番号のスタイルを指定し、border-radius は境界線の丸い角を指定します。

.home-view-line style: 分割線です

.bgColor スタイル: コレクション番号の背景を指定します。

読んでいただきありがとうございます。これが皆さんのお役に立てば幸いです。そしてこのサイトへのサポートに感謝します。

WeChat アプレットの簡単なデモ レイアウト、ロジック、スタイルの演習に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。