Explication détaillée du modèle de modèle d'applet WeChat

Le mini-programme WeChat propose l'utilisation de modèles, c'est-à-dire que les mêmes sections peuvent être utilisées pour l'interopérabilité du code, comme le montre le rendu ci-dessous, vous pouvez utiliser des modèles. Cet article présente principalement les informations pertinentes sur l'utilisation des modèles de mini-programmes WeChat. J'espère que cet article pourra aider tout le monde à comprendre et à maîtriser ces fonctions. Les amis dans le besoin pourront s'y référer.

Utilisation du modèle de programme WeChat Mini

Rendu

1. la chose la plus importante dans la définition 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;
}

2. Utilisation des modèles

Introduire les fichiers modèles

Utiliser les fichiers modèles avec is. les données de nom lors de l'utilisation de la définition du modèle sont à l'intérieur de la boucle. Si les données à l'intérieur sont représentées par "...", vous pouvez mettre en mosaïque 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 directement dans l'élément. Vous devez utiliser le fichier wxml du programme

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

Recommandations associées :

Que faire si l'applet WeChat ne réussit pas l'examen

Partage d'exemples d'applet WeChat implémentant le rapport de largeur adaptatif de l'image du composant d'image

Explication détaillée d'exemples d'applets WeChat implémentant les effets de menu suivants et le chargement imbriqué en boucle des données

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!