JavaScript轻应用UI介绍-阿里云开发者社区

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

JavaScript轻应用UI介绍

简介: 本文档在此基础上介绍下轻应用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

页面样式表

 

注意: 为了方便开发者,轻应用规定这三个文件必须具有相同的路径与文件名。

轻应用代码结构示例:

  1. MyAwesomeApp/
  2. ├── README.md
  3. ├── app.js
  4. ├── app.json
  5. └── pages/
  6.     ├── page1/
  7.     │   ├── page1.js
  8.     │   ├── page1.xml
  9.     │   └── page1.css
  10.     └── page2/
  11.         ├── page2.js
  12.         ├── page2.xml
  13.         └── page2.css

 

3、页面路径

app.json 中需要增加页面路径的配置,示例如下:

  1. {
  2.   "pages": [
  3.     "pages/page1/page1",
  4.     "pages/page2/page1"
  5.   ]
  6. }

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、脚本执行

获取执行的脚本及轻应用模拟运行固件

轻应用代码及固件的结构如下:

  1. myApp/
  2. ├── amp                 #轻应用固件
  3. ├── app.js             
  4. ├── app.json
  5. └── pages/
  6.     ├── page1/
  7.     │   ├── page1.js
  8.     │   ├── page1.xml
  9.     │   └── page1.css
  10.     └── page2/
  11.         ├── page2.js
  12.         ├── page2.xml
  13.         └── page2.css

在桌面版linux环境下打开终端工具,并进入用例目录,在该目录下输入以下命令,完成用例执行:

./amp,如下图所示:

 

开发者技术支持

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

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

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

相关文章
阿里云服务器大数据实例规格族d1ne和d1特点及具体型号介绍
本文介绍阿里云服务器大数据型实例规格族d1ne和d1实例规格族的特点,具体型号,适用场景等基本参数,并列出了具体的实例规格。 大数据网络增强型实例规格族 d1ne 规格族特点 I/O优化实例 支持IPv6 仅支持SSD云盘和高效云盘 实例配备大容量、高吞吐SATA HDD本地盘,辅以最大35 Gbit/s实例间网络带宽 处理器与内存配比为1:4,为大数据场景设计 处理器:2.
1563 0
《HTML5和JavaScript Web应用开发》——导读
本书的目标是带你经历研究和开发的所有步骤,在当今这个新颖而大胆的世界中,构建移动优先、灵敏、先进的Web应用以及基于任何JavaScript架构的应用程序。每一章都包含了实际的例子,并使用了所讨论的每个规范。
1156 0
HaaS EDU场景式应用整体介绍
HaaS EDU K1是HaaS家族中针对教育场景推出的、集众多传感器于一身的嵌入式教育开发板,是学习物联网相关技术的最好载体。
97 0
JavaScript轻应用高级组件
除了基础的功能组件外,JavaScript轻应用还提供了阿里云智能物联网平台连接以及语音播报等能力,具体介绍如下。
49 0
SQL2000系统表、存储过程、函数的功能介绍及应用
转自:http://blog.csdn.net/zlp321002/article/details/480925 ----系统表---------------------------------------------------------------------------------------------------- 虽然使用系统存储过程、系统函数与信息架构视图已经可以为我们提供了相当丰富的元数据信息,但是对于某些特殊的元数据信息,我们仍然需要直接对系统表进行查询。
654 0
1441
文章
305
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载