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

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组件名称	标签
按键	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选择器和组件属性赋值时使用。	<text id="inc"> </text>

 

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/