微信小程序从基础到实战3

微信小程序从基础到实战3
 微信小程序的UI精讲
 *布局和样式基础
 flex布局基础
 flex的容器和元素
 flex-direction决定元素的排列方向
 flex-wrap决定元素如何换行（排列不下时）
 flex-flow flex-direction和flex-wrap的简写–相反换行
 Justify-content元素在主轴上的对齐方式
 align-items元素在交叉轴的对齐方式
 元素属性：
 flex-grow当有多余空间时，元素的放大比例
 flex-shrink当空间不足时，元素的缩小比例
 flex-basis元素在主轴上占据的空间
 flex是grow、shrink、basis的简写
 order定义元素的排列顺序
 align-self定义元素自身的对齐方式
 rpx–^动态值
 flex容器属性详解
 flex元素属性详解
 flex布局实战
 相对定位和绝对定位：
 “相对定位元件相对于定位自己，参考是自己的。”
 “绝对定位元件相对于其最近的定位母元件”
 ^view class=”item”^   ----起定位的父级元素，找不到的时候会以页面定位
 1
 ^/view
 .contaner{
 heigh:40%;
 width:30%
 background-color: rebeccapurple;
 }
 相对定位：
 .item{
 width：150rpx;
 height: 150rpx;
 background-color:rosybrown;
 border:1px solid #123;
 position : relative;
 left:50rpx;
 top:20rpx;
 }
 绝对定位：
 .item{
 width：150rpx;
 height: 150rpx;
 background-color:rosybrown;
 border:1px solid #123;
 position : absolute;
 left:50rpx;
 top:20rpx;
 }
 *组件使用
 ^tagname property=”value”^
 Content goes here…
 ^/tagenam
 组件是视图层基本组成单元
 组件自带一些功能与微信风格的样式
 一个组件通常包括开始标签和结束标签、属性用来修饰这个组件，内容在两个标签之内
 一、Component概念
 组件由wxml，wxss，js文件和json4个月的同一页，并且需要在同一目录这四个文件。与页面不同，组件（也称为构造函数）中的构造函数是组件（{}），页面中的构造函数是页面（{}）。要编写自定义组件，首先需要声明的JSON文件中的自定义组件（该组件领域是真实的这组文件的自定义组件）
 组件样式编写注意事项
 和页面引用组件部件不能使用id选择（#A是），属性选择器（[A]），以及标签选择，使用类选择。
 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
 ram子元素选择器（。a^.b）只能在视图组件及其子节点之间使用，对于其他组件可能会导致意外情况。
 遗传模式，诸如字体，颜色，将继承从外组分引入组件。
 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效
 来源：前端开发博客
 *项目实战
 视图容器：vieew、scroll-view–^可以滚动的视图（上下、左右） swiper–^幻灯片
 基础内容：icon text–^文本内容 progress–^进度条
 表单组件：button–^按钮 checkbox–^复选框 form–^表单
 Input–^输入框  label–^组合单选框和复选框  picker–^时间
 Radio–^单选框  slider–^拖动条  switch–^开关
 操作反馈：弹出—action-sheet、modal、toast、loading
 导航
 媒体组件:audio、 image、 viedo
 地图
 画布