企业官网建设流程全解析

一、页面骨架只有十几行

index.wxml 是入口，正文内容都放在 files 目录下：

<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-box"> <button bindtap="showExtendContent">显示扩展内容</button> <button bindtap="hideExtendContent">隐藏扩展内容</button> </view> <include src="/files/extend"></include> </view> </scroll-view>

这里有两个要点。第一，include 的 src 不带 .wxml 后缀，而且必须用绝对路径 /files/header，相对路径在多层目录里容易出错。第二，include 是"拷贝"语义，被引用文件的节点树会被原样插进当前位置，所以它适合拆页面片段，不适合传参数；需要传参就改用 template 或自定义组件。

四个片段各管一段：

header.wxml：一个居中的标题"2026 年重大科技进展" main.wxml：正文段落，讲各项科技进展 footer.wxml：右下角日期"2026年10月17日" extend.wxml：扩展阅读，整块包在 wx:if="{{showExtend}}" 里

片段里照样能写 wx:if，这让"可插拔"变得很自然：extend.wxml 平时根本不在渲染树里，按下按钮才出现。

二、两个按钮只做一件事

index.js 的逻辑不到二十行：

Page({ data: { showExtend: false }, showExtendContent() { this.setData({ showExtend: true }) }, hideExtendContent() { this.setData({ showExtend: false }) } })

setData 是唯一的数据驱动通道，视图层只认它。wx:if 在值为 false 时不创建节点，而不是用 display:none 藏起来，所以它做不了过渡动画；想保留节点就得换 hidden。这个场景里"彻底不渲染"反而合适，因为扩展阅读本来就是可选内容。

三、自定义导航栏：顶部交给组件

app.json 里关掉了默认导航：

"window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }

页面通过 index.json 注册组件：

"usingComponents": { "navigation-bar": "/components/navigation-bar/navigation-bar" }

navigation-bar 组件里最关键的不是属性定义，而是 attached 中的这段测量：

const rect = wx.getMenuButtonBoundingClientRect() const platform = (wx.getDeviceInfo() || wx.getSystemInfoSync()).platform const isAndroid = platform === 'android' const isDevtools = platform === 'devtools' const { windowWidth, safeArea: { top = 0 } = {} } = wx.getWindowInfo() this.setData({ ios: !isAndroid, innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`, leftWidth: `width: ${windowWidth - rect.left}px`, safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${top}px); padding-top: ${top}px` : '' })

自定义导航栏最容易踩的坑是右上角胶囊按钮：它的位置各机型不同，只能实时测量。这里用窗口宽度减胶囊左边距，反推出右侧要给标题留出的宽度，安卓和开发者工具再补上状态栏高度，iOS 交给胶囊自身布局。把平台判断写进 data，模板里就能直接切 ios / android 两套样式，不用在 WXML 里做运算。

组件还开了多插槽选项，所以 left、center、right 三个插槽都能用：有标题时显示标题，没标题时插槽接管。

四、满屏滚动：flex 只负责一列

index.wxss 只有六行，却决定了滚动行为：

page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; }

page 撑满视口并变成纵向 flex 容器，导航栏占自身高度，scroll-view 用 flex:1 吃掉剩余空间。这样滚动区域的高度是确定的，scroll-y 才真正生效。如果 scroll-view 没有明确高度，内容超出后只会把页面顶长，滚动条不会出现在组件内部——小程序里一看到滚动条跑偏，基本就是高度没定好。

五、样式集中在 app.wxss

app.wxss 里定义了 box 的粉色描边、header 的居中蓝色标题、main 的首行缩进和两端对齐、extend 的同类卡片，以及按钮的绿色底色。因为 include 只是把片段拼进页面，片段里的类名同样受全局样式支配，片段文件不需要也不该有独立样式文件。

一个细节：首行缩进 2em 配两端对齐是中文正文的常规排版，行高 2em 让段落更透气。

小结

这个小程序可以归结为一句话：用 include 把页面拆成可复用的片段，用 setData 驱动 wx:if 控制片段出不出现，用自定义导航栏接管顶部并动态计算安全区，用 flex 保证 scroll-view 有确定高度。