名词解释

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框架已经内置支持的基础组件包括以下这些：

组件	描述
<scroller>	页面滚动组件
<div>	通用容器通用容器
<text>	文本组件
<image>	图片组件
<slider>	轮播组件
<input>	输入框组件
<seekbar>	用于滑动进度条的组件
<canvas>	画布组件
<modal>	浮窗组件

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

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

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

4.1、第一个页面

<template>
  <!-- HTML模板 -->
    <div><text class="text">{
   
   {message}}</text></div>
</template>
<script>
// js脚本
export default {
    name: "demo",
  data() {
    return {
      message: 'hello world'
    };
  }
}
</script>
<style scoped>
/* 样式 */
.text {
  font-size: 50px;
  color: red;
}
</style>

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

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

4.2、响应式更新

<template>
  <!-- HTML模板 -->
    <div><text @click="click" class="text">{
   
   {message}}</text></div>
</template>
<script>
// js脚本
export default {
    name: "demo",
  data() {
    return {
      message: 'hello world'
    };
  },
  methods: {
    click() {
      // 修改this.message，界面自动更新
      this.message = 'text clicked.'
    }
  }
}
</script>
<style scoped>
/* 样式 */
.text {
  font-size: 50px;
  color: red;
}
</style>

4.3、进阶

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

<template>
  <scroller>
    <div style="padding:30px">
      <div class="list-item">
        <text class="list-item-title">Flex布局</text>
        <div class="flex-container">
          <div v-for="i of 7" class="flex-container-item" :key="i">
            <text>{
   
   {i}}</text>
          </div>
        </div>
      </div>
      <div class="list-item">
        <text class="list-item-title">image组件</text>
        <div style="flex-direction: row;">
          <image style="width:100px;height:100px; margin:3px"
              src="https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg"/>
          <image style="width:100px;height:100px; margin-right:5px"
              src="https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg"/>
          <image style="width:100px;height:100px; margin-right:5px"
              src="https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg"/>
        </div>
      </div>
      <div class="list-item">
        <text class="list-item-title">slider组件</text>
        <slider style="width:400px;height:150px" showIndicators="true" infinite="true">
          <div v-for="i of 3" :key="i" :style="{'background-color':RGBS[(i-1)%3],'align-items':'center'}">
            <text>{
   
   {i}}</text>
          </div>
        </slider>
      </div>
      <div class="list-item">
        <text class="list-item-title">seekbar组件</text>
        <seekbar style="width: 300px;" handleColor="#108ee9" 
          handleInnerColor="#fff" handleSize="20" trackSize="10" />
      </div>
      <div class="list-item">
        <div style="flex-direction: row;">
          <text class="list-item-title">canvas组件</text>
          <div class="button" @click="drawCanvas">
            <text style="font-size:16px;">点我画圆</text>
          </div>
        </div>
        <canvas ref="canvas" width="300" height="300" style="background-color:#ccc;margin-top:5px;"/>
      </div>
      <div class="list-item">
        <text class="list-item-title" @click="toggleModal">Modal组件(点我弹出)</text>
        <Modal ref="modal" :system="true">
          <div class="modal-content">
            <text style="text-align:center;">this is a system modal.</text>
            <div class="button" @click="toggleModal"><text style="font-size:16px;">close</text></div>
          </div>
        </Modal>
      </div>
      <div class="list-item">
        <text class="list-item-title">Buttons</text>
        <div style="flex-direction: row;">
          <div class="button" @click="buttonClick(1)"><text style="font-size:16px;">Button1</text></div>
          <div class="button" @click="buttonClick(2)"><text style="font-size:16px;">Button2</text></div>
          <div class="button" @click="buttonClick(3)"><text style="font-size:16px;">Button3</text></div>
        </div>
      </div>
    </div>
  </scroller>
</template>
<script>
import Modal from "../packages/modal/index.vue";
export default {
  components: { Modal },
  data(){
    return {
      RGBS: ['#f00','#0f0','#00f'],
    };
  },
  mounted() {
    this.drawCanvas();
  },
  methods: {
    buttonClick(i) {
      let modal = $falcon.jsapi.modal;
      modal && modal.toast({
        content: `Button${i} clicked.`,
        duration: 1000,
      });
    },
    drawCanvas() {
      let ctx = createCanvasContext(this.$refs.canvas);
      ctx.fillStyle = this.RGBS[Math.floor(Math.random()*3)];
      ctx.beginPath();
      ctx.arc(Math.floor(Math.random()*300),Math.floor(Math.random()*300),
        Math.floor((Math.random()*20)+10),0,3.15*2);
      ctx.fill();
    },
    toggleModal() {
      this.$refs.modal.toggle();
    },
  },
}
</script>
<style scoped>
.list-item {
  flex-direction: column;
  margin-bottom: 30px;
}
.list-item-title {
  font-size: 30px;
  color: black;
  margin-bottom: 5px;
}
.flex-container {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #888;
  width: 600px;
}
.flex-container-item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 5px;
  align-items: center;
  justify-content: center;
}
.button {
  margin-right: 20px;
  padding: 10px;
  background-color: #888;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
}
.button:active {
  background-color: #aaa;
}
.modal-content {
  width: 290px;
  height: 150px;
  padding: 10px;
  background-color: white;
  border-radius: 20px;
  align-items: center;
  justify-content: center;
}
</style>

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

5、开发者技术支持

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

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

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

1、HaaS UI简介

2、Vue框架简介

3、内置基础组件

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

4.1、第一个页面

4.2、响应式更新

4.3、进阶

5、开发者技术支持

猜你喜欢

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

1、HaaS UI简介

2、Vue框架简介

3、内置基础组件

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

4.1、第一个页面

4.2、响应式更新

4.3、进阶

5、开发者技术支持

猜你喜欢

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