一、實驗簡介本案例學(xué)習(xí)小程序include文件引用機(jī)制把頁面拆分為頭部、正文、頁腳、拓展閱讀多個獨(dú)立 wxml 片段在主頁面通過include引入外部 wxml 文件。 基礎(chǔ)功能展示 2026 年重大科技進(jìn)展內(nèi)容 作業(yè)擴(kuò)展需求新建擴(kuò)展閱讀 wxml 片段使用 include 引入添加兩個按鈕實現(xiàn)顯示擴(kuò)展內(nèi)容、隱藏擴(kuò)展內(nèi)容通過wx:if條件渲染控制拓展板塊顯示與隱藏。開發(fā)環(huán)境微信開發(fā)者工具不使用云服務(wù)不使用模板渲染引擎設(shè)置webview。項目目錄結(jié)構(gòu)文件引用 ├─files # 存放被include引入的wxml片段 │ ├─header.wxml │ ├─main.wxml │ ├─footer.wxml │ └─extend.wxml # 作業(yè)新增拓展閱讀文件 ├─pages/index │ ├─index.js │ ├─index.json │ ├─index.wxml │ └─index.wxss ├─app.js ├─app.json └─app.wxss二、核心知識點(diǎn)1. include 文件引用include src/files/header/includeinclude會把目標(biāo) wxml 里面標(biāo)簽完整復(fù)制嵌入當(dāng)前位置不會引入 template 模板、wxs 腳本只復(fù)制普通標(biāo)簽src 路徑最前面寫/代表項目根目錄路徑寫錯會引用失效。2. wx:if 條件渲染配合頁面數(shù)據(jù)變量控制整塊內(nèi)容顯示銷毀。本案例將include包裹在block wx:if中實現(xiàn)整個拓展板塊顯示隱藏。3. bindtap 按鈕點(diǎn)擊事件按鈕綁定bindtap觸發(fā) js 函數(shù)使用this.setData()修改頁面變量驅(qū)動視圖更新。三、完整代碼實現(xiàn)1. app.json 全局配置{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass-easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }2. files/header.wxml!--header.wxml-- view classheader 2026 年重大科技進(jìn)展 /view3. files/main.wxml!--main.wxml-- view classmain 天問二號小行星探測2026.7、輕舟試驗飛船2026.3.30發(fā)射、地月雙向高速激光通信驗證2026.8、中國空間站常態(tài)化運(yùn)營、九章四號光量子原型機(jī)2026.5、AI輔助新藥靶點(diǎn)發(fā)現(xiàn)、多模態(tài)大模型向工業(yè)落地深化、核光鐘研制成功、柔性光子芯片 /view4. files/footer.wxml!--footer.wxml-- view classfooter 2026年10月17日 /view5. files/extend.wxml作業(yè)新增拓展閱讀!--extend.wxml 擴(kuò)展閱讀內(nèi)容-- view classbox main 拓展閱讀我國航天后續(xù)重大規(guī)劃 view1、天問三號火星采樣返回任務(wù)/view view2、載人登月工程/view view3、大型空間基礎(chǔ)設(shè)施建設(shè)/view /view6. pages/index/index.wxml!--index.wxml-- navigation-bar title文件引用 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox include src/files/header/include include src/files/main/include include src/files/footer/include /view !-- 兩個功能按鈕 -- view styledisplay:flex;margin:20rpx;gap:20rpx; button typeprimary bindtapshowExt顯示擴(kuò)展內(nèi)容/button button typeprimary bindtaphideExt隱藏擴(kuò)展內(nèi)容/button /view !-- 條件渲染控制擴(kuò)展閱讀是否顯示 -- block wx:if{{showExtend}} include src/files/extend/include /block /scroll-view7. pages/index/index.jsPage({ data:{ showExtend:false // 默認(rèn)隱藏擴(kuò)展閱讀 }, // 顯示擴(kuò)展內(nèi)容 showExt(){ this.setData({ showExtend:true }) }, // 隱藏擴(kuò)展內(nèi)容 hideExt(){ this.setData({ showExtend:false }) } })8. pages/index/index.wxsspage { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; }9. 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; }四、運(yùn)行效果頁面初始加載展示標(biāo)題、科技進(jìn)展正文、右下角日期拓展閱讀板塊默認(rèn)隱藏點(diǎn)擊【顯示擴(kuò)展內(nèi)容】按鈕頁面下方加載并顯示拓展閱讀內(nèi)容點(diǎn)擊【隱藏擴(kuò)展內(nèi)容】按鈕拓展閱讀板塊整體消失。五、踩坑與問題排查include 引用失效內(nèi)容不顯示src路徑開頭需要寫/代表項目根目錄文件存放位置必須是根目錄files文件夾文件名大小寫必須一致。樣式全部失效復(fù)制 PPT 文檔會帶入中文全角橫杠?如navigation?bar、font?weight全部替換為英文鍵盤減號-。點(diǎn)擊按鈕沒有反應(yīng) 檢查按鈕綁定事件名bindtapshowExt和 js 里面函數(shù)名大小寫完全一致。六、實驗總結(jié)include適合頁面片段拆分將頭部、頁腳、拓展內(nèi)容抽離為獨(dú)立文件實現(xiàn)代碼復(fù)用。include只引入標(biāo)簽不引入模板與腳本模板復(fù)用使用import?？梢园裪nclude放到block wx:if條件塊內(nèi)部實現(xiàn)引入片段整體顯示隱藏。從 PPT、Word 復(fù)制代碼極易帶入看不見的特殊符號會造成 wxml/wxss 解析異常。