微信小程序之UI篇

微信提供了以下几类组件：

• 视图容器
• 基础内容
• 表单组件
• 导航
• 媒体组件
• 地图
• 画布
• 客服会话

一个个来讲（先留坑，以后开发过程再补充）
1.视图容器
- view

相当于html中的div

scroll-view

可以滚动的视图

swiper

相当于幻灯片

movable-view

2.基础内容
icon
text
process

3.表单组件
button
CheckBox
form
input
label
picker
picker-view
radio
slider
switch
textarea

4.导航
navigator

5.媒体组件
audio
image
video

6.地图
map

7.画布
canvas

8.客服会话
contact-button

布局方式

• flex布局
• 相对定位和绝对定位

flex布局

1.flex容器与元素

主轴和交叉轴

flex-direction

元素排列方向,设置主轴

flex-wrap

是否换行

flex-flow

上面两个的简写

justify-content

元素在主轴上对齐方式,左上flex-start,右下flex-end,spacebetween均分

align-items

元素在交叉轴上对齐方式
stretch使未设置高度元素占满整个高度
baseline让元素以文字位置对齐
flex-start/end

flex-grow

有多余空间元素放大比例,默认值是0

flex- shrink

空间不足时元素缩小比例,默认值为1

flex-basis

元素在主轴上占据空间

flex

以上三个的简写

order

元素排列顺序

align-self

定义元素自身对齐方式

相对定位和绝对定位

相对定位的元素是相对自身进行定位,参照物是自己
绝对定位的元素是相对离他最近的一个已定位的父级元素进行定位

样式

• 尺寸

width,height,min-width…

• 背景

• 边框

  border

• 边距

margin 与外容器的距离
padding 与内容器的距离

• 文本

font

• 其他(列表.内容.表格)

样式选择器

1. 基本选择器
   
   • 类选择器(.name{}) 对应class
   • ID选择器(#name{}) 对应id
   • 元素选择器(name{}) 对应元素,例如image
   • 通配符选择器(*name{})
   • 包含选择器(p c{})
   • 子元素选择器(p>c{})
   • 邻近兄弟元素选择器(c+c{})
   • 通用兄弟元素选择器(c~c{})
2. 属性选择器
3. 伪类选择器