HaaS UI小程序解决方案基础教学 之 搭建第一个UI页面

名词解释

AliOS Things： 阿里云智能IoT团队自研的物联网操作系统，目前已获得国家

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

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

 

1、HaaS UI简介

HaaS UI是在AliOS Things操作系统上搭建的带屏应用框架，支持使用前端JS语言开发UI。HaaS UI的前端应用框架是基于Vue框架(V2.6版本)扩展的，利用前端技术在一定的限制子集(具体支持的基础组件和样式更详细的内容可参考后续文章)内来搭建页面。

前面文章已介绍过HaaS UI的开发环境搭建，本文主要介绍一下如何使用Vue以及一些基础组件来开发一个简单的页面。

 

2、Vue框架简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的应用提供驱动。

也可以参考查阅Vue官网更详细的介绍：https://cn.vuejs.org/

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

 

3、内置基础组件

HaaS UI框架已经内置支持的基础组件包括以下这些：

组件	描述
	页面滚动组件
	通用容器通用容器
	文本组件
	图片组件
	轮播组件
	输入框组件
	用于滑动进度条的组件
	画布组件
	浮窗组件

相关组件的详细介绍大家可以扫描文章最后的二维码进群咨询，下面就看一下如何基于这些基础组件搭建一个页面。

 

4、使用Vue开发一个HaaS UI页面

Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。一个Vue组件或页面的基本结构，一般分为三个部分：HTML模板、js脚本和样式。按照这样的结构，先来搭第一个HelloWorld页面。

 

4.1、第一个页面

搭建完用模拟器运行效果如下：

这样我们已经成功搭建了第一个HaaS UI页面。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。那如何确认响应式呢？我们只需在js里修改一下this.message，就能看到页面上相应的更新了。

 

4.2、响应式更新

 

4.3、进阶

第一个页面搭建完成了，我们尝试用基础组件搭建更丰富的UI，以下的例子基本囊括了HaaS UI内置的基础组件。另外，如何基于基础组件扩展定制化的前端组件，会有后续文章再介绍。

以上页面基本囊括了HaaS UI内置的基础组件，在模拟器上的效果如下：

 

5、开发者技术支持

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

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