1、前言
关于轻应用的文档请参考:https://help.aliyun.com/document_detail/174810.html
之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。
在 /pages 目录中的 xml 文件用于定义当前这个页面的结构,文件内容遵循 xml 语法。xml文件中主要包含了UI组件的标签,以及UI组件的属性。
2、UI组件标签
以文本组件为例,其标签名称是text,通过以下方式可以创建一个文本组件。组件的通用属性和专有属性如下所示,开发者可以通过属性配置来管理该文本组件。
xml文件示例:
-
<page>
-
<text id="amp" value="amp text" > text>
-
page>
轻应用框架已支持的UI组件及标签汇总如下:
UI组件名称 |
标签 |
按键 |
|
视图容器 |
container |
图标 |
icon |
图片 |
image |
线条 |
line |
列表 |
list |
预加载 |
preload |
进度条 |
progress |
滑动选择器 |
slider |
开关 |
switch |
文本 |
text |
可编辑文本 |
textarea |
另外还有一个重要的标签page,page代表页面,在每个xml文件中有且只能有一个page标签。
3、UI组件属性
3.1、通用属性
通用属性是每一个组件都拥有的属性,目前暂定只有一个id是通用属性,组件的样式是通过id选择器来完成的(在后续的页面样式一章中会详细介绍)。
通用属性 |
说明 |
示例 |
id |
组件的id会在css选择器和组件属性赋值时使用。 |
|
3.2、组件专有属性
每个UI组件都支持不同的属性,例如文本组件(text)中的属性value表示文本内容;按键(button)中的属性包含按键点击的回调事件,以及按键点击后的颜色。
text的特有属性
属性 |
说明 |
类型 |
默认值 |
value |
控件文本 |
string |
- |
button的特有属性
属性 |
说明 |
类型 |
默认值 |
press-color |
按下后的颜色 |
color |
#BEBEBE |
value |
控件文本 |
string |
- |
onClick |
点击回调事件 |
function(id: string) |
- |
其他的组件及属性配置可参考UI组件。
4、参考示例
下面我们通过两个完整的示例来详细介绍一下UI的标签和属性。
text标签
app.json配置:
-
{
-
"version": "0.0.1",
-
"io": {
-
},
-
"pages": [
-
"pages/text/text"
-
],
-
"debugLevel": "DEBUG"
-
}
可以看到轻应用UI的pages中包含一个页面,页面路径为"pages/text/text",可以看到在和app.json和pages文件夹位于同一目录,另外amp为轻应用在linux上编译链接生成的可执行文件。
并且在页面路径下可以看到以下几个文件:
xml文件示例:
-
<page>
-
<text id="amp" value="amp text"> text>
-
page>
通过xml文件中的描述可以看到,该页面中只有一个text文本,该文本的内容为"amp text",id是"amp"。在桌面版Linux环境上执行用例后,运行结果如下:
button 按键
app.json配置:
-
{
-
"version": "0.0.1",
-
"io": {
-
},
-
"pages": [
-
"pages/button/button"
-
],
-
"debugLevel": "DEBUG"
-
}
app.json的配置同上,不再详细描述。
xml文件示例:
-
<page>
-
<button id="button1" value="press"> button>
-
page>
通过xml文件中的描述可以看到,该页面中只有一个button按键,按键上显示的内容为"press"。在桌面版Linux环境上执行用例后,运行结果如下:
开发者技术支持
如需更多技术支持,可加入钉钉开发者群,或者关注微信公众号
更多技术与解决方案介绍,请访问阿里云AIoT首页https://iot.aliyun.com/