【WeChat MiniProgram】002 - view、text、image组件以及弹性盒子的概念

View、Text、Image组件

View

1. 示例代码

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

1. view控件属性：

• class="" 样式类

Text

1. 示例代码

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

1. text控件属性：

• class="" 样式类
• font-size="" 字体大小

  单位可以为px或者rpx，有关rpx后面会提到

• font-weight="bold/lighter" 字重

Image

1. 示例代码

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

1. 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）对齐方式

原文地址：https://www.cnblogs.com/codaland/p/12609115.html