微信小程序学习笔记｜案例 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 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/expand.wxml作业新增拓展阅读!--expand.wxml 扩展阅读内容-- view classbox expand-box view classmain拓展阅读我国航天后续重大规划/view view classmain1、天问三号火星采样返回任务/view view classmain2、载人登月工程/view view classmain3、大型空间基础设施建设/view /view5、pages/index/index.wxml!--index.wxml-- scroll-view classscrollarea scroll-y typelist view classbox include src/files/header.wxml/include include src/files/main.wxml/include include src/files/footer.wxml/include /view !-- 按钮点击控制拓展内容显示隐藏 -- view classbtn-group button bind:tapshowExpand显示扩展内容/button button bind:taphideExpand隐藏扩展内容/button /view !-- wx:if 根据isShowExpand变量控制模块渲染 -- view wx:if{{isShowExpand}} include src/files/expand.wxml/include /view /scroll-view6、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点击事件 setDatabind:tap 绑定按钮点击this.setData()修改 data 中的变量驱动页面视图自动更新小程序数据驱动的核心。五、运行效果页面顶部导航栏白底黑字标题文件引用粉色边框容器展示文章标题、正文、右下角日期下方两个绿色按钮【显示扩展内容】、【隐藏扩展内容】初始状态拓展阅读不显示点击显示拓展内容出现点击隐藏拓展内容消失。六、踩坑记录iPhone 刘海模拟器顶部出现黑块是模拟器机型效果切换为无刘海机型iPhone SE/iPhone8导航栏白底正常展示重复标题区分**原生导航标题app.json**和页面内自定义标题多余页面标题 view 直接删除include 路径写错会引入失败路径开头写/代表项目根目录。

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

相关推荐

和小马一起学Python（五）——字符串编码转换、字符串运算符、字符串常见内建函数

5个信号识别垃圾账号：anti-slop用户检查如何过滤AI slop贡献者

cursor-free-vip 使用教程：三步重置 Cursor 机器 ID，恢复 AI 助手试用额度

更多资讯

微信社群机器人开发指南：从协议解析到企业微信实战

金融AI安全治理：从成本中心到增长引擎的转型

互联网医院解决方案：在线问诊系统与AI智慧分诊开发

蒙特卡洛方法实战CartPole：从回报设计到策略改进的完整落地

微信社群机器人开发指南：从技术选型到合规实践

多模态大模型中的System 2认知架构与工程实践

今日更新

基于YOLOv11的石油泄漏智能检测系统开发实践

AI行业变局：合规、Mod化与上下文管理的实战启示

计算机视觉与AI原生应用融合的技术实践

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？