一、实验简介本案例学习小程序include文件引用机制把页面拆分为头部、正文、页脚、拓展阅读多个独立 wxml 片段在主页面通过include引入外部 wxml 文件。 基础功能展示 2026 年重大科技进展内容 作业扩展需求新建扩展阅读 wxml 片段使用 include 引入添加两个按钮实现显示扩展内容、隐藏扩展内容通过wx:if条件渲染控制拓展板块显示与隐藏。开发环境微信开发者工具不使用云服务不使用模板渲染引擎设置webview。项目目录结构文件引用 ├─files # 存放被include引入的wxml片段 │ ├─header.wxml │ ├─main.wxml │ ├─footer.wxml │ └─extend.wxml # 作业新增拓展阅读文件 ├─pages/index │ ├─index.js │ ├─index.json │ ├─index.wxml │ └─index.wxss ├─app.js ├─app.json └─app.wxss二、核心知识点1. include 文件引用include src/files/header/includeinclude会把目标 wxml 里面标签完整复制嵌入当前位置不会引入 template 模板、wxs 脚本只复制普通标签src 路径最前面写/代表项目根目录路径写错会引用失效。2. wx:if 条件渲染配合页面数据变量控制整块内容显示销毁。本案例将include包裹在block wx:if中实现整个拓展板块显示隐藏。3. bindtap 按钮点击事件按钮绑定bindtap触发 js 函数使用this.setData()修改页面变量驱动视图更新。三、完整代码实现1. app.json 全局配置{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. files/header.wxml!--header.wxml-- view classheader 2026 年重大科技进展 /view3. files/main.wxml!--main.wxml-- view classmain 天问二号小行星探测2026.7、轻舟试验飞船2026.3.30发射、地月双向高速激光通信验证2026.8、中国空间站常态化运营、九章四号光量子原型机2026.5、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 /view4. files/footer.wxml!--footer.wxml-- view classfooter 2026年10月17日 /view5. files/extend.wxml作业新增拓展阅读!--extend.wxml 扩展阅读内容-- view classbox main 拓展阅读我国航天后续重大规划 view1、天问三号火星采样返回任务/view view2、载人登月工程/view view3、大型空间基础设施建设/view /view6. 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 !-- 两个功能按钮 -- view styledisplay:flex;margin:20rpx;gap:20rpx; button typeprimary bindtapshowExt显示扩展内容/button button typeprimary bindtaphideExt隐藏扩展内容/button /view !-- 条件渲染控制扩展阅读是否显示 -- block wx:if{{showExtend}} include src/files/extend/include /block /scroll-view7. pages/index/index.jsPage({ data:{ showExtend:false // 默认隐藏扩展阅读 }, // 显示扩展内容 showExt(){ this.setData({ showExtend:true }) }, // 隐藏扩展内容 hideExt(){ this.setData({ showExtend:false }) } })8. pages/index/index.wxsspage { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; }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; }四、运行效果页面初始加载展示标题、科技进展正文、右下角日期拓展阅读板块默认隐藏点击【显示扩展内容】按钮页面下方加载并显示拓展阅读内容点击【隐藏扩展内容】按钮拓展阅读板块整体消失。五、踩坑与问题排查include 引用失效内容不显示src路径开头需要写/代表项目根目录文件存放位置必须是根目录files文件夹文件名大小写必须一致。样式全部失效复制 PPT 文档会带入中文全角横杠‑如navigation‑bar、font‑weight全部替换为英文键盘减号-。点击按钮没有反应 检查按钮绑定事件名bindtapshowExt和 js 里面函数名大小写完全一致。六、实验总结include适合页面片段拆分将头部、页脚、拓展内容抽离为独立文件实现代码复用。include只引入标签不引入模板与脚本模板复用使用import。可以把include放到block wx:if条件块内部实现引入片段整体显示隐藏。从 PPT、Word 复制代码极易带入看不见的特殊符号会造成 wxml/wxss 解析异常。