《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（4）: https://developer.aliyun.com/article/1228014?groupCode=tech_library
5．引用
在 wxml 文件中，开发者除直接编写组件本身的代码外，还 可以引用其他页面文件。这样，我们就可以将一些常用的 WXML 代码放在一个公共的文件中，当某个页面需要的时候，直接导入 即可。小程序提供了两种导入 wxml 文件的方式。
首先，我们使用第一种方法。如果被引用的文件中定义了模板 代码，则需要使用导入（import）方式进行引用。我们在 item.wxml 中定义了一个叫 item 的 template，导入方法如代码清单 2-46 所示。
代码清单 2-46
<!-- item.wxml --><templatename="item"><text>{{text}}</text></template>
然后，我们在 index.wxml 中引用 item.wxml，并将模板需要使用的数据传入，即可使用定 义的 item 模板，如代码清单 2-47 所示。
代码清单 2-47
<importsrc="item.wxml"/><templateis="item"data="{{text: 'forbar'}}"/>
注意，导入涉及作用域的概念，即只会导入目标文件中定义的 template，而不会导入目标 文件又使用导入方式引用的文件模板。
接下来，我们使用第二种方式，即通过 include 方式引用。该方式可用于将目标文件 除模板定义之外的其他代码全部导入，相当于复制到 include 的位置。我们分别定义了 3 个 wxml 文件—index.wxml、header.wxml 和 footer.wxml，它们分别如代码清单 2-48、 代码清单 2-49、代码清单 2-50 所示。
代码清单 2-48
<!-- index.wxml --><includesrc="header.wxml"/><view> body </view><includesrc="footer.wxml"/>
代码清单 2-49
<!-- header.wxml --><view> header </view>
代码清单 2-50
<!-- footer.wxml --><view> footer </view>
上述 3 段代码的运行结果如下所示。
<view> header </view><view> body </view><view> footer </view>
最后，介绍 WXML 中常用的几个组件。
view 组件为微信小程序的视图容器，代码清单 2-51 即为 wxml 文件中的代码。
代码清单 2-51
<viewclass="container"><viewclass="title"><text>作者介绍（石璞东）</text></view><viewclass="content"><view>1. hahaWebsite 网站站长；</view><view>2. hahaCoder 微信公众号号主；</view><view>3. hahaAI 微信小程序开发者；</view><view>4. hahaOCR 插件开发者；</view></view></view>
代码清单 2-52 即为 wxss 文件中的代码。
代码清单 2-52
/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx0; box-sizing: border-box; } .title{ font-size: 50rpx; font-weight: bold; } .content{ margin-top: 20rpx; } .contentview{ margin-top: 10rpx; }
代码清单 2-51 和代码清单 2-52 的运行结果如图 2-44 所示。
mage 组件属于微信小程序的媒体组件。image 组件可用于在微信小程序页面中嵌入一张 图片，支持 JPG、PNG、SVG、WEBP、GIF 等格式，从基础库 2.3.0 起开始支持云文件 ID。 该组件的常用属性如表 2-10 所示。
示例代码如代码清单 2-53 所示。
代码清单 2-53
<viewclass="container"><viewclass="title"><text>作者介绍（石璞东）</text></view><viewclass="content"><view>1. hahaWebsite 网站站长；</view><view>2. hahaCoder 微信公众号号主；</view><view>3. hahaAI 微信小程序开发者；</view><view>4. hahaOCR 插件开发者；</view></view><viewclass="img"><imagesrc="../../image/author.jpg"></image></view></view>
运行结果如图 2-45 所示。
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（6）: https://developer.aliyun.com/article/1227991?groupCode=tech_library
