使用HBuilderX 开发微信小程序的日志（4）

最新推荐文章于 2025-07-30 09:21:24 发布

world_endless

最新推荐文章于 2025-07-30 09:21:24 发布

阅读量437

点赞数 3

CC 4.0 BY-SA版权

分类专栏：使用HBuilderX 开发微信小程序的日志文章标签：微信小程序小程序 uni-app css

本文链接：https://blog.youkuaiyun.com/world_endless/article/details/145830298

使用HBuilderX 开发微信小程序的日志专栏收录该内容

6 篇文章

订阅专栏

2025-01-31

前言：寒假有点忙，只写了这一篇日志。也只把小程序项目往前推进了一点点……
还是再说一遍吧，这是我用来记录我折腾 uni-app 开发过程的日志，可能没有太多值得学习的地方，倒是走了不少弯路。还请大佬多多指教！

这一篇日志是关于用户界面排版的，只有我摸索出的 CSS 的一些用法。说起来，前几篇日志基本都是在写 CSS……不过下一篇我就要写具体功能了。

设计用户信息卡片

用户个人主页需要能够显示用户的头像和 ID ，并且显示与用户个人关联的功能，如个人订单、联系客服等。
在这里插入图片描述

我参考了上面的小程序，页面背景比显示个人信息和展示功能的区域要深一点，从而强调信息。各种功能的图标被安放在圆角卡片里面，清晰又整齐。置顶的个人信息没有安放在圆角卡片里面，而是展示在一道占据页面全部宽度的横幅上。

我给浅灰色页面背景和最外层的内边距设置了全局 CSS：

.cm-background {
	margin: 0;
	min-height: 100vh;
	background-color: #f8f8f8;  /* 浅灰色 */
}
.cm-page-wrap {
	padding: 30rpx;
}

我自己小程序的用户基本信息只有头像、ID，使用横幅会使空白的地方太多，所以我把个人信息也放在圆角卡片里面了。我为圆角卡片创建了一个全局 CSS：

.cm-card{
	background-color: white;
	border-radius: 20rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
}

效果是这样的：

在这里插入图片描述

这张卡片被分成了三个区域：头像、昵称（ID）和修改信息的图标。

我写 CSS 的逻辑是这样的：先指定宽度占比，并把每个区域都设置为 box-sizing: border-box; 以确保 padding 不会影响宽度。然后设置头像高度作为最大高度。最后再想办法将三个主要元素在每个区域都垂直居中排列。

.card-avatar {
	width: 15%;
	height: 100rpx;  /* 最大高度 */
	box-sizing: border-box;
}
.card-info {
	width: 70%;
	box-sizing: border-box;
	padding-left: 32rpx;  /* 使昵称与头像之间有一定距离 */
}
.card-info .nickname {
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;  /* 昵称文字的垂直居中 */
}
.card-icon {
	width: 15%;
	box-sizing: border-box;
	display: flex;  
	align-items: center;  /* 图标的垂直居中 */
}

<view class="cm-background cm-page-wrap">
	<view class="cm-card cm-flex cm-row">  <!-- flex 和 row 设置元素横向排列 -->
        <!-- 头像 -->
        <image class="card-avatar" mode="aspectFit" src="/static/icons/avatar.png" lazy-load/>
        
        <!-- 昵称 -->
        <view class="card-info">
            <text class="nickname">书友_0001</text>
        </view>
        
        <!-- 图标 -->
        <view class="card-icon">
            <uni-icons type="compose" :size="30" color="#a6a6a6"></uni-icons>
        </view>
    </view>
    
   	<!-- ... -->
</view>

到这里，个人信息的部分做好了。接下来同样使用圆角卡片包裹各种功能的图标。

我使用 uni-grid 进行功能图标的排版。

<view class="cm-card">
    <uni-grid :column="4" :showBorder="false">  <!-- 4列，不显示边框 -->
        <uni-grid-item>
            <view class="cm-grid-item-box">
                <uni-icons type="headphones" :size="30"></uni-icons>
                <text class="text">联系客服</text>
            </view>
        </uni-grid-item>
        
        <!-- ... -->
    </uni-grid>
</view>

为了使 uni-grid-item 中在图标完全居中，需要设置容器的 CSS：

.cm-grid-item-box {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15rpx 0;
}
.cm-grid-item-box .text {  /* 同时设置了uni-grid-item 中的字体大小 */
	font-size: 26rpx;
}