微信小程序 --文件引用

发布时间：2026/10/24 4:06:36
微信小程序 --文件引用

摘要

在小程序项目开发中，会出现大量重复的页面片段。小程序提供include标签实现 WXML 文件引入，可以把页面的头部、正文、页脚拆分为独立 wxml 片段文件，在主页面使用 include 直接引入复用代码。本案例演示 include 文件引用基础用法，并完成作业扩展：新增扩展阅读片段文件，增加按钮实现显示 / 隐藏扩展阅读内容，掌握 include 引用与 wx:if 条件渲染的结合使用。

一、案例描述

基础功能：

  1. 将页面拆分为头部header.wxml、正文main.wxml、页脚footer.wxml三个独立片段文件。
  2. 在 index.wxml 使用<include src="路径">引入这三个片段，拼接成完整页面。
  3. 页面展示标题：2026 年重大科技进展、科技进展正文内容、底部日期，外层使用粉色边框大盒子包裹。

作业扩展功能：

  1. 新建扩展阅读片段文件extend.wxml，存放拓展阅读内容。
  2. 在主页面通过 include 引入该扩展片段。
  3. 添加两个按钮：【显示扩展内容】、【隐藏扩展内容】。
  4. 点击按钮，通过变量控制，实现扩展阅读区域显示与隐藏。

二、新建项目

打开微信开发者工具新建小程序项目：

  • 项目名称：文件引用
  • 后端服务：不使用云服务
  • 模板选择：不使用模板

在项目根目录新建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 class="header"> 2026 年重大科技进展 </view>

files/main.wxml

<!--main.wxml 正文片段--> <view class="main"> 天问二号小行星探测（2026.7）、轻舟试验飞船（2026.3.30发射）、地月双向高速激光通信验证（2026.8）、中国空间站常态化运营、九章四号光量子原型机（2026.5）、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 </view>

files/footer.wxml

<!--footer.wxml 页脚片段--> <view class="footer"> 2026年10月17日 </view>

files/extend.wxml（扩展阅读片段）

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

五、主界面

pages/index/index.wxml

<!--index.wxml--> <navigation-bar title="文件引用" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <include src="/files/header.wxml"/> <include src="/files/main.wxml"/> <include src="/files/footer.wxml"/> </view> <!--控制按钮区域--> <view class="btn-group"> <button bind:tap="showExtend">显示扩展内容</button> <button bind:tap="hideExtend">隐藏扩展内容</button> </view> <!--include引入扩展片段，wx:if控制整体显示隐藏--> <block wx:if="{{isShowExtend}}"> <include src="/files/extend.wxml"/> </block> </scroll-view>

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-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. 作业扩展实现思路

  1. 新建extend.wxml存放拓展阅读 HTML 结构；
  2. 使用<include>把片段引入页面；
  3. 外层套<block wx:if="{{isShowExtend}}">，通过布尔变量控制整个扩展片段显示、消失；
  4. 两个按钮绑定点击事件，修改isShowExtend布尔值，实现显示隐藏切换。

八、开发踩坑总结

  1. include 路径错误，片段不显示路径写错会导致片段完全不渲染，建议写绝对路径，以/开头。

  2. include 不引入 template 模板include 只能引入普通 view 标签片段，template 模板不能被 include 复制，如果需要引入模板要使用<import>标签。

  3. 扩展内容写在 block 里面，而不是写在 extend.wxml 内部

九、实验总结

本案例学习小程序include文件引用机制，将页面拆分为多个独立 WXML 片段，实现页面代码模块化复用。在此基础上结合条件渲染wx:if，完成扩展阅读内容的显示隐藏。include适合页面公共片段复用；import专门用于引入 template 模板，二者需要做好区分。模块化拆分可以提升代码可维护性，是小程序工程化开发的基础。