大纲:
一、介绍
WXML是微信小程序团队设计的一套标签语言,可以构建出页面的结构
借助WXML提供的各种组件,可以很方便的实现文字的嵌入、图片的嵌入、视频的嵌入、各种能力的嵌入
二、基础知识
(1)WXML树:
注意:不一定所有的元素都有文本内容,但是都可以有子元素
(2)语法规则
2.1 所有的元素都需要闭合标签
<text> Hello World </text>
(开始标签) (结束标签)
2.2 所有的元素都必须正确嵌套
<view> <text> Hello World </text> </view>
(开始标签1) (开始标签2) (结束标签2) (结束标签1)
2.3 属性值必须用引号包围
<text id = "myText"> myText </text>
参数名 属性值
2.4 标签必须用小写
2.5 WXML中连续多个空格会合并成1个空格
(3)WXML的共同属性:
由于某些属性被几乎所有的组件使用、这些属性被抽离了出来,形成组件的共同属性
属性名 | 类型 | 描述 | 注解 |
id | String | 组件的唯一标识 | 页面内唯一 |
class | String | 组件样式类 | 在对应的wxss内定义 |
style | String | 组建的内联样式 | 常用于动态样式 |
hidden | Boolean | 组件是否显示 | 默认显示 |
data-* | Any | 自定义数据 | 触发时会进行上报 |
bind*/catch* | EventHandler | 组件事件 |
注释:
string 字符串类型
Boolean 布尔类型
Any 可以为任何类型
EventHandler 事件处理函数名
(关于事件、后续详解,脑海里要有一个印象)
关于组件:
组件是视图层的基本组成单元。 组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。 <tagname property="value"> Content goes here ... </tagname> 注意:所有组件与属性都是小写,以连字符-连接
(了解、后续会一一介绍)
基础组件分为以下七大类:
视图容器(View Container):
基础内容(Basic Content):
表单(Form):
导航(Navigation):
多媒体(Media):
地图(Map):
画布(Canvas):
所有组件都有的属性:
属性名 类型 描述 注解
id String 组件的唯一标示 保持整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data- Any 自定义属性 组件上触发的事件时,会发送给事件处理函数
bind / catch* EventHandler 组件的事件 详见事件