微信小程序模板类 template实例

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。接下来博主将会以图文讲解，然后最后发出源码供大家参考。

文件结构

本文使用的模板类和模板结构如下：
在这里插入图片描述

定义模板

template 是一个模板化的技术
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

这里postItem表示模板名，供其他wxml文件调用、

在这里插入图片描述

这个模板类的文件名称，即其他wxml文件使用时，需要如java导包或者c/ c++引入头文件般，引入文件，然后再根据模板类的名称调用：如下

在这里插入图片描述

可以看到的是，这里import 的 post-item-template.xml 正是上图勾画的模板类文件的名称，
小程序得绝对路径，都是从根目录开始 /xxxx/xxx/xx.xx 必须在目录得最前面加斜杠
然后具体调用如下
在这里插入图片描述

然后导入成功经之后，还需要导入模板类的wxss文件，在导入文件相应的wxss文件导入，
而且必须导入到wxss中

wxss导入wxss中
wxml导入wxml中
但是不能抽象js。因此只能叫模板化，不能叫模块化

如下：在这里插入图片描述

template

内路径问题：
使用模板的时候最好使用绝对路径，这样子对于不同位置的框架调用模板都能够通用了

因为使用template就意味着，view使用了 wx：for 循环，但是这个时候，循环输出的数组只能有一个。也就是意味着，不管输出什么数据，都必须在数组中，才能识别并且输出

源码

post-item-template.wxml

<template name="postItem">
  <view class='post-container'>
    <view class='post-author-date'>
      <image src="{{author_img}}" class='post-author'></image>
      <text class='post-date'>{{date}}</text>
    </view>
    <view class='post-container-content'>
      <text  class='post-title'> {{post_title}}</text>
      <image src="{{post_image}}" class='post-image'></image>
      <text class='post-text'>{{text}}</text>
    </view>
    <view class='post-container-like'>
      <view class='post-like'>
        <image src='/images/good.png' class='post-like-image'></image>
        <text class='post-like-num'>{{collect_num}}</text>
      </view>
      <view class='post-like'>
        <image src='/images/message.png' class='post-like-image'></image>
        <text class='post-like-num'>{{view_num}}</text>
      </view>
      <view class='post-like'>
        <image src='/images/turn.png' class='post-like-image'></image>
        <text class='post-like-num'>{{turn_num}}</text>
      </view>
      <view class='post-like'>
        <image src='/images/check.png' class='post-like-image'></image>
        <text class='post-like-num'>{{check_num}}</text>
      </view>
    </view>
  </view>
</template>

post-item-template.wxss

.post-container{
  margin-top: 20px;
  
  
}
.post-author-date{
  margin-left: 10rpx;
  margin-top: 3rpx;
  margin-bottom: 3rpx;
  height: 80rpx;
  
}

.post-author{
  height: 60rpx;
  width: 60rpx;
  border-radius: 50%;
  vertical-align: middle;
}

.post-date{
  line-height: 80rpx;
  margin-left: 15px;
  font-size: 42rpx;
}


.post-image{
  height: 920rpx;
  width: 100%;
}

.post-text{
  margin: 10rpx 0 10rpx 10rpx;
}

.post-title{
  
  font-size: 32rpx;
  font-weight: bold;
  margin-left: 15rpx;
  margin-top: 15rpx;
  margin-bottom: 15rpx;
  
}

.post-like{
  margin-left: 10px;
  display: inline;
}
.post-like-image{
  
  height: 32rpx;
  width: 32rpx;
  vertical-align: middle;
}
.post-like-num{
  font-size: 25rpx;
  margin-left: 3rpx;
}

posts.wxml


<import src="posts-item/posts-item-template.wxml" />
<view>
  <swiper catchtap='onswipertap'  class='swiper-container' indicator-dots='true' indicator-active-color='green' autoplay='true'>
    <swiper-item>
      <image src='../../images/1.jpg'  class='swiper-image' data-postId="0"></image>
    </swiper-item>
    <swiper-item>
      <image src='../../images/2.jpg'  class='swiper-image' data-postId="1"></image>
    </swiper-item>
    <swiper-item>
      <image src='../../images/3.jpg'  class='swiper-image' data-postId="2"></image>
    </swiper-item>
    <swiper-item>
      <image src='../../images/4.jpg'  class='swiper-image' data-postId="3"></image>
    </swiper-item>
  </swiper>

  <block wx:for="{{post_key}}" wx:for-item="item">
      <!-- //template -->
      <view catchtap='onPostTap' data-postId="{{item.postId}}" data-postName="name">
        <template is = "postItem" data="{{...item}}" />
      </view>
  </block>



</view>

post.wxss

/* pages/posts/posts.wxss */
@import "/pages/posts/posts-item/posts-item-template.wxss";
.swiper-container{
  width: 100%;
  height: 920rpx;
}
.swiper-image{
  width: 100%;
  height: 920rpx;
}

以下是微信小程序项目源码：点击可以进入gitee直接下载源码包喔
微信小程序演示程序