企业官网建设流程全解析

一、实验简介

本案例学习小程序include文件引用机制，把页面拆分为头部、正文、页脚、拓展阅读多个独立 wxml 片段，在主页面通过<include>引入外部 wxml 文件。 基础功能：展示 2026 年重大科技进展内容； 作业扩展需求：

1. 新建扩展阅读 wxml 片段，使用 include 引入；
2. 添加两个按钮，实现显示扩展内容、隐藏扩展内容，通过wx:if条件渲染控制拓展板块显示与隐藏。

开发环境：微信开发者工具，不使用云服务，不使用模板，渲染引擎设置webview。

项目目录结构

文件引用 ├─files # 存放被include引入的wxml片段 │ ├─header.wxml │ ├─main.wxml │ ├─footer.wxml │ └─extend.wxml # 作业新增拓展阅读文件 ├─pages/index │ ├─index.js │ ├─index.json │ ├─index.wxml │ └─index.wxss ├─app.js ├─app.json └─app.wxss

二、核心知识点

1. include 文件引用

<include src="/files/header"></include>

• include会把目标 wxml 里面标签完整复制嵌入当前位置；
• 不会引入 template 模板、wxs 脚本，只复制普通标签；
• src 路径最前面写/代表项目根目录，路径写错会引用失效。

2. wx:if 条件渲染

配合页面数据变量，控制整块内容显示销毁。本案例将<include>包裹在<block wx:if="">中，实现整个拓展板块显示隐藏。

3. bindtap 按钮点击事件

按钮绑定bindtap，触发 js 函数，使用this.setData()修改页面变量，驱动视图更新。

三、完整代码实现

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 class="header"> 2026 年重大科技进展 </view>

3. files/main.wxml

<!--main.wxml--> <view class="main"> 天问二号小行星探测（2026.7）、轻舟试验飞船（2026.3.30发射）、地月双向高速激光通信验证（2026.8）、中国空间站常态化运营、九章四号光量子原型机（2026.5）、AI辅助新药靶点发现、多模态大模型向工业落地深化、核光钟研制成功、柔性光子芯片 </view>

4. files/footer.wxml

<!--footer.wxml--> <view class="footer"> 2026年10月17日 </view>

5. files/extend.wxml（作业新增拓展阅读）

<!--extend.wxml 扩展阅读内容--> <view class="box main"> 拓展阅读：我国航天后续重大规划 <view>1、天问三号火星采样返回任务</view> <view>2、载人登月工程</view> <view>3、大型空间基础设施建设</view> </view>

6. pages/index/index.wxml

<!--index.wxml--> <navigation-bar title="文件引用" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <include src="/files/header"></include> <include src="/files/main"></include> <include src="/files/footer"></include> </view> <!-- 两个功能按钮 --> <view style="display:flex;margin:20rpx;gap:20rpx;"> <button type="primary" bindtap="showExt">显示扩展内容</button> <button type="primary" bindtap="hideExt">隐藏扩展内容</button> </view> <!-- 条件渲染控制扩展阅读是否显示 --> <block wx:if="{{showExtend}}"> <include src="/files/extend"></include> </block> </scroll-view>

7. pages/index/index.js

Page({ data:{ showExtend:false // 默认隐藏扩展阅读 }, // 显示扩展内容 showExt(){ this.setData({ showExtend:true }) }, // 隐藏扩展内容 hideExt(){ this.setData({ showExtend:false }) } })

8. pages/index/index.wxss

page { 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; }

四、运行效果

1. 页面初始加载：展示标题、科技进展正文、右下角日期；拓展阅读板块默认隐藏；
2. 点击【显示扩展内容】按钮：页面下方加载并显示拓展阅读内容；
3. 点击【隐藏扩展内容】按钮：拓展阅读板块整体消失。

五、踩坑与问题排查

1. include 引用失效，内容不显示

• src路径开头需要写/代表项目根目录；
• 文件存放位置必须是根目录files文件夹；
• 文件名大小写必须一致。

1. 样式全部失效复制 PPT 文档会带入中文全角横杠‑，如navigation‑bar、font‑weight，全部替换为英文键盘减号-。
2. 点击按钮没有反应 检查按钮绑定事件名bindtap="showExt"和 js 里面函数名大小写完全一致。

六、实验总结

1. include适合页面片段拆分，将头部、页脚、拓展内容抽离为独立文件，实现代码复用。
2. include只引入标签，不引入模板与脚本；模板复用使用<import>。
3. 可以把<include>放到<block wx:if>条件块内部，实现引入片段整体显示隐藏。
4. 从 PPT、Word 复制代码极易带入看不见的特殊符号，会造成 wxml/wxss 解析异常。