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;
}
运行结果: