微信小程序常用组件
官方文档入口
本篇简单讲解一下各个组件的功能
view
最基础的标签
hover-class
官方文档是这样描述的
在view标签里面添加hover属性
在wxss内配置该属性的样式，我选择此时box背景为蓝色
保存后，模拟器中按住box部分，其会变为蓝色，松开恢复原来的绿色
但可以看到，这按下去变色的速度是明显快于松开变色的速度
这是由于这两个属性的控制
hover（悬停）指令是存在的
不同于鼠标操作，触屏操作是不存在“悬停”这个说法，毕竟手机屏幕目前无法识别未触及屏幕的手指
但这里hover是存在的，可以理解为最后一次点击的位置就是悬停位置
删除原来的hover-class内容，在wxss中直接添加
这句话，点击box后，会永久保留为红色，直到点击box外的内容，才会恢复原来的状况
这个标签可以运用到超链接的时候，毕竟那时候直接超链接出去了，不必再考虑要点击其他地方恢复状态
hover-stop-propagation
如果在一个盒内嵌套另一个，当外部被点击时，内部不会触发，但内部被点击时，外部也会有响应
如果想把两个按钮完全区分开来，就需要添加hover-stop-propagation属性来实现
值得注意的是，这个属性是阻止本节点的祖先节点出现点击状态
所以应该在内层节点添加该属性，保存后就不会影响祖先节点的状态
text
很普通的文本标签，可以用来写文本内容
user-select属性
这个用于控制该文本能否被选中，默认是不可以被选中，当添加user-select属性后，就可以被选中
点击预览即可在手机上进行具体操作测试
space属性
确定该文段是否能显示连续空格，默认不允许，其不是boolean值，在添加后需要指定的合法值才能奏效
在具体添加后效果如下
image
右击pages，选择
然后创建images文件（不能随意命名）
在里面存入需要的图片（总共大小不能超过2M）
图片名一定要是英文，否则真机调试会无法显示图片
src属性
指向文件地址（这里可以是网络图片）
/ 代表退回到根目录
/images/图片名即可
但这里明显可以看到，图片是被压缩的，通过调试器选定该图片，可以看到其给图片加了预设
如果预设不满意，可以自己添加格式
mode属性
用于确定图片剪裁、放缩的模式
widthFit用的居多
show-menu-by-longpress
图片的一个属性，在真机调试时可以长按来对图片进一步操作
对于含有小程序码的图片（不支持扫描二维码）
可以扫码跳转页面
navigator
只能进行小程序内的跳转，不支持外网跳转或者小程序间的跳转
open-type属性
其可以确定跳转方式
默认的方式为 navigate 保留当前页面，跳转到应用内的某个页面
点击右上角会返回上一个页面
如果 open-type=“redirect” 关闭当前页面，跳转到应用内的某个页面
右上角是直接返回主页
scroll-view
在wxml中建立好相关的组件
在wxss中添加横排布局属性
即可变成横着的
原本是默认放缩以便在一个屏幕显示
在每个格子中设置不放缩
这样就可以对这几个格子进行拖动
类比横向滑动，纵向滑动如下
swiper
滑动组件，常见于各种广告页面
添加即可实现很基础的滑动形式
导入图片效果如下
可以看到这里图片是被压缩了（高度与整个盒子相等）
这样更直观
子元素中添加
即可
indicator-dots
图片指示点，显示当前图片的第几个图片
indicator-color
指示点颜色设置
indicator-active-color
当前指示点颜色
interval
不同滑块之间的间隔时间，默认是5000毫秒
duration
滑动动画时长
rpx
px是绝对像素，rpx就会根据手机分辨率，显示相对像素
button
普通的按钮
size属性
默认为大
可以设置为mini（但那个实在太小了）
type属性
按钮样式
三种样式可选择
plain属性
是否镂空，效果如下
disable属性
是否当前不可点击，效果如下
loading属性
加载中…
美化
鬼知道为什么我的按钮不能是中等大小的
这是开发者文档里的样例，我只能最大或最小，所以只能自己美化了
以这个进入按钮为例，以下属性设置了宽度大小，上下间距，圆角大小
.bt2{
width: 60%; margin-top: 20rpx;margin-bottom:20rpx;border-radius: 98rpx;}
想进一步美化可以考虑在按钮中加入小图标
但明显这图标和文字不在一条线上（强迫症犯了）给图标以名字，文字封装进view标签内，方便统一管理
在总的按钮wxss中设置柔性布局、 横向布局、项目摆放居中（纵向居中）、对其内容为中心（横向居中）
.bt2{
width: 60%; margin-top: 20rpx;margin-bottom:20rpx;border-radius: 98rpx;
display: flex;flex-direction: row;align-items: center;justify-content: center;}
.btimg{
width: 40rpx;height: 40rpx;margin-right: 10rpx;}
图标就可以好看的多
open-type属性
开放能力，可以外接诸多渠道，让此按钮有特殊功能
checkbox
复选框，效果如下
input
输入框
这里看的不是很清楚，加个边框就好了
placeholder属性
输入框为空的时候占位符
auto-focus属性
进入页面自动准备对文本框输入
switch
开关按钮 
checked属性
是否开启，默认关闭
disabled属性
是否禁用，默认禁用
type属性
分switch和checkbox
color属性
颜色
没什么好说的
icon
progress
进度条
percent属性
合法值是0~100，可以让进度条显示对应的百分比值
show-info属性
展示当前加载百分比的数值
font-size属性
字体大小
border-radius属性
需要和font-size一起使用
圆角大小
activeColor属性
进度条颜色
backgroundColor属性
进度条背景色
active属性
动态加载（从0~percent值）