编写一个小程序，在项目中添加文件header.wxml和footer.wxml，然后在index.wxml文件中利用include引用header.wxml和footer.wxml，作为index页面的头部和尾部内容。

在WeChat小程序的开发中，如果你想要在一个页面如index.wxml中复用相同的头部（header.wxml）和底部（footer.wxml）部分，你可以通过`<import>`标签或者`<block wx:if>`结构结合`<include>`来实现。这里是一个简单的示例：

首先，在`header.wxml`文件中定义头部结构：

<!-- header.wxml -->
<view class="header">
  <!-- 这里可以放置你的头像、标题等元素 -->
  <text>这是头部</text>
</view>

然后在`footer.wxml`文件中定义底部结构：

<!-- footer.wxml -->
<view class="footer">
  <!-- 这里可以放置页脚信息，如版权信息 -->
  <text>这是页脚</text>
</view>

接下来，在`index.wxml`文件中引入并使用这两个文件：

<!-- index.wxml -->
<view class="container">
  <!-- 使用 <include> 引入头部和尾部 -->
  <include src="header.wxml" />
  
  <!-- 主体内容区域 -->
  <view>这里是主体内容...</view>
  
  <!-- 使用 <include> 引入尾部 -->
  <include src="footer.wxml" wx:if="{{showFooter}}"></include>
</view>

<!-- 通过wx:if控制是否显示尾部，例如只有在需要展示的情况下才设置 showFooter 为 true -->
<button bindtap="toggleFooter">切换显示/隐藏页脚</button>
<script>
Page({
  data: {
    showFooter: false,
  },
  toggleFooter: function() {
    this.setData({
      showFooter: !this.data.showFooter
    });
  }
})
</script>

在这个例子中，当用户点击按钮时，`toggleFooter`方法会改变`showFooter`的状态，从而决定是否在index页面上显示footer。