摘要在小程序项目开发中会出现大量重复的页面片段。小程序提供include标签实现 WXML 文件引入可以把页面的头部、正文、页脚拆分为独立 wxml 片段文件在主页面使用 include 直接引入复用代码。本案例演示 include 文件引用基础用法并完成作业扩展新增扩展阅读片段文件增加按钮实现显示 / 隐藏扩展阅读内容掌握 include 引用与 wx:if 条件渲染的结合使用。一、案例描述基础功能将页面拆分为头部header.wxml、正文main.wxml、页脚footer.wxml三个独立片段文件。在 index.wxml 使用include src路径引入这三个片段拼接成完整页面。页面展示标题2026 年重大科技进展、科技进展正文内容、底部日期外层使用粉色边框大盒子包裹。作业扩展功能新建扩展阅读片段文件extend.wxml存放拓展阅读内容。在主页面通过 include 引入该扩展片段。添加两个按钮【显示扩展内容】、【隐藏扩展内容】。点击按钮通过变量控制实现扩展阅读区域显示与隐藏。二、新建项目打开微信开发者工具新建小程序项目项目名称文件引用后端服务不使用云服务模板选择不使用模板在项目根目录新建files文件夹文件夹内创建 4 个 wxml 片段文件header.wxml、main.wxml、footer.wxml、extend.wxml三、项目配置文件app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: skyline, rendererOptions: { skyline: { defaultDisplayBlock: true, defaultContentBox: true, tagNameStyleIsolation: legacy, disableABTest: true, sdkVersionBegin: 3.0.0, sdkVersionEnd: 15.255.255 } }, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }四、files 目录下各个片段文件代码files/header.wxml!--header.wxml 头部片段-- view classheader 2026 年重大科技进展 /viewfiles/main.wxml!--main.wxml 正文片段-- view classmain 天问二号小行星探测2026.7、轻舟试验飞船2026.3.30发射、地月双向高速激光通信验证2026.8、中国空间站常态化运营、九章四号光量子原型机2026.5、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 /viewfiles/footer.wxml!--footer.wxml 页脚片段-- view classfooter 2026年10月17日 /viewfiles/extend.wxml扩展阅读片段!--extend.wxml 拓展阅读片段-- view classbox extend-box view拓展阅读我国航天后续重大规划/view view1、天问三号火星采样返回任务/view view2、载人登月工程/view view3、大型空间基础设施建设/view /view五、主界面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.wxml/ include src/files/main.wxml/ include src/files/footer.wxml/ /view !--控制按钮区域-- view classbtn-group button bind:tapshowExtend显示扩展内容/button button bind:taphideExtend隐藏扩展内容/button /view !--include引入扩展片段wx:if控制整体显示隐藏-- block wx:if{{isShowExtend}} include src/files/extend.wxml/ /block /scroll-viewapp.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-box{ margin-top:20rpx; } .btn-group{ display:flex; gap:20rpx; margin:20rpx; } button{ flex:1; background-color:#39c5bb; color:#fff; }pages/index/index.wxss/**index.wxss**/ page { height: 100vh; display: flex; flex‑direction: column; } .scrollarea { flex: 1; }index.js// index.js Page({ data:{ //控制扩展阅读是否显示初始默认隐藏 isShowExtend:false }, //显示扩展内容 showExtend(){ this.setData({ isShowExtend:true }) }, //隐藏扩展内容 hideExtend(){ this.setData({ isShowExtend:false }) } })六、结果显示初始界面显示扩展内容七、知识点解析1. 文件引用include src文件路径/作用把目标 WXML 片段完整拷贝粘贴到当前位置注意不会复制模板 template、wxs 代码只会复制普通标签内容路径写法使用绝对路径/files/xxx.wxml避免相对路径出错。2. 文件拆分思想将页面的头部、正文、页脚拆分成独立 wxml 片段多个页面可以重复 include 引入实现代码复用减少重复代码。3. 作业扩展实现思路新建extend.wxml存放拓展阅读 HTML 结构使用include把片段引入页面外层套block wx:if{{isShowExtend}}通过布尔变量控制整个扩展片段显示、消失两个按钮绑定点击事件修改isShowExtend布尔值实现显示隐藏切换。八、开发踩坑总结include 路径错误片段不显示路径写错会导致片段完全不渲染建议写绝对路径以/开头。include 不引入 template 模板include 只能引入普通 view 标签片段template 模板不能被 include 复制如果需要引入模板要使用import标签。扩展内容写在 block 里面而不是写在 extend.wxml 内部九、实验总结本案例学习小程序include文件引用机制将页面拆分为多个独立 WXML 片段实现页面代码模块化复用。在此基础上结合条件渲染wx:if完成扩展阅读内容的显示隐藏。include适合页面公共片段复用import专门用于引入 template 模板二者需要做好区分。模块化拆分可以提升代码可维护性是小程序工程化开发的基础。