WeChat MiniProgram002 - viewtextimage组件以及弹性盒子的概念

Posted 2021-03-02 codaland

View、Text、Image组件

View

1. 示例代码

<view class="container">
  ...
</view>

2. view控件属性：

• class="" 样式类

Text

1. 示例代码

 <text class="title">本周推荐</text>
 <text font-size="45rpx">La La Land 爱乐之城</text>

2. text控件属性：

• class="" 样式类
• font-size="" 字体大小
  单位可以为px或者rpx，有关rpx后面会提到
• font-weight="bold/lighter" 字重

Image

1. 示例代码

<image src="/images/poster.jpg" class="icon"></image>

2. image控件属性：

• class 样式类
• src="" 图片路径
• border-raduis="50%" 边角弧度
  注：可以为图片绝对路径或者url

rpx vs. px

rpx: Relative Pixel px: Pixel

• Q: 为什么需要rpx？
  A:不同机型有着不一样的可视区的宽度和高度（px），所以rpx规定了一个统一的标准方便放置界面元素。

• rpx 页面宽度均750rpx

弹性盒子 Flex

类似于封装的概念，将多个界面元素封装在一起 在内部定义他们的排列方式。

• 常见的属性：

1. flex-direction: column/row/row-reverse/column-reverse
   排列方式：行/列
2. align-items: center/flex-start(end)/baseline(以第一行文字)/stretch
   交叉轴（vertical）对齐方式
3. justify-content: space-around(距边框有距离)/space-between(距边框无距离)/center/flex-start(end)
   主轴（horizontal）对齐方式