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