微信小程序作业 —— 创建标签页：中国网事・感动 2023-优快云博客

一、作业需求

根据案例 3.2《创建标签》完成小程序开发，在原有 3 个标签基础上新增 2 个页面，最终实现5 个 tab 标签页：首页、贾潮江、朱培娟、莫日发、朱言春。

使用小程序全局配置app.json实现底部 tabBar 切换；
每个页面卡片布局统一，标题红色居中，正文首行缩进；
卡片位置在小程序右上角胶囊（退出按钮）下方，避免被系统 UI 遮挡；
每个页面展示对应感动人物完整事迹。

二、开发实现过程

1. 创建项目

新建小程序项目，选择不使用云服务、不使用模板，生成基础小程序项目目录，包含pages、app.json、app.wxss等基础文件。

2. 新建页面

在app.json的pages数组中，依次注册 5 个页面路径：

"pages":[
    "pages/index/index",
    "pages/jiaxiangjiang/jiaxiangjiang",
    "pages/zhupeijuan/zhupeijuan",
    "pages/morifa/morifa",
    "pages/zhuyanchun/zhuyanchun"
]

保存app.json后，开发者工具会自动在 pages 文件夹生成 5 套页面文件（js、json、wxml、wxss）。

3. 配置底部 tabBar

在app.json中编写tabBar配置，设置文字颜色、选中颜色、背景色，list数组填写 5 个页面路径与 tab 显示文字，完成底部标签栏。

一开始我尝试配置图标，但是图片路径容易报错，作业中先只使用文字 tab。

4. 页面结构编写

最初课件示例使用<scroll-view>滚动容器，但是scroll‑viewflex 居中会失效，布局很难控制。于是替换为普通 view 容器，每个页面统一结构：外层scrollarea作为容器，内部box为带银色边框内容卡片。每个页面 json 文件清空为{}，不再使用之前的navigation‑bar自定义导航组件，避免组件路径报错、wxml 语法报错。

示例页面 wxml 结构：

<view class="scrollarea">
  <view class="box">
    <view class="title">标题内容</view>
    <view class="txt-style">人物事迹正文</view>
  </view>
</view>

5. 全局样式编写（踩坑最多）

作业要求所有页面字体、边距、边框完全统一，删除每个页面目录下独立的 wxss 文件，全部使用app.wxss全局样式，防止样式冲突。

布局遇到一系列问题：

❌问题 1：卡片贴紧屏幕顶部，文字被右上角胶囊按钮遮挡。

解决：设置margin‑top:96px，单位使用 px（胶囊按钮是 px 单位，rpx 会发生缩放错位），让卡片上边缘正好在右上角・・・按钮下方。

❌问题 2：想把卡片屏幕垂直居中，但是效果过于靠中间，不符合课件要求。

解决：取消垂直居中 flex 设置，改为顶部留出固定距离，盒子水平居中。

❌问题 3：标题紧贴盒子边框，视觉拥挤。

解决：增大 box 的padding内边距，让文字和边框留出空隙。

❌问题 4：字体格式混乱，页面之间样式不统一。

解决：全部样式写在app.wxss，统一标题红色加粗居中、正文首行缩进text‑indent:2em，行高1.5em。

最终 app.wxss 核心样式：

page {
  height: 100vh;
  background: #ffffff;
}

.scrollarea {
  height: 100%;
}

.box {
  width: 92%;
  margin-top: 96px;
  margin-left: auto;
  margin-right: auto;
  padding: 30rpx 20rpx;
  border: 2rpx solid silver;
}

.title {
  font-size: larger;
  font-weight: bolder;
  text-align: center;
  margin-bottom: 30rpx;
  color: red;
}

.txt-style {
  font-size: large;
  line-height: 1.5em;
  text-indent: 2em;
}

6. 填充业务文本内容

对照 PPT 课件，把 5 个页面的人物完整原文复制到各个 wxml，保证文字内容和案例课件完全一致，没有删减。

7. 调试与排错

修改代码之后，很多时候修改不生效，是缓存问题；操作：清除全部缓存，重新编译；
检查 5 个 tab 来回切换，确认每一页布局、字体、位置完全统一；
确认不存在残留<navigation‑bar>标签，避免 wxml 语法错误。

三、最终实现效果

底部 5 个 tab 标签，可以互相切换页面；
卡片位于右上角胶囊按钮下方，不会被系统按钮遮挡；
卡片带有银色边框；标题红色、加粗居中；正文段落首行缩进，行间距舒适；
首页展示感动人物总览，其余四个页面分别展示贾潮江、朱培娟、莫日发、朱言春完整事迹。

四、开发遇到的问题总结

表格

问题	原因	解决方案
报组件找不到、wxml 编译报错	残留自定义`navigation‑bar`组件标签与引用	删除组件引用，删除页面 wxml 的导航标签
页面空白，提示找不到 wxss 文件	页面 wxss 文件丢失	全部删除页面独立 wxss，使用全局 app.wxss
卡片一直被右上角胶囊遮挡	使用 rpx 设置上边距，胶囊是 px 单位会缩放错位	margin‑top 使用 px 单位，设置 96px
scroll‑view 无法垂直居中	scroll‑view 滚动容器不支持 flex 垂直居中	改用普通 view 做外层容器
修改代码界面没有变化	开发者工具缓存残留	清除全部缓存，重启编译

五、心得体会

本次小程序 tabBar 开发，学会了小程序全局配置app.json的 pages 与 tabBar 用法。开发过程中踩了很多布局的坑，scroll‑view容器有自己的特殊性，不能完全和普通 view 一样使用 flex 布局；rpx 是小程序自适应单位，但是系统胶囊按钮尺寸是 px，二者混用容易位置错位。同时也体会到全局样式的好处：把公共样式写在app.wxss，多个页面可以复用，保证所有页面格式统一，不用每个页面重复写样式代码。通过调试，一步步调整卡片位置，最终完成课件要求的作业效果。