WeChat Mini Program Exercices simples de mise en page, de logique et de style

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 !