案例 3.10 文件引用（include 引入页面片段 + 扩展内容显隐）

一、作业需求完成案例 3.10 文件引用基础案例使用include引入拆分的页面片段header、main、footer功能扩展新增扩展阅读页面片段在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 classheader 2026 年重大科技进展 /view2. files/main.wxml!-- main.wxml -- view classmain 天问二号小行星探测2026.7、轻舟试验飞船2026.3.30 发射、地月双向高速激光通信验证2026.8、中国空间站常态化运营、九章四号光量子原型机2026.5、AI 辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 /view3. files/footer.wxml!-- footer.wxml -- view classfooter 2026年10月17日 /view4. files/extend.wxml拓展阅读新增文件!-- extend.wxml -- view classextend wx:if{{showExtend}} 拓展阅读我国航天后续重大规划 br/ 1、天问三号火星采样返回任务 br/ 2、载人登月工程 br/ 3、大型空间基础设施建设 /view5. pages/index/index.wxml!--index.wxml-- navigation-bar title文件引用 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox include src/files/header/include include src/files/main/include include src/files/footer/include !-- 控制扩展内容的按钮组 -- view classbtn-group button bindtapshowExtendContent显示扩展内容/button button bindtaphideExtendContent隐藏扩展内容/button /view !-- include引入拓展阅读片段 -- include src/files/extend/include /view /scroll-view6. pages/index/index.jsPage({ 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; }四、代码说明include直接把目标 wxml 的全部代码拷贝嵌入当前页面适合页面分块头部、正文、底部、拓展阅读小程序中引入文件时可以省略.wxml后缀。状态控制data中showExtend默认 false拓展内容默认隐藏wx:if{{showExtend}}根据变量判断是否渲染拓展阅读区块。按钮事件bindtapshowExtendContent点击后执行setDatashowExtendtrue显示拓展阅读bindtaphideExtendContent点击后showExtendfalse隐藏拓展阅读样式统一写在全局app.wxss所有页面片段共用样式。五、运行效果页面加载显示标题、正文、日期、两个绿色按钮拓展阅读区域隐藏点击【显示扩展内容】下方加载拓展阅读板块带粉色边框点击【隐藏扩展内容】拓展阅读板块消失六、易混知识点区分include vs importinclude直接复制全部 wxml 代码不能识别 template适合页面大块片段嵌入import引入 template 模板需要用template is名称/调用适合复用自定义模板