Exemple de démonstration de développement de mini-programmes

Exemple de mise en page du mini programme WeChat :

Les éléments suivants seront introduits dans l'ordre suivant :

Mise en œuvre de la mise en page
Mise en œuvre de la logique
Mise en œuvre du style

1. Implémentation 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. . Implémentation logique

Enregistrez simplement l'interface de la page

Page({
  
  data:{
  
  }
  
})

3. Implémentation du style

.home-view1 style : affichage Spécifie que le maximum. La disposition de la vue est une disposition flexible, justeify-content spécifie que le contenu est centré et disposé verticalement, ...

.home-view3 style : display spécifie que la disposition de la barre d'informations est une mise en page flexible, justification-content stipule que le contenu est réparti uniformément horizontalement

style .home-view4 : display stipule que la mise en page parent des images et des numéros de collection est une mise en page flexible, align-items stipule que le contenu est centré verticalement

.home-image1 style : Spécifie la hauteur de l'image

.home-image-heart style : Spécifie la taille de l'image collectée

.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 : précise le style du numéro de collection, border-radius précise le filet de bordure

.home-view-line style : est un ligne de séparation

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;
}

[Recommandations associées]

1 Téléchargez le code source complet de WeChat. Mini programme

2. Démo pour apprendre le mini programme WeChat : Chat Room + Audio et vidéo + contenu ajouté

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!