微信小程序入门第二篇2-1

UI精讲

1.获取输入框的信息----通过绑定方法bindInput
2.获取APP中的全局变量-----var app=getApp（）；
3.rpx: 可以根据屏幕宽度进行自适应
4.在微信小程序中所触发的各种事件，都可以通过event事件来将信息获得。event事件的属性中的target和currentarget几乎是一样的，只有在冒泡事件的时候是不一样的。
5.在wxml页面中，data-设置变量的时候是不分大小写的。但是在js里event的dataset就全部转换成了小写，我们在JS页面也只能用小写才能用它！要记得URL中的也要换成小写

布局

布局分为flex布局、相对定位和绝对定位
1.flex布局
flex-direction—决定元素的排列方式
flex-wrap—决定元素如何换行
flex-flow是以上两种的简写
justify-content—元素在主轴上的对齐方式
align-items—元素在交叉轴上的对齐方式
2.绝对定位和相对定位
relative是相对自己的原位置，原位置存在
absolute是相当于离他最近的已定位的父级定位，原位置不存在了。用来覆盖

组件

1.swiper
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为，其中是swiper-item
2.scroll-view
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height
3.text支持转义字符如\n

多媒体

音频audio----action为object类型，控制播放、暂停等需要定义它-----action：{method…}—要用大括号

案例

1.实现一个一左一右布局。
flex可以实现-----space-between —两个子元素可以实现左右对齐的效果。
定义在父元素中可以实现
2.flex-wrap实现换行
3.背景颜色的渐变： -webkit-linear-gradient()
如background: -webkit-linear-gradient(top,white,lightblue ,rgb(83, 201, 248))
top: 表示上下渐变(意义还包括从哪里开始)，还可以设置为左右渐变（值为 left )
white: 是第一个颜色名
lightblue ： 第二个颜色名
rgb(83, 201, 248) : 第三个颜色名 （我们也可以设置两种颜色）