微信template模板

可参考微信开发者文档wxml模板
目录：

listItem.wxml中定义模板

<template name="listItem">      //name属性为模板的名字
  <view class="commonItem">
    <image src="{{img}}"></image>
    <view class="itemRight">
      <view class="itemTitle">{{title}}</view>
      <view class="itemFooter">
        <text>{{name}}</text>
        <text>{{date}}</text>
      </view>
    </view>
  </view>
</template>

listItem.wxss

.commonItem{
  width: 646rpx;
  height: 160rpx;
  background:rgba(244,244,244,1);
  box-shadow:0rpx 1rpx 7rpx 0rpx rgba(139,139,139,0.36);
  border-radius:0rpx 30rpx 30rpx 0rpx;
  margin:0 auto;
  display: flex;
  align-items: center;
  padding: 25rpx 30rpx;
  box-sizing: border-box;
  margin-top: 35rpx;
}
.commonItem image{
  width: 130rpx;
  height: 108rpx;
  margin-right: 30rpx;
}
.itemRight{
 /* flex: 100%; */            ----------在弹性盒子中慎用flex：100%；或者width:100%;
 width: 415rpx;
 height: 100%;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
}
.itemTitle{
  font-size:30rpx;
  word-break: keep-all;
  word-wrap: break-word;
  white-space:pre-line;
}
.itemFooter{
  font-size:24rpx;
}

在相对应的组件中（.wxml）使用模板：

<import src="../../../../template/listItem/listItem.wxml" />      -------------------用import方式(写相对路径)引入模板（include引入方式不适合这里）
<template is="listItem" data="{{...data}}"/>                         -------------------使用...可在模板中少写item,is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板

在相对应的组件中（.wxss）使用模板：

@import "../../../../template/listItem/listItem.wxss";