一、实验简介本案例学习小程序中include文件引用将页面拆分为头部、正文、页脚、扩展阅读多个独立 wxml 片段通过 include 标签引入复用。原始需求使用include引入外部 wxml 片段拆分页面为 header、main、footer。页面展示 2026 年重大科技进展粉色外边框标题居中、正文首行缩进、页脚居右显示日期。作业扩展需求新增扩展阅读片段extra.wxml同样使用 include 引入。添加两个按钮【显示扩展内容】、【隐藏扩展内容】通过条件渲染控制扩展阅读区域显示与隐藏。约束使用小程序系统原生导航栏禁止自定义 navigation‑bar 组件。二、项目目录结构文件引用 ├─ files # 存放被include引入的wxml片段 │ ├─ header.wxml │ ├─ main.wxml │ ├─ footer.wxml │ └─ extra.wxml # 作业新增扩展阅读片段 ├─ pages/index │ ├─ index.js │ ├─ index.json │ ├─ index.wxml │ └─ index.wxss ├─ app.json └─ app.wxss三、实现效果系统导航栏标题文件引用。粉色边框容器内部为标题、科技进展正文、右下角日期。下方两个并排按钮点击显示 / 隐藏拓展阅读板块。拓展阅读板块也是独立 wxml 文件由 include 引入wx:if 控制整体渲染销毁。四、app.json 全局配置移除自定义导航设置系统导航标题webview 渲染引擎。{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationBarTitleText: 文件引用 }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }五、被引用的碎片文件files/header.wxml头部标题片段view classheader 2026 年重大科技进展 /viewfiles/main.wxml正文片段view classmain 天问二号小行星探测2026.7、轻舟试验飞船2026.3.30发射、地月双向高速激光通信验证2026.8、中国空间站常态化运营、九章四号光量子原型机2026.5、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 /viewfiles/footer.wxml页脚日期片段view classfooter 2026年10月17日 /viewfiles/extra.wxml【作业新增扩展阅读片段】view classbox extra-box view classmain拓展阅读我国航天后续重大规划/view view classmain1、天问三号火星采样返回任务/view view classmain2、载人登月工程/view view classmain3、大型空间基础设施建设/view /view六、pages/index/index.wxml 主页面知识点include src/files/xxx.wxml引入外部 wxml 片段/代表项目根目录。按钮绑定bind:tap点击事件。block wx:if{{showExtraFlag}}条件渲染控制整块扩展内容显示隐藏。scroll-view classscrollarea scroll-y typelist view classbox include src/files/header.wxml/include include src/files/main.wxml/include include src/files/footer.wxml/include /view !-- 作业显示、隐藏扩展内容按钮组 -- view classbtn-group button bind:tapshowExtra显示扩展内容/button button bind:taphideExtra隐藏扩展内容/button /view !-- include引入扩展阅读wx:if控制是否渲染 -- block wx:if{{showExtraFlag}} include src/files/extra.wxml/include /block /scroll-view七、pages/index/index.js 页面逻辑Page({ data:{ // 扩展阅读默认隐藏 showExtraFlag: false }, // 显示扩展内容 showExtra(){ this.setData({ showExtraFlag:true }) }, // 隐藏扩展内容 hideExtra(){ this.setData({ showExtraFlag:false }) } })八、app.wxss 全局样式.box { margin: 20rpx; padding: 20rpx; border: 6rpx solid #F4C2C8; } .header { text-align: center; margin: 20rpx; color: #1E40AF; font-size: x‑large; font-weight: bolder; } .main { font-size: large; text‑indent: 2em; margin: 20rpx; line‑height: 2em; text‑align: justify; color: #475569; } .footer { margin‑right: 30rpx; font‑size: medium; text‑align: right; color: #475569; } .btn-group{ display:flex; margin:20rpx; gap:20rpx; } button{ flex:1; }九、pages/index/index.wxss 页面私有样式page { height: 100vh; display: flex; flex‑direction: column; } .scrollarea { flex: 1; overflow‑y: hidden; }十、pages/index/index.json{ }十一、核心知识点总结1. include 文件引用include src/files/header.wxml/includeinclude 的作用拷贝目标 wxml 的标签内容插入到当前位置。⚠️重要限制include只复制 wxml 标签不会复制 js、wxss、template 模板、wxs 脚本。样式需要写在全局 app.wxss 或者页面 wxss。路径写法以/开头代表小程序项目根目录避免相对路径../容易出错。2. 作业扩展实现思路新建独立extra.wxml存放拓展阅读 html 结构在 index.wxml 用include把片段引入外层套block wx:if{{showExtraFlag}}布尔变量控制整个片段渲染销毁两个按钮绑定 tap 事件调用setData修改布尔值实现显示隐藏。wx:if{{false}}直接销毁内部所有节点不是简单 css 隐藏。3. include 和 import 的简单区分include复制 wxml 完整内容用于拆分页面片段。import引入 template 模板只使用定义好的模板不会复制全部内容。