ホームページ > 記事 > WeChat アプレット > ミニプログラム開発デモ例
WeChat アプレットのレイアウト例:
以下の順序で紹介します:
レイアウトの実装
ロジックの実装
スタイルの実装
1. 最大のレイアウトはビューであり、ビューのレイアウトです。含まれるもの:
画像はページインターフェースを登録するだけです
3. スタイル実装
.home-view1 スタイル:
displayを指定します。最大の View レイアウトが柔軟なレイアウトであること、 justify-content は、コンテンツが中央に配置され、垂直方向に配置されることを指定すること、 ....home-view3 スタイル: display は、情報バーのレイアウトが柔軟なレイアウトであることを指定すること、 justify-content は、コンテンツが水平方向に均等に配置されることを指定します。
.home-view4 style: display は、コレクションの画像とコレクション番号の親レイアウトが柔軟なレイアウトであることを指定し、 align-items は、コンテンツが垂直方向の中央に配置されることを指定します。方向
.home-image1 スタイル: 画像の高さを指定します
.home-image-heart スタイル: 収集された画像のサイズを指定します
.home-text1 スタイル: 説明テキスト、
テキストのスタイルを指定します-alignは中央に配置するテキストを指定し、line-heightはテキストの2行間の高さを指定します.home -text-heart style:コレクションの数を指定するスタイル、b
order-radiusは指定します角丸の境界線.home-view-line style: 分割線です
.bgColor style: コレクションの数を指定する背景
Page({ data:{ } })
【関連おすすめ】
1の完全なソースコードのダウンロード。 WeChat ミニ プログラムWeChat ミニ プログラム学習デモ: チャット ルーム + 音声とビデオ + コンテンツの追加
以上がミニプログラム開発デモ例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。