1、前言
关于轻应用的文档请参考：HaaS轻应用使用文档
此文档对轻应用框架(不含UI部分)的使用做了完整的阐述。
本文档在此基础上介绍下轻应用UI是如何开发的。与前者相比，从应用代码的文件结构看，需要增加页面文件，并在全局配置中增加页面路径相关的信息即可。
2、文件结构
轻应用分为 app 和 page 两部分。app 用来描述整个应用，page 用来描述各个页面。
因此，在无屏应用中，轻应用仅包含 app 部分即可，当设备带屏需要UI交互时，则引入 page 部分。
app 由两个文件组成，必须放在项目的根目录：
| 文件 |
必需 |
作用 |
| app.js |
是 |
轻应用入口文件 |
| app.json |
是 |
轻应用全局设置 |
每一个 page 由一套如下文件组成，分别是：
| 文件 |
必需 |
作用 |
| pageName.js |
是 |
页面逻辑 |
| pageName.xml |
是 |
页面结构 |
| pageName.css |
否 |
页面样式表 |
注意： 为了方便开发者，轻应用规定这三个文件必须具有相同的路径与文件名。
轻应用代码结构示例：
-
MyAwesomeApp/
-
├── README.md
-
├── app.js
-
├── app.json
-
└── pages/
-
├── page1/
-
│ ├── page1.js
-
│ ├── page1.xml
-
│ └── page1.css
-
└── page2/
-
├── page2.js
-
├── page2.xml
-
└── page2.css
3、页面路径
app.json 中需要增加页面路径的配置，示例如下：
-
{
-
"pages": [
-
"pages/page1/page1",
-
"pages/page2/page1"
-
]
-
}
app.json 中的 pages 为数组属性，数组中每一项都是字符串，用于指定轻应用的页面，pages 数组的每一项代表对应页面的路径信息。其中，第一项代表轻应用的首页，系统启动后，默认会自动加载轻应用的首页。
为了便于开发者配置，页面路径不需要写任何后缀，框架会自动去加载同名的.js
4、轻应用UI编译运行
4.1、轻应用源码获取
轻应用代码即将开源，在后续文档中会增加相关链接。
4.2、环境安装
OS安装
轻应用UI基于桌面版的linux环境运行，建议编译也在同一环境下，轻应用UI验证时使用的的OS环境如下：ubuntu-16.04.3-desktop-amd64
依赖库安装
运行用例前，确保SDL2库已安装，在linux环境下，打开终端工具，执行以下命令安装：
4.3、编译链接
下载代码后，进入根目录下，执行make m=ui，直到编译完成：
生成的固件amp在amp/build/bin目录下。
4.4、脚本执行
获取执行的脚本及轻应用模拟运行固件
轻应用代码及固件的结构如下：
-
myApp/
-
├── amp #轻应用固件
-
├── app.js
-
├── app.json
-
└── pages/
-
├── page1/
-
│ ├── page1.js
-
│ ├── page1.xml
-
│ └── page1.css
-
└── page2/
-
├── page2.js
-
├── page2.xml
-
└── page2.css
在桌面版linux环境下打开终端工具，并进入用例目录，在该目录下输入以下命令，完成用例执行：
./amp，如下图所示：
开发者技术支持
如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号
更多技术与解决方案介绍，请访问阿里云AIoT首页https://iot.aliyun.com/