企业官网建设流程全解析

1. 案例背景

在微信小程序开发中，随着页面结构越来越复杂，我们经常需要把一些公共的、可复用的页面片段抽取出来，避免在多个页面中重复编写相同的 WXML 代码。include就是微信小程序提供的一种文件引用方式，它允许我们将一个 WXML 文件的内容嵌入到另一个 WXML 文件的指定位置，从而实现代码的复用与模块化管理。

本案例（案例3.10）将带领大家从零开始，设计一个小程序，演示如何利用include进行文件引用。通过本案例，你将掌握 include 的基本用法、文件组织方式，以及如何结合按钮实现内容的显示与隐藏。

2. 实现效果预览

在开始编码之前，我们先明确最终要实现的效果：

• 新建一个不使用云服务、不使用模板的小程序项目。
• 在小程序根目录下新建files文件夹，并在其中创建header.wxml、main.wxml、footer.wxml三个文件。
• 分别编写这三个文件的内容，然后在index.wxml中通过include标签将它们引入。
• 修改app.json，使用 WebView 渲染引擎。
• 修改app.wxss，为页面添加基础样式。
• 功能扩展：增加一个包含扩展阅读内容的页面，并在index.wxml中用include引入；同时增加「显示扩展内容」和「隐藏扩展内容」两个按钮，实现内容的切换显示。

3. 新建项目与文件夹结构

首先，打开微信开发者工具，新建一个项目。注意：本案例不需要使用云服务，也不需要选择模板，直接创建一个空白的小程序项目即可。

项目创建完成后，我们需要规划好文件目录结构。在小程序根目录下新建一个files文件夹，并在该文件夹下创建三个文件：

项目根目录/ ├── app.js ├── app.json ├── app.wxss ├── project.config.json ├── pages/ │ └── index/ │ ├── index.js │ ├── index.json │ ├── index.wxml │ └── index.wxss └── files/ ├── header.wxml ├── main.wxml └── footer.wxml

其中，files文件夹用于存放被引用的公共文件片段，这样可以让主页面文件保持简洁，也便于后续维护和复用。

4. 编写被引用的 WXML 文件

接下来，我们分别编写files文件夹下的三个文件。这三个文件将作为公共片段，被index.wxml通过include引入。

4.1 编写 header.wxml

header.wxml用于定义页面的头部区域，这里我们简单放置一个标题文本：

<view class="header"> <text>这是页面头部（header）</text> </view>

4.2 编写 main.wxml

main.wxml用于定义页面的主体内容区域：

<view class="main"> <text>这是页面主体内容（main）</text> </view>

4.3 编写 footer.wxml

footer.wxml用于定义页面的底部区域：

<view class="footer"> <text>这是页面底部（footer）</text> </view>

5. 修改 index.wxml 使用 include 引入

完成上述三个文件的编写后，我们需要在index.wxml中通过include标签将它们引入到对应位置。这里需要特别注意的是：使用include可以嵌入其他文件内容到当前位置，但定义的模板和 WXS 模块不会被嵌入。

<view class="container"> <include src="/files/header.wxml" /> <include src="/files/main.wxml" /> <include src="/files/footer.wxml" /> </view>

通过以上代码，header.wxml、main.wxml、footer.wxml的内容就会依次嵌入到index.wxml的对应位置，从而完成页面的组装。

6. 修改 app.json 与 app.wxss

6.1 修改 app.json

为了让小程序使用 WebView 渲染引擎，我们需要在app.json中进行相应配置。在app.json中添加或修改如下配置项：

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "文件引用案例", "renderer": "webview" } }

其中，"renderer": "webview"表示使用 WebView 渲染引擎来渲染页面。

6.2 修改 app.wxss

为了让页面看起来更美观，我们在app.wxss中为各个区域添加基础样式：

