微信小程序如何使用template模板

前言：在微信小程序开发过程中，经常会遇到，很多代码是一模一样的，强大的微信团队当然考虑到了这个问题，所以为了使代码提高可读性，微信提供了template模板，彻底解决了这个重复重做代码臃肿问题。

template作用？ 解决同样的代码片段，重复写。

---

1.创建wxml模板

第一步：定义一个template模板，取名字name= postItem

<!-- 定义一个template模板，取名字name= postItem-->
<template name="postItem">
  <view class='post-container'>
    <view class='post-author-date'>
      <image src='/images/avatar/2.png' class='post-author'></image>
      <text class='post-date'>{{item.date}}</text>
    </view>
    <text class='post-title'>{{item.title}}</text>
    <image src='{{item.post_img}}' class='post-image'></image>
    <text class='post-content'>{{item.content}}</text>
  </view>
  <view class='post-like'>
    <image src='/images/icon/chat.png' class='post-like-image'></image>
    <text class='post-like-font'>{{item.view_num}}</text>
    <image src='/images/icon/view.png' class='post-like-image'></image>
    <text class='post-like-font'>{{item.collect_num}}</text>
  </view>
</template>

第二步：在需要使用template的地方如何使用？

关键字： <import src='模板的相对路径或者绝对路径'/>

使用：is="postItem"为模板的名称，data="{{item}}"为数据源

  <block wx:for="{{postData}}" wx:key="item">
    <!-- is表示定义的模板名称 data为数据集合的item,微信小程序默认一条数据为 item -->
   <template is="postItem" data="{{item}}"></template>

yhx.png

---

2.创建wxss模板

第一步：创建post-item-template.wxss模板

.post-container {
  display: flex;
  flex-direction: column;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
  background-color: #fff;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  box-sizing: border-box;
}

.post-author-date {
  margin-top: 10rpx;
  margin-left: 20rpx;
  margin-bottom: 10rpx;
  box-sizing: border-box;
}

.post-author {
  width: 60rpx;
  height: 60rpx;
  vertical-align: middle;
}

.post-date {
  margin-left: 20rpx;
  font-size: 26rpx;
  font-weight: bold;
}

.post-title {
  font-size: 34rpx;
  color: #333;
  margin-bottom: 10px;
  margin-left: 10px;
  font-weight: bold;
}

.post-image {
  width: 100%;
  height: 340rpx;
  margin: auto 0;
  margin-bottom: 15px;
}

.post-content {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 20rpx;
  margin-left: 20rpx;
  letter-spacing: 2rpx;
  line-height: 40rpx;
}

.post-like {
  display: flex;
  flex-direction: row;
  margin-left: 10px;
  width: 100%;
  align-items: center;
}

.post-like-image {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

.post-like-font {
  vertical-align: middle;
  margin-right: 20px;
  font-size: 28rpx;
}

第二步：在需要 post-item-template.wxss模板下如何引用？

关键字：@import "相对路径或者绝对路径";

/* miniprogram/pages/posts/posts.wxss */
/* 样式使用template模板  */
@import "/pages/posts/post-item/post-item-template.wxss";
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

.swiper {
  width: 100%;
  height: 400rpx;
  background: red;
}

.slide-image {
  width: 100%;
  height: 100%;
}

yhx.png

分别定义xx.wxml和xx.wxss模板，用法比较简单，容易出错的引用时候填写的路径，别粗心，看仔细一点哦。。。

yhx.png

注意事项：在定义模板的时候 image src='路径'最好使用全路径，也就是绝对路径，因为有可能在引用模板的地方，跟定义模板不是在同一级目录下，这样就会导致某些资源引用不到这个隐形的bug。