模板

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

文件结构

2.本文使用的模板类和模板结构如下：

定义模板

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

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

5.

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

7.

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

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

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

11.如下：

template

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

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

源码

14.post-item-template.wxml

templatename="postItem"viewclass='post-container'viewclass='post-author-date'imagesrc="{{author_img}}"class='post-author'/imagetextclass='post-date'{{date}}/text/viewviewclass='post-container-content'textclass='post-title'{{post_title}}/textimagesrc="{{post_image}}"class='post-image'/imagetextclass='post-text'{{text}}/text/viewviewclass='post-container-like'viewclass='post-like'imagesrc='/images/good.png'class='post-like-image'/imagetextclass='post-like-num'{{collect_num}}/text/viewviewclass='post-like'imagesrc='/images/message.png'class='post-like-image'/imagetextclass='post-like-num'{{view_num}}/text/viewviewclass='post-like'imagesrc='/images/turn.png'class='post-like-image'/imagetextclass='post-like-num'{{turn_num}}/text/viewviewclass='post-like'imagesrc='/images/check.png'class='post-like-image'/imagetextclass='post-like-num'{{check_num}}/text/view/view/view/template

15.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:10rpx010rpx10rpx;}.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;}

16.posts.wxml

importsrc="posts-item/posts-item-template.wxml"/viewswipercatchtap='onswipertap'class='swiper-container'indicator-dots='true'indicator-active-color='green'autoplay='true'swiper-itemimagesrc='../../images/1.jpg'class='swiper-image'data-postId="0"/image/swiper-itemswiper-itemimagesrc='../../images/2.jpg'class='swiper-image'data-postId="1"/image/swiper-itemswiper-itemimagesrc='../../images/3.jpg'class='swiper-image'data-postId="2"/image/swiper-itemswiper-itemimagesrc='../../images/4.jpg'class='swiper-image'data-postId="3"/image/swiper-item/swiperblockwx:for="{{post_key}}"wx:for-item="item"!--//template--viewcatchtap='onPostTap'data-postId="{{item.postId}}"data-postName="name"templateis="postItem"data="{{...item}}"//view/block/view

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

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

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