文件引用实践-北京尧图网络

前言在真实项目中一个页面的 WXML 往往会越写越长。如果所有结构都堆在一个文件里维护起来会很痛苦。小程序的 WXML 提供了把公共片段拆成独立文件、再在页面里引用的能力本篇就用一个科技进展简报页面来演示include的用法。项目结构text├── app.js ├── app.json ├── app.wxss ├── sitemap.json ├── components/ │ └── navigation-bar/ # 自定义导航栏复用之前项目 ├── files/ # WXML 片段目录 │ ├── header.wxml │ ├── main.wxml │ ├── footer.wxml │ ├── extend.wxml │ └── expand.wxml └── pages/ └── index/ ├── index.js ├── index.json ├── index.wxml └── index.wxss我把所有可复用的 WXML 片段统一放在files/目录下页面通过include src/files/xxx.wxml引入。注意路径以/开头表示从项目根目录算起。一、页面逻辑index.jsjavascriptPage({ data: { // 控制扩展阅读是否显示初始默认隐藏 isShowExtend: false }, // 显示扩展内容 showExtend() { this.setData({ isShowExtend: true }) }, // 隐藏扩展内容 hideExtend() { this.setData({ isShowExtend: false }) } })逻辑非常直白一个布尔开关isShowExtend两个按钮分别把它置为true/false。二、页面结构index.wxmlxmlnavigation-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 block wx:if{{isShowExtend}} include src/files/extend.wxml/ /block /scroll-view这里的关键写法头部、正文、页脚三个片段用三个include依次拼接整段结构清晰得像搭积木。扩展阅读片段包在block wx:if{{isShowExtend}}里实现按钮控制显示/隐藏。注意include是自闭合标签src属性指向 WXML 文件路径。三、各个片段文件头部片段header.wxmlxml!--header.wxml 头部片段-- view classheader 2026 年重大科技进展 /view正文片段main.wxmlxml!--main.wxml 正文片段-- view classmain 天问二号小行星探测2026.7、轻舟试验飞船2026.3.30发射、地月双向高速激光通信验证2026.8、中国空间站常态化运营、九章四号光量子原型机2026.5、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 /view页脚片段footer.wxmlxml!--footer.wxml 页脚片段-- view classfooter 2026年10月17日 /view扩展阅读片段extend.wxmlxml!--extend.wxml 拓展阅读片段-- view classbox extend-box view拓展阅读我国航天后续重大规划/view view1、天问三号火星采样返回任务/view view2、载人登月工程/view view3、大型空间基础设施建设/view /view另一个扩展片段expand.wxmlxml!-- expand.wxml -- view classexpand wx:if{{showExpand}} view拓展阅读我国航天后续重大规划/view view1、天问三号火星采样返回任务/view view2、载人登月工程/view view3、大型空间基础设施建设/view /view注意extend.wxml和expand.wxml内容几乎一样区别是前者由页面层的wx:if控制显示后者自己内部带wx:if{{showExpand}}。这个对比很有教学意义后面会展开讲。四、样式app.wxss全局css.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; }几个值得说的点font-size: x-large/large/medium这些都是 CSS 关键字字号比写死px更语义化配合rpx体系也能自适应。.main的text-indent: 2em实现中文段落首行缩进两个字符是很标准的中文排版写法。text-align: justify两端对齐正文观感更整齐。.btn-group的 flex gap两个按钮并排、等宽flex: 1且有间距比用margin互推干净得多。主题色#39c5bb初音绿蓝绿色清新好看。index.wxss页面级csspage { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; }老规矩page撑满全屏 flex 布局scroll-view用flex: 1撑满剩余高度保证内容可滚动。五、核心知识点include 到底怎么工作include是整体替换include srcxxx.wxml/的语义是把目标文件的全部内容除template/wxs之外原样替换到这个位置。所以xmlview classbox include src/files/header.wxml/ ... /view编译后等价于xmlview classbox view classheader2026 年重大科技进展/view ... /view片段里的classheader会直接参与页面样式计算所以app.wxss里的.header能正常生效。样式是跟着类名走的不跟着文件走这是理解 include 的关键。include 与 import 的区别这是面试和实战中常被问到的对比对比项includeimport引入内容整个文件的内容除 template/wxs只引入目标文件中定义的template使用方式直接展开到当前位置需要用template isxxx/调用适用场景静态片段拼接如页头页脚可复用、可传参的模板片段作用域共享页面数据模板有自己的数据作用域简单记include是贴进来import是导入模板定义。本文演示的是include适合头部/正文/页脚这种纯静态或共享页面数据的场景。src路径的写法/files/header.wxml以/开头从项目根目录算起最稳妥推荐使用。相对路径如../../files/header.wxml也可以但容易数错层级不建议。六、一个有意思的对比wx:if 放页面还是放片段项目里有两个几乎一样的片段正好拿来对比方案 Aextend.wxml推荐条件放在页面层xmlblock wx:if{{isShowExtend}} include src/files/extend.wxml/ /block片段文件是傻瓜式的纯结构谁引用都能直接用。控制逻辑集中在一个地方好排查。方案 Bexpand.wxml条件写在片段内部xmlview classexpand wx:if{{showExpand}}.../view片段自带显示逻辑但要求引用它的页面必须提供showExpand这个 data 字段否则wx:if会因变量未定义而永远为假导致内容不显示。片段与页面数据产生了隐式耦合复用性变差。结论纯展示型片段尽量保持无状态把wx:if这类控制逻辑留在页面层只有片段确实需要自管理显示逻辑时才把条件写进去。这个原则在拆分 WXML 时非常实用。七、踩坑记录1. include 不会引入template和wxs如果片段文件里写了template或wxsinclude会忽略它们。需要复用模板的话请改用import。2. 片段里的变量来自引用它的页面include进来的片段没有独立数据作用域它用到的{{xxx}}都从当前页面的 data 里取。所以像方案 B 那样在片段里写wx:if{{showExpand}}页面就必须有showExpand这个字段。3.scroll-view里放 include 没问题但要注意结构scroll-view只对直接子节点做滚动布局。本例中所有内容包括 include 进来的片段都在scroll-view内整体滚动正常。但如果把 include 放在scroll-view外面的兄弟位置就要重新考虑滚动区域的划分了。4. 类名冲突要留意因为 include 是贴进来的片段里的类名会和页面、其他片段共享同一个样式作用域。所以片段里的类名最好带点前缀或语义避免和别处冲突。本例用.header/.main/.footer/.extend-box语义清晰且互不干扰。5.font-size: x-large在小程序里能用虽然一些资料说小程序对部分 CSS 关键字支持有限但x-large/large/medium在 WebView 渲染下实测可用本项目renderer为skyline但相关字号关键字同样生效。如果担心兼容性也可以换成32rpx之类的具体值。八、效果预览运行后的效果顶部自定义导航栏标题文件引用。粉色边框卡片由header.wxml、main.wxml、footer.wxml三块拼成——蓝色加粗居中的大标题、首行缩进两端对齐的正文、右下角灰色日期。两个并排的绿色按钮显示扩展内容和隐藏扩展内容。点击显示扩展内容下方出现一个带粉色边框的扩展阅读卡片列出我国航天后续三大规划点击隐藏则消失。整个页面没有任何一处结构是手动复制粘贴出来的全部靠片段组合改一处片段所有引用它的地方同步生效。九、总结本文用一个科技简报页面把 WXML 文件引用的核心用法串了一遍include整体引入适合页头、正文、页脚这类静态或共享页面数据的片段。includevsimport前者贴内容后者导模板别混用。src用绝对路径以/开头从根目录算最稳妥。片段保持无状态wx:if等控制逻辑优先放页面层片段只负责结构。

文件引用实践

相关推荐

PostgreSQL 18排序规则优化与CPU性能提升实践

胶片时代白平衡原理与数字白平衡的差异详解

多线程编程核心原理与实战技巧详解

更多资讯

算法工程师笔试题精讲：概率建模与C++多态等核心考点解析

OpenCV 2.4.13 环境配置全攻略：从安装到避坑

MATLAB自动化处理Adams KC结果生成标准报告

C#内存地图：栈堆常量池与GC代际原理详解

Loop Engineering实战：构建可迭代的自动化闭环系统

身份证二要素核验接口接入教程：参数、请求示例与返回字段解读

今日更新

MATLAB缩进快捷键与批量格式化实战指南

用Poco实现Qt风格信号与槽的跨平台C++方案

ESXi裸机虚拟化安装指南：从硬件兼容到虚拟机部署

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

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

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

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

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