Exemple de disposition d'applet WeChat?:

Les éléments suivants seront introduits dans l’ordre suivant?:

Mise en place de l'aménagement
Mise en ?uvre de la logique
Implémentation de styles

1. Mise en ?uvre de la mise en page

La mise en page la plus grande est la vue. La mise en page de la vue comprend?: une image, une description textuelle, une barre d'informations et une ligne de séparation.

<!--最外層-->
<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. Mise en ?uvre de la logique

Je viens d'enregistrer l'interface de la page

Page({
 
  data:{
 
  }
 
})

3. Mise en ?uvre des styles

Style .home-view1?: display stipule que la disposition maximale de View est une disposition flexible, justifier-content stipule que le contenu est centré et disposé verticalement,…

Style .home-view3?: display stipule que la disposition de la barre d'informations est une disposition flexible, et justifier-content stipule que le contenu est uniformément réparti horizontalement.

Style .home-view4?:?display spécifie que la mise en page parent des images et des numéros de collection est une mise en page flexible, et align-items spécifie que le contenu est centré dans la direction verticale.

Style .home-image1?: spécifie la hauteur de l'image

Style .home-image-heart?: spécifie la taille des images collectées

.home-text1 style?: spécifie le style du texte de description, text-align spécifie le texte à centrer, line-height spécifie la hauteur entre deux lignes de texte

.home-text-heart style?: spécifie le style du numéro de collection, border-radius spécifie les coins arrondis de la bordure

Style .home-view-line?: est une ligne de démarcation

Style .bgColor?: Spécifie l'arrière-plan du numéro de collection

.home-view1{
  display: flex;
  justify-content: center;
  flex-direction: column;
 
  height: 100%;
  width: 100%;
  margin: 6px;
 
}
 
.home-view3{
  display: flex;
  justify-content: space-between;
}
 
.home-view4{
  display: flex;
  align-items: center;
}
 
.home-image1{
  height: 200px;
}
 
.home-image-heart{
  width: 30px;
  height: 30px;
}
 
.home-text1{
  text-align: left;
  line-height: 25px;
  margin-top: 6px;
  margin-right: 6px;
  color: gray;
}
 
.home-text-heart{
  width: 22px;
  height: 22px;
  margin-left: 10px;
  border-radius: 20%;
  pad: 5px;
  text-align: center;
}
 
.home-text-time{
  text-align: center;
  margin-right: 20px;
  padding-top: 5px;
  color: gray;
}
 
.home-view-line{
 
 width: 100%;
 height: 6px;
 margin-top: 5px;
 background-color: gainsboro;
}
 
.bgColor{
  background-color: lightblue;
  opacity: 0.6;
}

Merci d'avoir lu, j'espère que cela aidera tout le monde, et merci pour votre soutien à ce site?!

Pour plus d'articles liés aux exercices de mise en page, de logique et de style de l'applet WeChat, veuillez faire attention au site Web PHP chinois?!