企业官网建设流程全解析

一、完成效果

二、制作流程

1.在小程序根目录下面新建files文件夹，并在该文件夹下面新建四个文件：

header.wxml、main.wxml、footer.wxml、extension.wxml

header.wxml：

<view class="header"> 2026 年重大科技进展 </view>

main.wxml:

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

footer.wxml:

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

extension.wxml:

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

index.html:

<!--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 class="btn-group"> <button class="btn" bindtap="showExtension">显示扩展内容</button> <button class="btn" bindtap="hideExtension">隐藏扩展内容</button> </view> <!-- 使用 wx:if 控制包含扩展内容的区域是否渲染 --> <view wx:if="{{isShowExtension}}"> <include src="/files/extension"></include> </view> </view> </scroll-view>

三、个人总结

希望可以坚持学下去