微信小程序模板类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直接下载源码包喔
微信小程序演示程序