名詞解釋

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、第一個頁面

<!-- 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、響應式更新

<!-- 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内置的基礎元件。另外，如何基于基礎元件擴充定制化的前端元件，會有後續文章再介紹。

<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、開發者技術支援

1、HaaS UI簡介

2、Vue架構簡介

3、内置基礎元件

4、使用Vue開發一個HaaS UI頁面

4.1、第一個頁面

4.2、響應式更新

4.3、進階

5、開發者技術支援

繼續閱讀

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

C++實作簡單順序表

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

C經典書籍筆記——C陷阱與缺陷②(文法陷阱之優先級)一、錯誤案列二、優先級規律

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

線性表之順序表的實作

C++判斷素數、求最大公約數代碼判斷一個數是否為素數求兩個數的最大公約數

SequoiaDB巨杉資料庫C++驅動概述

layui多任務上傳添加進度條

HaaS UI小程式解決方案基礎教學之二： 搭建第一個UI頁面1、HaaS UI簡介2、Vue架構簡介3、内置基礎元件4、使用Vue開發一個HaaS UI頁面4.1、第一個頁面4.2、響應式更新4.3、進階5、開發者技術支援

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、開發者技術支援