一、作业需求

1. 完成案例 3.10 文件引用基础案例，使用<include>引入拆分的页面片段（header、main、footer）
2. 功能扩展：
   • 新增扩展阅读页面片段，在index.wxml通过include引入
   • 添加两个按钮：【显示扩展内容】、【隐藏扩展内容】
   • 点击按钮控制拓展阅读区域显示 / 隐藏

技术要点：<include>文件引入、wx:if条件渲染、按钮 bindtap 事件、Page 数据绑定

二、项目目录结构

├── files │ ├─ header.wxml 头部标题片段 │ ├─ main.wxml 正文片段 │ ├─ footer.wxml 底部日期片段 │ └─ extend.wxml 新增拓展阅读片段 ├── pages │ └─ index │ ├─ index.wxml │ ├─ index.js │ ├─ index.json │ └─ index.wxss ├── components │ └─ navigation-bar 自定义导航栏组件 ├── app.js ├── app.json └── app.wxss 全局样式

三、全部源代码

1. files/header.wxml

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

2. files/main.wxml

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

3. files/footer.wxml

<!-- footer.wxml --> <view class="footer"> 2026年10月17日 </view>

4. files/extend.wxml（拓展阅读，新增文件）

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

5. pages/index/index.wxml

<!--index.wxml--> <navigation-bar title="文件引用" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <include src="/files/header"></include> <include src="/files/main"></include> <include src="/files/footer"></include> <!-- 控制扩展内容的按钮组 --> <view class="btn-group"> <button bindtap="showExtendContent">显示扩展内容</button> <button bindtap="hideExtendContent">隐藏扩展内容</button> </view> <!-- include引入拓展阅读片段 --> <include src="/files/extend"></include> </view> </scroll-view>

6. pages/index/index.js

Page({ data:{ showExtend:false // 默认隐藏扩展阅读 }, // 显示扩展内容 showExtendContent(){ this.setData({ showExtend:true }) }, // 隐藏扩展内容 hideExtendContent(){ this.setData({ showExtend:false }) } })

7. pages/index/index.json

{ "usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" } }

8. pages/index/index.wxss

.scrollarea { height: 100vh; }

9. app.wxss 全局样式

/**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; } .extend{ margin:20rpx; padding:20rpx; border:6rpx solid #F4C2C8; font-size:large; line-height:2em; color:#475569; } .btn-group{ display:flex; margin:20rpx; gap:20rpx; } .btn-group button{ background:#36b37e; color:#fff; }

四、代码说明

1. <include>：直接把目标 wxml 的全部代码拷贝嵌入当前页面，适合页面分块（头部、正文、底部、拓展阅读）；小程序中引入文件时可以省略.wxml后缀。
2. 状态控制：data中showExtend默认 false，拓展内容默认隐藏；wx:if="{{showExtend}}"根据变量判断是否渲染拓展阅读区块。
3. 按钮事件
   • bindtap="showExtendContent"：点击后执行setData，showExtend=true，显示拓展阅读
   • bindtap="hideExtendContent"：点击后showExtend=false，隐藏拓展阅读
4. 样式统一写在全局app.wxss，所有页面片段共用样式。

五、运行效果

1. 页面加载：显示标题、正文、日期、两个绿色按钮，拓展阅读区域隐藏
2. 点击【显示扩展内容】：下方加载拓展阅读板块，带粉色边框
3. 点击【隐藏扩展内容】：拓展阅读板块消失

六、易混知识点区分：include vs import

• <include>：直接复制全部 wxml 代码，不能识别 template，适合页面大块片段嵌入
• <import>：引入 template 模板，需要用<template is="名称"/>调用，适合复用自定义模板