Comment utiliser le modèle de l'applet WeChat

Ce que je vais vous montrer cette fois, c'est comment utiliser le modèle de l'applet WeChat. L'applet WeChat fournit l'utilisation d'un modèle, c'est-à-dire que la même section peut être utilisée pour l'interopérabilité du code, comme le montre le rendu ci-dessous, vous pouvez utiliser un modèle. Cet article vous donnera une bonne analyse.

Définition du modèle

La chose la plus importante à propos d'un modèle est le nom du modèle, c'est-à-dire ""

Ce qui suit est l'exemple de code du modèle

template name="postItem">
 <view class=&#39;post-container&#39;>
  <view class=&#39;post-author-date&#39;>
   <image class=&#39;post-author&#39; src=&#39;{{avatar}}&#39;></image>
   <text class=&#39;post-date&#39;>{{date}}</text>
  </view>
  <text class=&#39;post-title&#39;>{{title}}</text>
  <image class=&#39;post-image&#39; src=&#39;{{imgSrc}}&#39;></image>
  <text class=&#39;post-content&#39;>{{content}}</text>
  <view class=&#39;post-like&#39;>
   <image class=&#39;post-like-image&#39; src=&#39;/images/icon/chat.png&#39;></image>
   <text class=&#39;post-link-text&#39;>{{collection}}</text>
   <image class=&#39;post-like-image&#39; src=&#39;/images/icon/view.png&#39;></image>
   <text class=&#39;post-link-text&#39;>{{reading}}</text>
  </view>
 </view>
</template>

Fichier wxss

.post-container {
 display: flex;
 flex-direction: column;
 margin-top: 20rpx;
 margin-bottom: 40rpx;
 background-color: white;
 border-bottom: 1px solid #ededed;
 border-top: 1px solid #ededed;
 padding-bottom: 5px;
}
.post-author-date {
 margin: 10rpx 0 20rpx 10rpx;
}
.post-author {
 width: 60rpx;
 height: 60rpx;
 vertical-align: middle;
}
.post-date {
 margin-left: 20rpx;
 vertical-align: middle;
 margin-bottom: 5px;
 font-size: 26rpx;
}
.post-title {
 font-size: 34rpx;
 font-weight: 600;
 color: #333;
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
}
.post-image {
 margin-left: 16px;
 width: 100%;
 height: 340rpx;
 margin: auto 0;
 margin-bottom: 15rpx;
}
.post-content {
 color: #666;
 font-size: 28rpx;
 margin-bottom: 20rpx;
 margin-left: 20rpx;
 margin-right: 20rpx;
 letter-spacing: 2rpx;
 line-height: 40rpx;
}
.post-like {
 font-size: 13px;
 flex-direction: row;
 line-height: 16px;
 margin-left: 16px;
 color: gray;
}
.post-like-image {
 height: 16px;
 width: 16px;
 margin-right: 8px;
 vertical-align: middle;
}
.post-link-text {
 vertical-align: middle;
 margin-right: 20px;
}

Introduire le fichier modèle

Utiliser le fichier modèle avec est Le nom lors de l'utilisation des données de définition de modèle contient les données dans la boucle Si vous utilisez "..." pour l'exprimer, vous pouvez masquer toutes les données de l'élément. De cette façon, vous n'avez pas besoin d'écrire "item.xx" dans le modèle. Vous pouvez simplement écrire les attributs. l'article directement. Pour utiliser le fichier wxml du programme modèle

<import src="post-item/post-item-template.wxml" />
<view>
 <block wx:for="{{postList}}" wx:for-item="item">
   <template is="postItem" data="{{...item}}" />
 </block>
</view>

fichier wxss

@import 'post-item/post-item-template.wxss';

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez faire attention aux autres. articles connexes sur le site php chinois !

Lecture connexe :

Explication détaillée de la syntaxe vue.js et instructions courantes

Comment utiliser JS pour désactiver les boutons Et activez

Comment transmettre les paramètres du composant parent au composant enfant dans vue.js

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!