JavaScript轻应用UI介绍

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环境下，打开终端工具，执行以下命令安装：

 sudo apt-get install libsdl2-dev

 

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/