ミニプログラム開発デモ例

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

以下の順序で紹介します:

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

1. 最大のレイアウトはビューであり、ビューのレイアウトです。含まれるもの:

画像

、テキスト説明、情報バー、分割線

<!--最外层-->
<view class="home-view1">
  <!--图片层-->
  <view class="home-view2">
    <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"></image>
  </view>
  
  <!--描述层-->
  <text class="home-text1">小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物</text>
  
  <!--信息层-->
  <view class="home-view3">
    <view class="home-view4" >
      <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png"></image>
  
      <text class="home-text-heart bgColor" > 22</text>
    </view>
    <text class="home-text-time" >2016.10.29</text>
  </view>
  
  <!--分界线line-->
  <view class="home-view-line"></view>
  
  <!--图片层(下面的代码直接复制了上面的所有布局代码)-->
  <view class="home-view2">
    <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"></image>
  </view>
  
  <!--描述层-->
  <text class="home-text1">小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物</text>
  
  <!--信息层-->
  <view class="home-view3">
    <view class="home-view4" >
      <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png"></image>
  
      <text class="home-text-heart bgColor" > 22</text>
    </view>
    <text class="home-text-time" >2016.10.29</text>
  </view>
  
  <!--分界线line-->
  <view class="home-view-line"></view>
  
</view>

2. ロジック実装

はページインターフェースを登録するだけです

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

ord

er-radiusは指定します角丸の境界線.home-view-line style: 分割線です

.bgColor style: コレクションの数を指定する背景

Page({
  
  data:{
  
  }
  
})

【関連おすすめ】

1の完全なソースコードのダウンロード。 WeChat ミニ プログラム

2.

WeChat ミニ プログラム学習デモ: チャット ルーム + 音声とビデオ + コンテンツの追加

以上がミニプログラム開発デモ例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。