利用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 位置。