微信小程序开发新手篇——页面布局

最新推荐文章于 2025-03-19 14:34:36 发布

Zephyr_MrR

最新推荐文章于 2025-03-19 14:34:36 发布

阅读量2.3k

点赞数 23

文章标签：微信小程序

本文链接：https://blog.csdn.net/suphyr/article/details/142718608

版权

微信小程序开发新手篇——页面布局

容器

要了解微信小程序开发当中的页面布局如何才能设计的好看，那就离不开对容器的理解。

容器

在微信小程序的.wxml文件中，<view> 是一个常用的基础组件，它相当于 HTML 中的<div>标签。<view>用来创建容器，承载其他的元素或内容，主要用来布局和样式化页面。
<view>的主要功能如下：

容器作用：<view>通常作为一个容器元素，用于包裹和排列其他元素（如文本、图片、按钮等）。
布局和样式化：你可以通过 CSS 样式或小程序的 .wxss文件对 <view>元素进行布局和样式设置，比如设置宽度、高度、背景色、边距、对齐方式等。
响应用户操作：<view> 元素可以监听用户的交互事件，比如点击事件（bindtap）等。

通俗来讲，容器就像是一个大箱子，大箱子里面可以装许许多多的小箱子，我们能够对于箱子以及箱子内部的箱子进行各种各样的限定，就可以使得整个页面符合我们的想象。

我们可以通过以下一个界面来更加深入地了解容器<view>。
在这里插入图片描述

容器的摆放

在上述页面中，我们可以将页面首先整体视为一个<view>；然后在这个<view>内分成了三部分，分别是顶部栏，内容栏，以及底部栏；然后在内容栏内又可以分成文字问候部分、登陆部分、信息显示部分、开卡部分、点餐部分（在每个部分内部又可以继续细分成不同的容器，在此不再赘述），故而整体的内容结构用代码可以简要表示为：

<view class="container">
  <view class="header">顶部栏</view>
  <view class="content">
  	<view class="text">问候语</view>
  	<view class="login">登录</view>
  	<view class="info">信息</view>
  	<view class="vip">开卡</view>
  	<view class="order">点单</view>
  </view>
  <view class="footer">底部栏</view>
</view>

这里为没有编程基础的同学简要解释一下，在.wxml文件所使用的语言中，我们每一个容器都需要以一个<***>开头，再以一个<\***>结尾，一般情况下我们以<view>开头，以</view>结尾（当然还存在别的，笔者会在之后的章节中进行说明），以class属性来定义当前容器的名称，这将对于我们之后在.wxss文件中对容器进行进一步的规范与美化具有重要意义。

容器与容器之间的关系可以概括为平级关系与父子关系。当几个容器都是上一级容器内部的同级别容器时，上一级容器就称为父容器，它们并称为子容器。

所有子容器都共享父容器对于内部容器的排列设定（如居中、均匀排布等），而子容器内部的容器（孙容器？）又只遵循它们的父容器的设定，而与父容器的父容器无关。这意味着我们对于每个容器设计样式时，需要不断地对于其内部容器如何排列进行设计，不要想当然地认为其沿袭了父容器的排列样式。

容器的美化

当我们确定好所有容器的摆放的顺序后，我们就可以进一步对其样式进行设计了，以使得其符合我们的想象。

最基础的设计是对容器的整体大小与位置进行设计。

设定容器大小

前文已经讲到，当我们在.wxss文件中需要对某个特定的容器进行样式设计时，需要知晓其名称，也即class，然后以如下代码所述的形式对其进行设计，之后不再赘述。

.container {
  width: 200px;  /* 宽度 */
  height: 150px; /* 高度 */
}

其中的px是指的像素单位，然而不同手机的屏幕大小不一，使用像素时所呈现的容器大小固定，而不能随着屏幕大小的不同而自适应地变化。在微信小程序当中特别设计了rpx，会根据屏幕宽度自动适配。除此之外还可以使用%（直接根据父容器的相同属性的百分比进行换算）、vh（页面高度的1%）、vw（页面宽度的1%）等单位。

我们设定容器的宽度使用width，设定高度使用height。

控制容器位置

控制容器自身位置

我们使用position控制容器的位置基准，使用 top、right、bottom、left 定义容器基于基准之下的位置。其中position的值有以下三种：

static：默认定位，处于文档流当中的默认位置。
relative: 相对定位，相对于它在文档流中的默认位置进行偏移。
absolute: 绝对定位，相对于最近的relative父容器进行定位。
fixed: 固定定位，常用于固定在屏幕的某个位置。

第三种fixed相对好理解，就是将容器固定在页面的某个位置，其基准是整个页面，而另外两种肯定是有点难以理解的，我这里进行进一步地展开以方便读者更深入地理解position的三种值的区别。

`relative`

relative 表示相对定位。相对定位的元素会保持它在文档流中的默认位置，然后可以根据 top、right、bottom 、left进行偏移，但尽管偏移了原本所在的位置依然会保留（即不影响页面中其他元素的布局）。

比如当前容器的父容器设定了内部容器的排列方式为从上到下顺序排列，且自身的position设定为relative。当我设定当前容器的position属性为relative，偏移量为0时，每个容器都占据了文档流的一部分空间，如图所示。

在这里插入图片描述

当我对其中的第一个容器添加偏移后（如bottom：20px；right: 40px；），此时布局就会变成：
在这里插入图片描述

由于position属性的值是relative，所以每个容器在文档流当中的默认位置是不变的，偏移后原本所在的位置仍会保留。

`absolute`

当我将position修改为absolute后，第一个容器就会脱离当前文档流，不再遵从父容器的排列设定，转而向上寻找position为relative属性的父容器，基于该父容器的位置来进行偏移，原先的位置消失，如图所示。

在这里插入图片描述
希望读者至此可以体会到所谓的relative与absolute的区别，在我们开发的过程中，一般情况下不需要额外对position进行设定（默认为static），如果需要微调容器的位置时设定为relative，当需要精确控制容器在页面中的位置并且让容器脱离正常的文档流时设定为absolute。