微信小程序开发入门（十六）

利用include引用 文件的方法

<!--pages/index/index.wxml-->
<include src='header.wxml'/> 
<view style='margin:20px;text-align:justify'>承德避暑山庄又名“承德离宫”或“热河行宫”，是世界文化遗产、国家AAAAA级旅游景区、全国重点文物保护单位、中国四大名园之一。山庄位于河北省承德市中心北部，武烈河西岸一带狭长的谷地上，是清代皇帝夏天避暑和处理政务的场所。避暑山庄是中国三大古建筑群之一，它的最大特色是山中有园，园中有山，大小建筑有120多组，其中康熙以四字组成36景，乾隆以三字组成36景，这就是山庄著名的72景。 
</view>
<include src='footer.wxml'/>

<!--pages/index/header.wxml-->
<view class='header'>
  <view>首页</view>
  <view>介绍</view>
  <view>天气</view>
  <view>交通</view>
  <view>美食</view>
  <view>景点</view> 
</view>

<!--pages/index/footer.wxml-->
<view class='footer' style='height:100px;'>
  版权所有 @开心每一天 丨 电话：0314-8888888
</view>

/* pages/index/index.wxss */
.header{
  margin: 20rpx;
  color: blue;
  font-size: 22px;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}
.footer{
  margin: 20rpx;
  font-size: 15px;
  text-align: center;
}

display: flex;#布局方式

flex-direction: row;#布局方向

justify-content: space-evenly;#一行平均分配间距，每个内容的间隔是平均分配的

中间内容是index.wxml中的内容

上边内容是通过include引用的header.wxml中的内容

最下边内容是通过include引用的footer.wxml内容

<view class='footer' style='height:100px;'>  height指版权所有一行文字到最下面的距离是100px，文本默认上对齐

include·引入的整个文件，import引入的模板

 

WXML提供两种文件引用方式：import 和 include。import只能引用文件中的template，而通过 include 可以引用文件中除了 <template/> 和<wxs/>之 外的整个代码，相当于将目标文件中的代码拷贝到 include 位置。