微信小程序 include 文件引用实战：实现可显隐拓展阅读模块

发布时间：2026/10/24 4:06:36

摘要

在微信小程序开发中，include是 WXML 提供的文件引用方式，可以把公共的页面片段抽离为独立 wxml 文件，在页面中引入复用，减少代码冗余。本文基于案例 3.10 文件引用，完成基础页面搭建，并完成作业扩展：新增拓展阅读模块，通过两个按钮实现拓展内容的显示与隐藏。

开发环境：微信开发者工具，不使用云服务，不使用模板，webview 渲染引擎

一、项目需求

使用include标签引入拆分好的头部、正文、底部 wxml 片段，渲染文章页面
页面外层粉色边框，标题蓝色加粗，正文、页脚排版对齐案例效果图
作业扩展：
- 新建拓展阅读片段文件，使用 include 引入到主页面
- 设置两个按钮：显示扩展内容、隐藏扩展内容，控制拓展模块的显示隐藏

二、项目目录结构

文件引用 ├─ files │ ├─ header.wxml │ ├─ main.wxml │ ├─ footer.wxml │ └─ extend.wxml ├─ pages/index │ ├─ index.js │ ├─ index.json │ ├─ index.wxml │ └─ index.wxss ├─ app.json └─ app.wxss

三、实现步骤

1. 新建小程序项目

打开微信开发者工具，新建项目，项目名称：文件引用

后端服务：不使用云服务
模板选择：不使用模板
填入自己的 AppID，点击创建。

在项目根目录新建files文件夹，在文件夹下创建 4 个 wxml 片段文件：header.wxml、main.wxml、footer.wxml、extend.wxml。

files/header.wxml

<view class="header">2026 年重大科技进展</view>

files/main.wxml

<view class="main"> 天问二号小行星探测（2026.7）、轻舟试验飞船（2026.3.30发射）、地月双向高速激光通信验证（2026.8）、中国空间站常态化运营、九章四号光量子原型机（2026.5）、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 </view>

files/footer.wxml

<view class="footer">2026年10月17日</view>

files/extend.wxml

<view class="extend"> <view class="extendTitle">拓展阅读：我国航天后续重大规划</view> <view>1、天问三号火星采样返回任务</view> <view>2、载人登月工程</view> <view>3、大型空间基础设施建设</view> </view>

2. 全局配置 app.json

设置渲染引擎为 webview，配置页面基础参数

{ "pages":[ "pages/index/index" ], "window":{ "navigationBarTextStyle":"black" }, "style":"v2", "renderer":"webview", "componentFramework":"glass-easel", "sitemapLocation":"sitemap.json", "lazyCodeLoading":"requiredComponents" }

3. 页面配置 index.json

设置导航栏标题

{ "navigationBarTitleText":"文件引用" }

4. 页面结构 index.wxml

使用include引入外部片段文件；wx:if结合数据变量控制拓展模块显隐；绑定按钮点击事件。

<view class="container"> <view class="contentBox"> <include src="/files/header"></include> <include src="/files/main"></include> <include src="/files/footer"></include> </view> <view class="btnWrap"> <button bindtap="onShowExtend">显示扩展内容</button> <button bindtap="onHideExtend">隐藏扩展内容</button> </view> <view class="contentBox" wx:if="{{showExtend}}"> <include src="/files/extend"></include> </view> </view>

知识点：<include src="路径">只会复制 wxml 的标签内容，不会复制模板、wxs，适合页面片段复用。

5. 页面逻辑 index.js

定义控制显示隐藏的布尔变量，两个点击事件修改变量，通过setData驱动页面更新。

Page({ data:{ showExtend:true }, onShowExtend(){ this.setData({ showExtend:true }) }, onHideExtend(){ this.setData({ showExtend:false }) } })

6. 页面样式 index.wxss

盒子边框、按钮布局、拓展阅读标题样式

.container{ padding:20rpx; } .btnWrap{ display:flex; gap:20rpx; margin:20rpx 0; } button{ flex:1; background-color:#39c55a; color:#ffffff; } button::after{ border:none; } .contentBox{ border:4rpx solid #f4b8c2; padding:20rpx; } .extendTitle{ font-size:32rpx; font-weight:bold; color:#1E40AF; margin-bottom:10rpx; }

7. 全局样式 app.wxss

统一设置头部标题、正文、页脚的字体大小与颜色。

page{ background:#fff; } .header{ font-size:36rpx; font-weight:bold; color:#1E40AF; text-align:center; margin-bottom:20rpx; } .main{ font-size:28rpx; line-height:1.8em; color:#333; } .footer{ text-align:right; font-size:28rpx; margin-top:20rpx; color:#333; } .extend{ font-size:28rpx; line-height:1.8em; color:#333; }

四、核心知识点讲解

include 文件引用将页面公共部分抽离成独立 wxml，在页面中使用<include src="文件路径"/>引入，实现代码复用，便于后期维护修改。
wx:if 条件渲染实现显隐wx:if="{{showExtend}}"，当showExtend为 true 渲染模块，false 销毁模块。点击按钮调用事件函数，setData修改 data 中的布尔值，实现页面动态效果。
Flex 布局按钮display:flex，flex:1让两个按钮平分宽度，gap 设置按钮之间间距，去除 button 自带的边框伪元素。
盒子边框样式contentBox统一设置粉色边框，主内容块和拓展阅读块共用一套盒子样式，视觉效果统一。

五、运行效果

页面加载完成，展示带粉色边框的文章主体，下方两个绿色按钮，拓展阅读模块默认显示。

点击【隐藏扩展内容】：拓展阅读模块直接消失。
点击【显示扩展内容】：拓展阅读模块重新渲染展示。

六、踩坑记录

include 路径错误：路径必须以/开头，代表项目根目录，写相对路径容易引入失败。
按钮自带灰色边框：小程序 button 组件默认有 after 伪元素，设置button::after{border:none;}清除默认边框。
样式不生效：include 只会引入 wxml 标签，样式不会跟着 include 带入，样式需要写在 app.wxss 或者当前页面 wxss。
自定义导航组件报错：案例自带 navigation‑bar 是自定义组件，新建空白项目没有该组件，直接删除，改用原生导航栏。

七、总结

include是小程序很实用的页面复用手段，适合头部、底部、公告、文章片段这类 UI 片段。本案例结合条件渲染，实现点击按钮控制模块显示隐藏，把文件复用和交互结合起来。还可以继续拓展：使用import模板引用，对比 include 与 import 的区别；增加更多拓展片段，实现切换不同阅读内容。