【微信小程序开发】前端入门

目录

一. 组件样式

WXML

WXSS

二. 页面布局

flex弹性布局

flex-direction

align-items

---

一. 组件样式

WXML

WXML中包含很多组件，如：view、text、image等，如果我们想进一步调整各个组件的排版，需要现在WXML中加入样式名称class name:

<!--view组件的样式命名-->
<view class="container">

<!--image组件的样式命名-->
     <image class="avatar" src="/images/avatar/avatar-1.png"></image>

<!--text组件的样式命名-->
     <text class="motto">Hello</text>
     <view class="journey-container">
           <text class="journey">开启小程序之旅</text>
     </view>
</view>

注：真实项目中我们最好不要将图片资源存贮在小程序的目录中，将图片资源存放在服务器上，让小程序通过网络来加载图片资源会更好。

我们再WXML中定义好才可以再WXSS中进一步对应设置：

WXSS

.container{
     display:flex;
     flex-direction:column;
     align-items:center;
}
.avatar{
      width: 200rpx;
      height:200rpx;
      margin-top:160rpx;
}
.motto{
      margin-top:100rpx;
      font-size: 32rpx;
      font-weight:bold;
      color:#9F4311;
}
.journey-container{
      margin-top:200rpx;
      bolor:1px solid#EA5A3C;
      width: 200rpx;
      height:80rpx;
      bordeer-radius: 5px;
      text-align:center;
}
.journey{
      font-size: 22rpx;
      font-weight:bold;
      line-height:80rpx;
      color:#9F4311;
}

二. 页面布局

在我们初步了解组件如何命名的框架之后，我们来细看一下WXSS中页面设置的具体细节：

flex弹性布局

Flex布局是一种CSS布局模式，用于在容器中自动分配和重新分配空间。它提供了一种灵活的方式来控制子元素在容器中的位置和大小，并能够适应不同的屏幕大小和设备尺寸。

flex-direction

Flex布局中有一个概念：轴，也就是排列的方向。

flex-direction中属性有四个：

• row：主轴水平，方向自左向右
• column：主轴垂直，方向自上而下
• row-reverse：主轴水平，方向自右向左
• column-reverse:主轴垂直，方向自下而上

根据图片理解一下：

align-items

align-items是用来设置交叉轴上的排列方式的，比如当我们选定row时，垂直方向就是我们的交叉轴。

• stretch: 项目将会被拉伸以适应其容器的剩余空间。如果项目不能完全适应，它们将会被剪裁。
• flex-start: 项目将会被对齐到容器的顶部或左侧。
• flex-end: 项目将会被对齐到容器的底部或右侧。
• center: 项目将会被居中对齐。
• baseline: 项目将会被对齐到同一基线。