微信小程序 模板类 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

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