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/

JavaScript轻应用UI介绍相关推荐

浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍
为什么80%的码农都做不了架构师?>>> 日期:2012-4-17 来源:GBin1.com 在线演示本地下载大家是不是在开发设计过程中遇到如下情况?某些浏览器不支持H ...
javascript中in用法介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
JavaScript压缩工具JSA使用介绍
JavaScript压缩工具JSA使用介绍 JSA绝对是我使用过的JS压缩工具中最上乘的一个.认识它是从ligerUI开始.在ligerUI的QQ讨论组里,大神--ligerUI的作者告诉我他的lig ...
16个Javascript的Web UI库、框架及工具包
目前,几乎所有的富Web应用程序都依赖一套UI管理,程序库或框架(或工具包),他们不仅简化了应用程序开发,他们还提供兼容的.可靠的及很强交互性的用户界面.除此之外您会请求哪些呢? 当前,广泛应用的We ...
HaaS600 Kit的JavaScript轻应用开发配置
1.前言关于轻应用的文档请参考轻应用总览 HaaS600 Kit 是一款基于 HaaS600系列模组评估的高性价比开发板.可应用于共享控制.金融支付.智能语音.泛工业等场景的智能硬件产品开发. Ha ...
android教程 - android ui 介绍,多图详解 “Android UI”设计官方教程
我们曾经给大家一个<MeeGo移动终端设备开发UI设计基础教程>,同时很多朋友都在寻找Android UI开发的教程,我们从Android的官方开发者博客找了一份幻灯片,介绍了一些Andr ...
Javascript中 toFixed 规则介绍及其改进方法
今天看了司徒大神的一篇博文,这篇文章专门介绍了toFixed的规则,搬来记录一下.文末有原文链接. javascript中toFixed使用的是银行家舍入规则. 银行家舍入:所谓银行家舍入法,其实质是 ...
JavaScript字符串String常用方法介绍
JavaScript字符串在底层是一个字符串数组,比如hello字符串在底层是["h","e","l","l",&quo ...
编写可维护的javascript代码---开篇（介绍自动报错的插件）
文章开篇主要推荐了2款检测编程风格的工具: JSLint和JSHint: jsLint是由Douglas Crockford创建的.这是一个通用的javascript代码质量检测工具,最开始JSLin ...

JavaScript轻应用UI介绍