微信小程序（模板）

1.模板：

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板：

使用name属性，作为模板的名字。然后在内定义代码片段，如：

<template name="postItem">
    <view class="post-container">
      <view class="post-author-date">
        <image class="post-author" src="{{item.avatar}}">
        </image>
        <text class="post-date">{{item.date}}</text>
      </view>
    </view>
</template>

使用模板：

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<import src="post-item/post-item-template.wxml"/>
// 注意：在使用模板的时候应该首先用import来引入模板，然后再使用
<block wx:for="{{posts_key}}">
    <template is="postItem" data="{{item}}" />
    //模板的作用域：
    //模板拥有自己的作用域，只能使用data传入的数据。
</block>

同样在建立一个post-item-template.wxml模板的时候，同时也应该建立一个post-item-template.wxss文件来编写模板的样式，也应该在需要使用模板的文件夹下的wxss文件中使用@import “post-item/post-item-template.wxss”;来引入模板wxss样式文件。

2.在对加载进来的模板进行事件绑定的时候需要注意的是：
先看几段代码：

错误的事件绑定做法：

<block wx:for="{{posts_key}}" wx:key="{{index}}">
    <!--使用模板-->
    <template is="postItem" data="{{...item}}" catchtap="onPostTap" />
</block>

注意：因为此时的template模板并不存在于页面中，只是相当于一个占位符，在页面加载完成后就消失了，此处对template模板进行事件绑定并不会有任何的效果。

如图所示：

正确的事件绑定做法：

<block wx:for="{{posts_key}}" wx:key="{{index}}">
    <!--使用模板-->
    <view catchtap="onPostTap">
       <template is="postItem" data="{{...item}}" />
    </view>
  </block>

注意：这里我们可以在模板外面使用一个view标签来进行包裹，然后再view标签上进行事件绑定。就会达到我们所预期的效果。