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