模板

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

版权所有，禁止转载，违者必究。
喜欢的朋友可以点赞评论喔，您的支持是我更新最大的动力~