How to use the template module in WeChat mini program

The content of this article is about how to use the template module in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

WXML provides templates, in which code snippets can be defined and then called in different places.
First create a template directory in the pages directory to store the template
How to create a template?
The template only needs to create two files, xxx.wxss and xxx.wxml, and the other two. js and .json are not required
Create new list-template.wxml and list-template.wxss

list-template.wxml in the template directory:

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

Introduce the template in list.wxml:

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

Then reference
where you want to use the template To introduce template styles in list.wxss like the following

Related recommendations:

php design pattern Template Method (template method pattern)

Using WeChat Attendance Cookies for WeChat Enterprise Account Development_javascript skills

##Using the pdb module to debug Python program examples

The above is the detailed content of How to use the template module in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!