.container { display: flex; flex-direction: column; min-height: 100vh; } .header { background-color: #4a90d9; color: #ffffff; padding: 20rpx; text-align: center; } .main { flex: 1; background-color: #f5f5f5; padding: 20rpx; text-align: center; } .footer { background-color: #333333; color: #ffffff; padding: 20rpx; text-align: center; }

7. 功能扩展：显示与隐藏扩展内容

基础功能已经完成，接下来我们进行功能扩展。扩展目标有两个：

• 再做一个包括扩展阅读内容的页面，并且在index.wxml中用include引入该扩展页面。
• 增加两个按钮：「显示扩展内容」和「隐藏扩展内容」。点击「隐藏扩展内容」按钮，则隐藏扩展内容；点击「显示扩展内容」按钮，则显示扩展内容。

7.1 创建扩展内容文件

在files文件夹下新建一个extra.wxml文件，用于存放扩展阅读内容：

<view class="extra"> <text>这里是扩展阅读内容，可以放置更多详细的说明或参考资料。</text> </view>

7.2 修改 index.wxml 增加按钮与扩展内容

接下来，修改index.wxml，增加两个按钮，并通过include引入扩展内容文件。同时，我们需要给扩展内容区域添加一个条件判断，用于控制其显示与隐藏：

<view class="container"> <include src="/files/header.wxml" /> <include src="/files/main.wxml" /> <view class="btn-group"> <button bindtap="showExtra">显示扩展内容</button> <button bindtap="hideExtra">隐藏扩展内容</button> </view> <view wx:if="{{showExtraContent}}"> <include src="/files/extra.wxml" /> </view> <include src="/files/footer.wxml" /> </view>

7.3 修改 index.js 实现显示与隐藏逻辑

最后，我们需要在index.js中定义showExtra和hideExtra两个方法，并初始化showExtraContent数据：

Page({ data: { showExtraContent: false }, showExtra() { this.setData({ showExtraContent: true }); }, hideExtra() { this.setData({ showExtraContent: false }); } });

这样，当用户点击「显示扩展内容」按钮时，showExtraContent变为true，扩展内容区域通过wx:if条件渲染显示出来；点击「隐藏扩展内容」按钮时，showExtraContent变为false，扩展内容被隐藏。

8. 完整代码汇总

为了方便大家对照学习，这里将本案例涉及的关键文件完整代码汇总如下。

8.1 files/header.wxml

<view class="header"> <text>这是页面头部（header）</text> </view>

8.2 files/main.wxml

<view class="main"> <text>这是页面主体内容（main）</text> </view>

8.3 files/footer.wxml

<view class="footer"> <text>这是页面底部（footer）</text> </view>

8.4 files/extra.wxml

<view class="extra"> <text>这里是扩展阅读内容，可以放置更多详细的说明或参考资料。</text> </view>

8.5 index.wxml

<view class="container"> <include src="/files/header.wxml" /> <include src="/files/main.wxml" /> <view class="btn-group"> <button bindtap="showExtra">显示扩展内容</button> <button bindtap="hideExtra">隐藏扩展内容</button> </view> <view wx:if="{{showExtraContent}}"> <include src="/files/extra.wxml" /> </view> <include src="/files/footer.wxml" /> </view>

8.6 index.js

Page({ data: { showExtraContent: false }, showExtra() { this.setData({ showExtraContent: true }); }, hideExtra() { this.setData({ showExtraContent: false }); } });

8.7 app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTitleText": "文件引用案例", "renderer": "webview" } }

8.8 app.wxss

.container { display: flex; flex-direction: column; min-height: 100vh; } .header { background-color: #4a90d9; color: #ffffff; padding: 20rpx; text-align: center; } .main { flex: 1; background-color: #f5f5f5; padding: 20rpx; text-align: center; } .footer { background-color: #333333; color: #ffffff; padding: 20rpx; text-align: center; } .btn-group { display: flex; justify-content: space-around; padding: 20rpx; } .extra { background-color: #fff3cd; padding: 20rpx; text-align: center; border: 1rpx solid #ffc107; }

9. 总结

通过本案例，我们完整地学习了微信小程序中include文件引用的使用方法。总结要点如下：

• include 的作用：将一个 WXML 文件的内容嵌入到另一个 WXML 文件的指定位置，实现代码复用。
• 文件组织：将公共片段放在独立的文件夹（如files）中，便于管理和复用。
• 注意事项：include只会嵌入文件内容，文件中定义的模板（template）和 WXS 模块不会被嵌入。
• 功能扩展：通过wx:if条件渲染和按钮事件，可以灵活控制扩展内容的显示与隐藏，提升页面的交互性。

掌握了include的用法之后，你就可以在真实项目中灵活拆分公共页面片段，让代码更加清晰、易维护。建议读者动手实践一遍，并在此基础上尝试更多扩展，比如将头部、底部等公共区域抽取为独立文件，在多个页面中复用。