微信小程序的UI

1，布局基础
flex布局基础
相对定位和绝对定位
flex-direction 决定元素的排列方向
flex-wrap 决定元素换行（排列不下时）
flex-flow flex-dirention和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items 元素在交叉轴上的对齐方式
flex-grow 当有多空间时，元素的放大比例
flex-basis 元素在主轴上占据的空间
flex 是grow、shrink、basis的简写
order 定义元素的排列顺序
align-self 定义元素自身的对齐方式
相对定位的元素是相对自身进行定位，参照物是自己
绝对定位是相对于和它距离最近的且已经定位的父级元素进行定位
组件的使用
什么是组件？
组件是视图曾的基本构成单位
组件有带有功能和风格 也就是拥有属性和绑定事件
组件由开始标签到结束标签，内容在中间 标签中有组件自己的属性和绑定事件 通过这些来完成一定的功能和样式
例如：

<view class="page-section-title">
        <text>flex-direction: row\n横向布局</text>
      </view>

视图容器组件的使用
view：视图容器
属性：hover-class（指定按下去的样式类）hover-start-time（按住后多久出现点击态，单位毫秒）
示例：

<view class="flex-item demo-text-1"></view>
          <view class="flex-item demo-text-2"></view>
          <view class="flex-item demo-text-3"></view>

scroll-view：
可滚动视图区域 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px
示例：

<scroll-view scroll-y="true" style="height: 300rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
  <view id="demo1" class="scroll-view-item demo-text-1"></view>
          <view id="demo2"  class="scroll-view-item demo-text-2"></view>
          <view id="demo3" class="scroll-view-item demo-text-3"></view>
        </scroll-view>

swiper：滑块视图容器
其中只可放置swiper-item组件
示例：

<swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item {{item}}"></view>
          </swiper-item>
        </block>
      </swiper>

基础内容组件
icon：图标
组件属性的长度单位默认为px
属性有：type（icon）的类型
size icon的大小
color：icon的颜色
示例：

<icon type="success" size="{{item}}"/>

text：文本
属性：selectable （文本是否可选） space 显示连续空格 属性值有：ensp emsp nbsp
decode 是否解码
示例：

<text>{{text}}</text>

progress：进度条
组件属性的长度单位默认为px
示例

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />

表单组件
button：按钮 双标记
示例：

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>

checkbox：
多选项目 单标记
示例：

<checkbox value="{{item.name}}" checked="{{item.checked}}"/>

input：
输入框 单标记
示例：

<input class="weui-input" auto-focus placeholder="将会获取焦点"/>

label：
用来改进表单组件的可用性
示例

<label>
      <checkbox hidden value="{{item.name}}" checked="{{item.checked}}"></checkbox>
      <view class="label-1__icon">
        <view class="label-1__icon-checked" style="opacity:{{item.checked ? 1: 0}}"></view>
      </view>
      <text class="label-1__text">{{item.value}}</text>
    </label>

form：表单
将组件内的用户输入的switch input checkbox slider radio picker 提交
示例：

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

操作反馈小工具
action-sheet
modal：弹出框
toast：提示框
loading：加载框
导航
navigator ：页面链接
示例：

<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>

多媒体
image：图片

<view class="section__ctn">
        <image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}"></image>

audio：音频

<audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio>

video：视频

 <video id="myVideo" src="" danmu-list="{{danmuList}}" enable-danmu danmu-btn controls></video>

地图与LBS
地图map的基本使用
地图标记
地图覆盖物

<map id="map" longitude="113.324520" latitude="23.099994" scale="14" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregiοnchange="regionchange" show-location style="width: 100%; height: 300px;"></map>

画布与游戏
canvas的使用
绘图API的使用
示例

<canvas type="webgl" id="myCanvas"></canvas>