# 微信小程序案例3.10 文件引用

微信小程序案例3.10 文件引用一、实验目的掌握WXMLinclude文件引用语法将页面拆分为多个wxml片段。掌握按钮bind:tap点击事件setData修改页面状态。掌握wx:if条件渲染控制被引入片段的显示和销毁。掌握用view标签实现换行排版替代br标签。拓展任务①新建expand.wxml扩展阅读页面通过include引入②增加两个按钮实现显示、隐藏扩展阅读。二、实验环境微信开发者工具新建空白小程序不使用云服务渲染引擎webview。三、实验原理include srcxxx.wxml将外部wxml文件除template、wxs以外全部内容拷贝到当前位置适合拆分头部、正文、页脚片段。bind:tap绑定按钮点击事件在js中通过setData修改data变量。wx:if{{变量}}条件为true渲染节点false直接销毁DOM实现显示隐藏。小程序换行推荐使用view块级标签每条内容一个view单独一行替代不推荐的br/标签。四、项目目录文件引用 ├─files │ ├─header.wxml │ ├─main.wxml │ ├─footer.wxml │ └─expand.wxml ├─pages │ └─index │ ├─index.js │ ├─index.wxml │ ├─index.wxss │ └─index.json ├─app.js ├─app.json └─app.wxss五、核心代码files/header.wxmlviewclassheader2026 年重大科技进展/viewfiles/main.wxmlview classmain 天问二号小行星探测2026.7、轻舟试验飞船2026.3.30发射、地月双向高速激光通信验证2026.8、中国空间站常态化运营、九章四号光量子原型机2026.5、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 /viewfiles/footer.wxmlview classfooter 2026年10月17日 /viewfiles/expand.wxml优化版用view逐条换行view classexpand 拓展阅读我国航天后续重大规划 view1、天问三号火星采样返回任务/view view2、载人登月工程/view view3、大型空间基础设施建设/view /viewpages/index/index.wxmlscroll-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 !-- include引入expand.wxmlwx:if控制整体显示隐藏 -- view wx:if{{isShowExpand}} include src/files/expand.wxml/include /view /scroll-viewpages/index/index.jsPage({ data:{ //拓展控制扩展阅读是否显示初始默认隐藏 isShowExpand:false }, //显示扩展内容 showExpand(){ this.setData({ isShowExpand:true }) }, //隐藏扩展内容 hideExpand(){ this.setData({ isShowExpand:false }) } })pages/index/index.wxsspage { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .btn-group{ display:flex; margin:20rpx; } .btn-group button{ flex:1; margin:0 10rpx; background-color:#39b54a; color:#fff; } .expand{ margin:20rpx; padding:20rpx; border:6rpx solid #F4C2C8; font-size:large; line-height:2em; color:#475569; }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; }pages/index/index.json{ navigationBarTitleText: 文件引用, usingComponents: {} }app.json{ pages: [ pages/index/index ], window: { navigationBarTitleText: 文件引用, navigationBarTextStyle: black }, style: v2, renderer: webview, sitemapLocation: sitemap.json }app.jsApp({ onLaunch(){ //案例3.10 文件引用 } })六、运行效果页面初始头部标题、正文、右下角日期正常渲染扩展阅读默认隐藏页面下方两个绿色按钮。点击【显示扩展内容】拓展阅读板块出现每条规划内容独立一行。点击【隐藏扩展内容】拓展阅读板块消失。七、实验总结本案例练习小程序WXML的include文件引用将页面拆分为多个wxml片段实现页面片段复用。结合按钮点击事件、wx:if条件渲染完成拓展任务控制被引入外部片段的显示与销毁。拓展阅读使用view标签逐条排版比br标签更符合小程序规范。注意include只会引入普通标签不会引入template模板内容。