So verwenden Sie das Vorlagenmodul im WeChat-Miniprogramm

Der Inhalt dieses Artikels befasst sich mit der Verwendung des Vorlagenmoduls im WeChat-Applet. Ich hoffe, dass er für Freunde hilfreich ist.

WXML stellt Vorlagen zur Verfügung, in denen Code-Schnipsel definiert und dann an verschiedenen Stellen aufgerufen werden können.
Erstellen Sie zunächst ein Vorlagenverzeichnis unter dem Seitenverzeichnis, um Vorlagen zu speichern.
Wie erstellt man eine Vorlage?
Für die Vorlage müssen nur zwei Dateien erstellt werden: xxx.wxss und xxx.wxml sowie die anderen beiden js und .json sind nicht erforderlich
Erstellen Sie eine neue list-template.wxml und list-template.wxss

list-template.wxml im Vorlagenverzeichnis:

<template name=&#39;listTmp&#39;><view>
  <view>
    <image src=&#39;/images/avatar/0.png&#39;></image>
    <text>may 9 2018</text>
  </view>
  <text>火影村</text>
  <image src=&#39;/images/detail/carousel/6.jpg&#39;></image>
  <text>火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火火</text>
  <view>
    <image src=&#39;/images/icon/view.png&#39;></image>
    <text>88</text>
    <image src=&#39;/images/icon/star.png&#39;></image>
    <text>88</text>
  </view></view></template>

list-template.wxss:

.tmpContainer{
  display: flex;  
  flex-direction: column;
  }
.avatar_date image{
  width: 60rpx;  
  height: 60rpx;  
/* 把此元素放置在父元素的中部。就可以让图片与文字都在中间了 */
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.avatar_date {
  padding: 10rpx;
  }
.avatar_date text{
  font-size: 32rpx;
  }
.company{
  margin-left: 10rpx;  
  font-size: 36rpx;  
  font-weight: 700;  
  margin: 10rpx;
  }
.contentImg{
  width: 100%;  
  height: 460rpx;
  }
.content{
  font-size: 32rpx;  
  /* 段落首字母缩进两个字 */
  text-indent: 64rpx;
  }
.collection_love image{
  width: 32rpx;  
  height: 32rpx;  
  vertical-align: middle;  
  margin-right: 10rpx;
  }
.collection_love text{
  font-size: 28rpx;  
  margin-right: 10rpx;
  }

Fügen Sie die Vorlage in list.wxml ein:

<!-- 在头部引入,注意结尾别忘了/ -->
<import src=&#39;/pages/template/list-template.wxml&#39;/>

Dann verweisen Sie auf
, wo Sie die Vorlage verwenden möchten, und führen Sie den Vorlagenstil in list.wxss wie folgt ein

Verwandte Empfehlungen:

PHP-Designmuster-Vorlagenmethode (Vorlagenmethodenmuster)

WeChat-Verwendung von WeChat-Anwesenheitscookies für die Entwicklung von Unternehmenskonten_Javascript-Kenntnisse

Verwenden des pdb-Moduls zum Debuggen von Python-Programmbeispielen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Vorlagenmodul im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!