1、前言

本文介紹如何快速創建一個HaaS UI應用, 並對基本環境和應用結構進行簡單的說明.

2、名詞解釋

AliOS Things：阿里雲智能IoT團隊自研的物聯網操作系統

HaaS：全稱是Hardware as a Service，阿里雲智能IoT團隊基於AliOS Things系統推出的硬件即服務

HaaS UI：全稱是Hardware as a Service User Interface，是源自AliOS Things操作系統上的一套應用&圖形解決方案，支持C/C++和 JS兩種開發語言

3、環境準備

Nodejs:從Nodejs官網下載最新穩定版安裝,下載地址:https://nodejs.org/zh-cn/download/

檢查安裝是否成功:node -v 顯示版本號即成功.

國內可切換到淘寶npm鏡像,詳細使用說明:https://developer.aliyun.com/mirror/NPM

npm install -g cnpm --registry=https://registry.npm.taobao.org

aiot-vue-cli工具安裝

aiot-vue-cli是一個npm模塊,用於HaaS UI應用開發的工具,包括初始化,構建,預編譯等功能.同時正在開發中的HaaS UI模擬器未來也會集成進這個工具.

安裝命令:npm install aiot-vue-cli -g

4、HaaS UI應用

4.1、應用創建與初始化
應用可通過以下命令創建與初始化:

aiot-cli create [name] #創建工程
cd [name]
npm install #安裝依賴

注意:如果出現如下npm更新提示,請暫時不要更新.否則會導致版本兼容問題.

好了現在我們已經創建好了一個Haas UI應用,並且安裝好了依賴.我們可以通過命令npm run start在瀏覽器上對應用進行預覽.新創建的應用帶有兩個頁面和一個組件,可以在web預覽中看到如下界面:

4.2、應用工程文件結構
完整的工程文件結構.工程代碼存放於src/目錄下.各目錄和文件說明如下:

├── configs 打包和和預覽相關配置信息,應用開發時一般不需要修改
├── package.json  項目描述和依賴
├── src 源碼目錄
│   ├── app.json 應用描述信息
│   ├── app.js  應用入口,應用生命週期回調處理
│   ├── bootstrap.web.js  web預覽時的入口,不要修改
│   ├── components  組件目錄,可自定義
│   │   └── HelloWorld.vue  //組件文件
│   ├── images  圖片目錄,可自定義
│   │   └── image1.png  圖片文件
│   └── pages 頁面目錄,可自定義
│       ├── index
│       │   ├── index.js  //頁面生命週期文件
│       │   └── index.vue //頁面根組件
│       └── page
│           └── page.vue  //頁面根組件
├── web web預覽相關資源,開發中無需修改
└── webpack.config.js web預覽相關,無需修改

4.3、構建命令說明

命令	說明	其他
npm run start	基於瀏覽器開發/調試/預覽
npm run build	構建&打包	不對生成的js進行處理,打成一個開發包
npm run build:dev	構建	只生成js,不打包
npm run build:bin(可選)	構建&預編譯&打包	將js預編譯後打包(mac,windows)
npm run build:prod(可選)	打正式包	將js混淆後轉成bin並打包(mac,windows)

以上就是快速創建一個Haas UI應用的步驟.目前可基於web開發,然後通過build命令構建應用包(amr後綴文件),拷貝到Haas板子上對應目錄執行即可看到前面web中顯示的效果.

5、模擬器

HaaS UI提供了Mac和Windows上的模擬器，可以用於沒有設備時，快速驗證開發頁面。

Mac模擬器：下載地址

Windows模擬器：下載地址

模擬器目錄結構說明(Mac環境，Windows下類似)：

├── bin                         可執行程序目錄
│   └── appx
└── resources               資源目錄
    ├── cfg.json        配置信息，可配置模擬器分辨率
    ├── fonts               字體目錄
    │   └── Roboto-Regular.ttf
    ├── framework       JS運行環境
    │   └── js-framework.min.bin
    ├── local_packages.json     本地預置應用的配置信息
    └── presetpkgs              本地預置應用包
        ├── 8180000000000020.amr

運行模擬器需要先cd到模擬器所在路徑，再執行./bin/appx，（因為模擬器是根據相對路徑來加載資源目錄的）

運行方法：
1、./bin/appx （運行模擬器預置的應用包）
2、./bin/appx {appPath} {page} (傳入應用構建出來的目錄絕對路徑來運行，page可選)
示例效果：./bin/appx {工程構建的絕對路徑}/.falcon_/index
實際運行效果如下：

6、開發者技術支持

如需更多技術支持，可加入釘釘開發者群，或者關注微信公眾號

更多技術與解決方案介紹，請訪問阿里雲AIoT首頁https://iot.aliyun.com/

HaaS UI小程序解決方案基礎教學之一: 快速開始