移动软件开发-实验2

一、实验内容

1. 实验目的

本实验以制作个人名片小程序为任务，使用微信开发者工具完成一个静态名片页面。页面上半部分展示横版名片头图，并将两段个人介绍文字准确放置在图片中预留的两条横线上；页面下半部分可继续补充个人简介等静态内容。通过实验熟悉 WXML 页面结构、WXSS 样式设计、本地图片引用以及图文叠加布局，重点掌握相对定位与绝对定位配合使用的方法。

2. 页面设计思路

名片页面由一个图文容器、底层头图和两段上层文字组成。头图负责提供整体视觉风格以及两条横线；两段文字分别承载姓名和个人方向等信息。为了使文字始终跟随图片移动和缩放，图片与文字必须放入同一个容器中，并把容器设置为定位参照物。

层级	页面元素	作用
容器层	`view.card`	包住图片和文字，建立统一坐标系
底层	`image.card-image`	显示名片头图和两条横线
上层一	`text.line-one`	附着在第一条横线上，显示姓名
上层二	`text.line-two`	附着在第二条横线上，显示专业方向或个人简介

3. 项目结构

miniprogram-2/
├── app.js
├── app.json
├── app.wxss
├── image/
│   └── ChatGPTImage20250825-01_56_50.jpg
├── pages/index/
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
├── project.config.json
└── sitemap.json

4. 实验过程

4.1 建立图文共同容器

为了让文字坐标以图片为基准，先在 WXML 中创建一个 card 容器，再把图片和两段文字放入容器内部：

<view class="card">
  <image class="card-image"
         src="/image/ChatGPTImage20250825-01_56_50.jpg"
         mode="widthFix">
  </image>
  <text class="line-text line-one">张新</text>
  <text class="line-text line-two">移动软件开发学习者</text>
</view>

这里的关键不是组件的先后顺序，而是三者必须处在同一个 card 容器中。图片构成底层，两段 text 组件构成上层，后续通过 CSS 定位覆盖到图片的两条横线附近。

4.2 把容器设置为定位参照物

在 WXSS 中为 card 设置 position: relative。这个属性不会改变容器原来的页面位置，但会使容器成为内部绝对定位元素的坐标原点：

.card {
  position: relative;
  width: 100%;
}

.card-image {
  display: block;
  width: 100%;
  height: auto;
}

图片使用 display: block 可以消除行内图片底部可能出现的空隙；width: 100% 配合 mode="widthFix" 能够按比例缩放头图，使图片中的横线与容器坐标保持一致。

4.3 将两段文字附着到图片横线上

两段文字共用 line-text 基础样式，并分别通过 line-one、line-two 设置不同位置：

.line-text {
  position: absolute;
  color: #17384f;
  font-size: 28rpx;
  white-space: nowrap;
  transform: translateY(-50%);
}

.line-one {
  left: 56%;
  top: 31%;
}

.line-two {
  left: 56%;
  top: 39%;
}

4.4 设置文字层级和视觉样式

如果文字被图片遮挡，可以为文字增加 z-index。同时根据头图颜色调整字号、字重和颜色，使文字与横线保持清晰但不过度抢夺视觉焦点：

.line-text {
  z-index: 2;
  font-weight: 600;
  letter-spacing: 1rpx;
}

二、问题总结与体会

1. 遇到的问题及解决方法

文字使用绝对定位后跑到图片外部。 原因是父容器没有建立定位参照。将 card 设置为 position: relative 后，两段文字的坐标都以名片图片所在容器为基准。
图片缩放后文字与横线错位。 如果图片使用固定尺寸，而文字坐标也使用固定像素，不同屏幕宽度下会产生偏移。本实验把图片宽度设为 100%，并使用百分比表示 left 和 top，使图文能够同步缩放。
文字压住横线或距离横线太远。 通过开发者工具反复预览，先调水平位置，再调垂直位置，并使用 translateY(-50%) 控制文字中心，逐步找到合适的贴线效果。
第二段文字长度超过横线。 使用 white-space: nowrap 避免自动换行，同时缩短介绍内容或减小字号，使文字长度与横线宽度相匹配。

向见仓库：https://github.com/xkiana/miniprogram2