微信小程序学习笔记｜案例 3.10 文件引用 include 标签-育师

一、案例简介

本案例学习小程序include文件引入语法，把页面拆分成多个独立 wxml 片段（头部标题、正文、页脚、拓展阅读），实现代码复用。
课后扩展需求：增加两个按钮，控制拓展阅读内容的显示与隐藏。

二、项目目录结构

miniprogram ├─ files │ ├─ header.wxml // 文章标题片段 │ ├─ main.wxml // 文章主体内容片段 │ ├─ footer.wxml // 文章页脚日期片段 │ └─ expand.wxml // 拓展阅读片段（作业新增） ├─ pages/index │ ├─ index.js │ ├─ index.json │ ├─ index.wxml │ └─ index.wxss ├─ 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/expand.wxml（作业新增拓展阅读）

<!--expand.wxml 扩展阅读内容--> <view class="box expand-box"> <view class="main">拓展阅读：我国航天后续重大规划</view> <view class="main">1、天问三号火星采样返回任务</view> <view class="main">2、载人登月工程</view> <view class="main">3、大型空间基础设施建设</view> </view>

5、pages/index/index.wxml

<!--index.wxml--> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <include src="/files/header.wxml"></include> <include src="/files/main.wxml"></include> <include src="/files/footer.wxml"></include> </view> <!-- 按钮，点击控制拓展内容显示隐藏 --> <view class="btn-group"> <button bind:tap="showExpand">显示扩展内容</button> <button bind:tap="hideExpand">隐藏扩展内容</button> </view> <!-- wx:if 根据isShowExpand变量控制模块渲染 --> <view wx:if="{{isShowExpand}}"> <include src="/files/expand.wxml"></include> </view> </scroll-view>

6、pages/index/index.js

// index.js Page({ data:{ isShowExpand: false // 默认不展示拓展阅读 }, // 显示扩展内容 showExpand(){ this.setData({ isShowExpand:true }) }, // 隐藏扩展内容 hideExpand(){ this.setData({ isShowExpand:false }) } })

7、pages/index/index.wxss

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; background-color: #ffffff; } .scrollarea { flex: 1; background-color: #ffffff; } .btn-group { display: flex; margin: 20rpx; gap: 20rpx; } button { flex: 1; background-color: #07c160; color: white; }

8、app.wxss（全局样式）

/**app.wxss**/ .box { margin: 20rpx; padding: 20rpx; border: 6rpx solid #F4C2C8; } .header { text-align: center; margin: 20rpx; color: #1E40AF; font-size: 52rpx; font-weight: bold; } .main { font-size: 36rpx; text-indent: 2em; margin: 20rpx; line-height: 2em; text-align: justify; color: #475569; } .footer { margin-right: 30rpx; font-size: 36rpx; text-align: right; color: #475569; }

9、app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "文件引用", "backgroundColor": "#ffffff", "backgroundTextStyle": "light" }, "style": "v2", "renderer": "webview", "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

四、核心知识点

<include src="文件路径">

注意：include 只会拷贝标签，样式需要写在 app.wxss 全局或者当前页面 wxss。

作用：引入外部 wxml 文件，只复制 wxml 标签结构，不会引入 js、wxss；
适用场景：页面片段复用，比如文章头部、页脚，把大页面拆分成多个小文件，方便维护。

wx:if条件渲染
- 通过布尔变量isShowExpand控制整个模块是否渲染；
- true：渲染显示；false：直接从页面移除 DOM。
bind:tap点击事件 + setData
- bind:tap 绑定按钮点击；
- this.setData()修改 data 中的变量，驱动页面视图自动更新，小程序数据驱动的核心。