JavaScript轻应用:UI组件的属性配置-阿里云开发者社区

开发者社区> 开发者小助手> 正文

JavaScript轻应用:UI组件的属性配置

简介: 之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。
+关注继续查看

1、前言

关于轻应用的文档请参考:https://help.aliyun.com/document_detail/174810.html

之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。

/pages 目录中的 xml 文件用于定义当前这个页面的结构,文件内容遵循 xml 语法。xml文件中主要包含了UI组件的标签,以及UI组件的属性。

2、UI组件标签

以文本组件为例,其标签名称是text,通过以下方式可以创建一个文本组件。组件的通用属性和专有属性如下所示,开发者可以通过属性配置来管理该文本组件。

xml文件示例:

  1. <page>
  2. <text id="amp" value="amp text" > text>
  3. page>

轻应用框架已支持的UI组件及标签汇总如下:

UI组件名称

标签

按键

button

视图容器

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配置:

  1. {
  2. "version": "0.0.1",
  3. "io": {
  4. },
  5. "pages": [
  6. "pages/text/text"
  7. ],
  8. "debugLevel": "DEBUG"
  9. }

可以看到轻应用UI的pages中包含一个页面,页面路径为"pages/text/text",可以看到在和app.json和pages文件夹位于同一目录,另外amp为轻应用在linux上编译链接生成的可执行文件。

并且在页面路径下可以看到以下几个文件:

xml文件示例:

  1. <page>
  2. <text id="amp" value="amp text"> text>
  3. page>

通过xml文件中的描述可以看到,该页面中只有一个text文本,该文本的内容为"amp text",id是"amp"。在桌面版Linux环境上执行用例后,运行结果如下:

button 按键

app.json配置:

  1. {
  2. "version": "0.0.1",
  3. "io": {
  4. },
  5. "pages": [
  6. "pages/button/button"
  7. ],
  8. "debugLevel": "DEBUG"
  9. }

app.json的配置同上,不再详细描述。

xml文件示例:

  1. <page>
  2. <button id="button1" value="press"> button>
  3. page>

通过xml文件中的描述可以看到,该页面中只有一个button按键,按键上显示的内容为"press"。在桌面版Linux环境上执行用例后,运行结果如下:

开发者技术支持

如需更多技术支持,可加入钉钉开发者群,或者关注微信公众号

更多技术与解决方案介绍,请访问阿里云AIoT首页https://iot.aliyun.com/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
[译] 为多个品牌和应用构建 React 组件
本文讲的是[译] 为多个品牌和应用构建 React 组件,沃尔玛大家庭由多个不同的品牌组成,其中包括 Sam’s Club, Asda,和例如 Walmart Canada 之类的地区分支。电商应用通常会使用大量类似的功能,例如信用卡组件、登录表单、新手引导、轮播图、导航栏等等。
1076 0
IIS6.0、IIS7.5的伪静态组件ISAPI_Rewrite安装和配置方法
Win7/Windows2003下IIS6.0、IIS7.5的伪静态组件安装和伪静态配置方法,还包括常用的伪静态规则使用方法。 1)下载IIS伪静态组件——ISAPI_Rewrite3完全破解版 ISAPI_Rewrite3非常好用,是个人见过最好用同时可以支持多站点的IIS伪静态组件!1、官网下载(http://www.
1497 0
linux和windows互传文件/用户配置文件和密码配置文件/用户组管理/用户管理
2.27linux和windows互传文件 3.1 用户配置文件和密码配置文件 3.2 用户组管理 3.3 用户管理 linux和windows互传文件 显示日期date [root@centos_1 ~]# date 2017年 11月 21日 星期二 08:38:...
1059 0
JavaScript轻应用UI介绍
本文档在此基础上介绍下轻应用UI是如何开发的。与前者相比,从应用代码的文件结构看,需要增加页面文件,并在全局配置中增加页面路径相关的信息即可。
77 0
JavaScript轻应用:UI组件的属性配置
之前的文档已经介绍过,轻应用UI主要包含三部分:页面结构(xml文件)、页面样式(css文件)和页面逻辑(js文件),这里主要介绍一下页面结构的组成。
81 0
1441
文章
305
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载