一、實驗簡介本案例學習小程序中include文件引用將頁面拆分為頭部、正文、頁腳、擴展閱讀多個獨立 wxml 片段通過 include 標簽引入復用。原始需求使用include引入外部 wxml 片段拆分頁面為 header、main、footer。頁面展示 2026 年重大科技進展粉色外邊框標題居中、正文首行縮進、頁腳居右顯示日期。作業(yè)擴展需求新增擴展閱讀片段extra.wxml同樣使用 include 引入。添加兩個按鈕【顯示擴展內容】、【隱藏擴展內容】通過條件渲染控制擴展閱讀區(qū)域顯示與隱藏。約束使用小程序系統(tǒng)原生導航欄禁止自定義 navigation?bar 組件。二、項目目錄結構文件引用 ├─ files # 存放被include引入的wxml片段 │ ├─ header.wxml │ ├─ main.wxml │ ├─ footer.wxml │ └─ extra.wxml # 作業(yè)新增擴展閱讀片段 ├─ pages/index │ ├─ index.js │ ├─ index.json │ ├─ index.wxml │ └─ index.wxss ├─ app.json └─ app.wxss三、實現(xiàn)效果系統(tǒng)導航欄標題文件引用。粉色邊框容器內部為標題、科技進展正文、右下角日期。下方兩個并排按鈕點擊顯示 / 隱藏拓展閱讀板塊。拓展閱讀板塊也是獨立 wxml 文件由 include 引入wx:if 控制整體渲染銷毀。四、app.json 全局配置移除自定義導航設置系統(tǒng)導航標題webview 渲染引擎。{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationBarTitleText: 文件引用 }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }五、被引用的碎片文件files/header.wxml頭部標題片段view classheader 2026 年重大科技進展 /viewfiles/main.wxml正文片段view classmain 天問二號小行星探測2026.7、輕舟試驗飛船2026.3.30發(fā)射、地月雙向高速激光通信驗證2026.8、中國空間站常態(tài)化運營、九章四號光量子原型機2026.5、AI輔助新藥靶點發(fā)現(xiàn)、多模態(tài)大模型向工業(yè)落地深化、核光鐘研制成功、柔性光子芯片 /viewfiles/footer.wxml頁腳日期片段view classfooter 2026年10月17日 /viewfiles/extra.wxml【作業(yè)新增擴展閱讀片段】view classbox extra-box view classmain拓展閱讀我國航天后續(xù)重大規(guī)劃/view view classmain1、天問三號火星采樣返回任務/view view classmain2、載人登月工程/view view classmain3、大型空間基礎設施建設/view /view六、pages/index/index.wxml 主頁面知識點include src/files/xxx.wxml引入外部 wxml 片段/代表項目根目錄。按鈕綁定bind:tap點擊事件。block wx:if{{showExtraFlag}}條件渲染控制整塊擴展內容顯示隱藏。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 !-- 作業(yè)顯示、隱藏擴展內容按鈕組 -- view classbtn-group button bind:tapshowExtra顯示擴展內容/button button bind:taphideExtra隱藏擴展內容/button /view !-- include引入擴展閱讀wx:if控制是否渲染 -- block wx:if{{showExtraFlag}} include src/files/extra.wxml/include /block /scroll-view七、pages/index/index.js 頁面邏輯Page({ data:{ // 擴展閱讀默認隱藏 showExtraFlag: false }, // 顯示擴展內容 showExtra(){ this.setData({ showExtraFlag:true }) }, // 隱藏擴展內容 hideExtra(){ this.setData({ showExtraFlag:false }) } })八、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; } .btn-group{ display:flex; margin:20rpx; gap:20rpx; } button{ flex:1; }九、pages/index/index.wxss 頁面私有樣式page { height: 100vh; display: flex; flex?direction: column; } .scrollarea { flex: 1; overflow?y: hidden; }十、pages/index/index.json{ }十一、核心知識點總結1. include 文件引用include src/files/header.wxml/includeinclude 的作用拷貝目標 wxml 的標簽內容插入到當前位置。??重要限制include只復制 wxml 標簽不會復制 js、wxss、template 模板、wxs 腳本。樣式需要寫在全局 app.wxss 或者頁面 wxss。路徑寫法以/開頭代表小程序項目根目錄避免相對路徑../容易出錯。2. 作業(yè)擴展實現(xiàn)思路新建獨立extra.wxml存放拓展閱讀 html 結構在 index.wxml 用include把片段引入外層套block wx:if{{showExtraFlag}}布爾變量控制整個片段渲染銷毀兩個按鈕綁定 tap 事件調用setData修改布爾值實現(xiàn)顯示隱藏。wx:if{{false}}直接銷毀內部所有節(jié)點不是簡單 css 隱藏。3. include 和 import 的簡單區(qū)分include復制 wxml 完整內容用于拆分頁面片段。import引入 template 模板只使用定義好的模板不會復制全部內容。