小程序之组件

1.　　一个小程序页面可以分解成多个部分组成，组件就是小程序页面的基本组成单元。组件是在WXML模板文件声明中使用的，小程序使用标签名来引用一个组件，通常包含开始标签和结束标签，该标签的属性用来描述该组件。比方说

　　<view style='padding-bottom:10%'>
     　　 <text>学生管理系统</text>
　　</view>

　　　需要注意，所有组件名和属性都是小写，多个单词会以英文横杠 "-" 进行连接。

2.　　组件共有的属性：（感觉常用的一些，非常细节的可以去看开发文档，那里面都有）

　　id          　　　String     　　组件的唯一标示   　　　保持整个页面唯一
　　class      　　 String    　　 　组件的样式类    　　在对应的WXSS中定义的样式类
　　style      　　 String     　　　组件的内联样式    可以通过数据绑定进行动态设置的内联样式
　　hidden    　　Boolean   　　 　组件是否显示    　　　所有组件默认显示     
　　data-*　　　　Any　　　　　自定义属性　　　　组件上触发的事件时，会发送给事件处理函数

3.　　组件都拥有各自自定义的属性，可以对该组件的功能或者样式进行修饰，以image图片组件为例，其属性列表如表所示

　　　

4.　　常用的一些组件：

　　　1）视图容器

　　　　组件名    　　　　　　　　　　　　　　　　说明
　　　　view   　　　　　　 　　　　　　　　　　视图容器
　　　　scroll-view    　　　　　　　　　　　可滚动视图容器
　　　　swiper    　　　　　　　　　　　　　　滑块视图容器
　　　　movable-view/movable-area    　　可移动的视图容器

　　　2）基础内容

　　　　组件名    　　　说明
　　　　icon    　　　　图标
　　　　text    　　　　文字
　　　　rich-text   　富文本
　　　　progress    　进度条

　　　3）表单

　　　　标签名    　　　说明
　　　　button    　　按钮
　　　　form   　　　　表单
　　　　input    　　输入框
　　　　label    　　　标签
　　　　textarea    多行输入框
　　　　picker    　列表选择器

　　　4）导航

　　　　组件名    　　　说明
　　　　navigator    页面链接

　　　5）多媒体

　　　　组件名    说明
　　　　audio    音频
　　　　image    图片
　　　　video    视频

　　　6）地图

　　　　组件名    说明
　　　　map    地图

5.　　介绍完组件写一个样例看一下

　　　先看样式，我们看到的属性有一个内联样式style和类样式class

　　　内联样式接受动态样式，在运行时会进行解析，用于控制样式的调整。定义单一元素，或使用中发生较大变化的元素。

　　　类样式是用于统一类型的多个元素，重复使用的元素，从而减少重复代码的数量。

　　　先看class和style，class和style的最后的目的是一样的，只不过class是对当前容器命名后，在wxss页面进行样式的编写，而style是直接在页面语句中的语句中进行编写，在程序执行的时候，style>class；

　　<!--index.wxml-->
　　<view clas="index" style="background: white">
 　　 <text>Hello World!</text>
　　</view>

　　page {
 　　 background: black;
　　}
　　.index
　　{
 　　 background: black;
　　}　

　　　运行结果：