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/