《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（5）

《智能前端技术与实践》——第 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