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

在WeApp (微信小程序) 开发中，你可以创建一个基础的结构，通过`<import>`标签在index.wxml文件中引入外部模板文件header.wxml和footer.wxml。这有助于复用和管理页面结构。

首先，创建两个文件：

1. header.wxml:

<!-- header.wxml -->
<view class="header">
  <!-- 这里放置你的头部元素，如导航栏 -->
  <navigator url="/pages/index/index">头部标题</navigator>
</view>

2. footer.wxml:

<!-- footer.wxml -->
<view class="footer">
  <!-- 这里放置你的页脚元素，如版权信息 -->
  版权所有 &copy; 2023
</view>

接下来，在index.wxml中导入并包含这两个文件：

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

  <!-- 再次使用 include 引入尾部 -->
  <include src="footer.wxml" />
</view>

为了实现完整的样式布局，你需要在.wxss文件（如global.css）中定义`.header`, `.footer`, 和 `.container` 的样式，比如：

.header, .footer {
  position: fixed;
  height: 50px;
  line-height: 50px;
}

.container {
  margin-top: 100px; /* 避免头部和顶部内容重叠 */
}

记得要在项目的`app.json`配置文件中指定对应的文件路径，然后运行`wxrun`命令来预览和调试小程序。