1、背景

2002年日本东芝生产的采用Linux QT方案的广告机经由香港第一次进入到深圳特区安装到大巴之上，首次取代了传统的广告海报及灯箱。2010年~2011年期间安卓出现，且随着多年安卓生态的发展，安卓也被广泛应用到商显行业，同时3G、4G等通信技术的发展，使得设备联网更加便捷。物联网和5G的高速发展，使得智能终端带屏、上云成为可能。智慧城市建设，仍是“十三五”工作重点，预计到2021年市场规模达到18.7万亿，为带屏终端带来发展机遇。HaaS要解决的不仅是万物互联，更是万屏互联。IoT终端设备向网络化、带屏化发展，真正实现万屏互联，需要一个轻量的应用框架来支撑，HaaS UI应运而生。

2、什么是HaaS UI

HaaS UI是一套应用在HaaS硬件上的轻量级IoT小程序解决方案，支持AliOS Things内核，支持用JS开发UI应用，同时也支持Native App(不做主要推荐)。HaaS UI的框架如下：

自底向上分为4个基础模块：

1. 内核：支持AliOS Things内核系统，基于AliOS Things系统图形框架。详见AliOS Things相关文章。

2. UI渲染框架：通过Canvas API及关联模块实现一层接口层隔离，在不同系统能力上使用不同的图形渲染框架，对接Skia不同版本。将渲染、组件、页面进行分开，减少应用框架层对图形渲染的依赖，达到解耦的目的。

3. 应用管理和生命周期管理：有自己完整的应用 & 页面生命周期，类似Android应用生命周期。

4. JS应用框架：采用的JS前端框架是基于Vue.js前端框架，基于当前容器所支持的标签和样式子集实现的Vue组件都可直接使用。如下图所示：

3、名词解释

AliOS Things： 阿里云智能IoT团队自研的物联网操作系统

HaaS：全称是Hardware as a Service，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务

HaaS UI：全称是Hardware as a Service User Interface，是源自AliOS Things操作系统上的一套应用&图形解决方案，支持C/C++和 JS两种开发语言 

4、为什么选用JS

三点主要原因：

1. 三个“热”的特性：热部署、热更新、热加载。应用热更新，让设备应用的升级不依赖OTA，可以针对应用&单页独立升级。

2. 开发者生态：基于JS语言，降低开发门槛，引入前端的开发者，提升开发效率。

3. 开源方案：JS引擎 + 图形框架 + 开源前端框架，聚集社区开发者力量。

5、为什么选择Vue.js

Vue.js作者为尤雨溪，一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，对JS开发者比较友好

Vue.js 的核心库只关注视图层，并且非常容易学习，不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩

版本：V2.6版本

官网：https://cn.vuejs.org/

入门：https://www.runoob.com/vue2/vue-tutorial.html

6、HaaS UI JS应用

1. 每个应用都有app.js，包含全局应用生命周期监听。该js为应用入口，启动时执行，并导出一个继承自$falcon.App的子类承载应用生命周期。

2. 每个页面对应一个page.js文件（可选，也可直接对应一个.vue文件。此情况框架会自动创建一个对应的Page实例）。

3. Page包含一个Falcon(动态卡片)实例，每个Falcon实例对应一个Vue根实例。

4. 每个Vue根实例可由多个组件组成。

7、演示效果

HaaS UI 可以满足各种场景下的UI页面开发，后续会有相关网站介绍各种组件的用法和演示效果，下面为设备上的演示效果

表盘

天气预报

8、基础技术指标&能力

9、开源计划

HaaS UI将配合AliOS Things最新版本一同开源，开发者可以在HaaS硬件开发板体验用最高效的方法搭建IoT设备上的屏幕显示能力和带屏应用。请关注我们关于开源计划的最新公告。

10、开发者技术支持

如需更多技术支持，可加入钉钉开发者群

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