Analyse du modèle d'applet WeChat

Cet article présente principalement les informations pertinentes sur l'utilisation des modèles de mini-programme WeChat. J'espère que cet article pourra aider tout le monde à comprendre et à maîtriser ces fonctions. Les amis dans le besoin peuvent s'y référer

WeChat mini. utilisation du modèle de programme

Avant-propos

Le mini-programme WeChat fournit l'utilisation du modèle, c'est-à-dire que les mêmes sections peuvent être utilisées pour l'interopérabilité du code, comme indiqué ci-dessous pour les rendus , vous pouvez utiliser un modèle.

Rendu

1. Définition du modèle

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

Ce qui suit est l'exemple de code de 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 le fichier modèle

Utiliser le modèle le fichier avec est dans les données du nom lors de l'utilisation de la définition du modèle. Si les données de la boucle sont représentées par "...", toutes les données de l'élément peuvent être aplaties. De cette façon, il n'est pas nécessaire d'écrire "élément". .xx" dans le modèle, écrivez simplement les attributs directement dans l'élément. Programmez le fichier wxml pour utiliser le 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';

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction au mini plug-in de graphique de programme WeChat (wx-charts)

sélecteur dans WeChat mini programme Utilisation simple des composants

Développement d'applets WeChat pour implémenter une boîte contextuelle Toast personnalisée

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!