鴻蒙OS 輕量級(jí)智能穿戴開發(fā)概述

為了方便開發(fā)者，本文檔提供了全量接口和組件中適用于輕量級(jí)智能穿戴的部分，以及構(gòu)建布局、繪制樣式、事件交互、頁面路由等主要場(chǎng)景的開發(fā)示例。

通過搭建環(huán)境和創(chuàng)建項(xiàng)目、JS 主體介紹、運(yùn)行應(yīng)用，開發(fā)者可以快速體驗(yàn)輕量級(jí)智能穿戴應(yīng)用的開發(fā)。

搭建環(huán)境和創(chuàng)建項(xiàng)目

• 搭建環(huán)境：請(qǐng)參考下載和安裝軟件和配置開發(fā)環(huán)境。
• 創(chuàng)建項(xiàng)目：請(qǐng)參考創(chuàng)建一個(gè)新的工程，設(shè)備類型選擇“Lite Wearable”。

JS主體介紹

HelloWorld 工程目錄如下圖所示：

圖1 目錄結(jié)構(gòu)

pages/index/index.hml：此文件定義了 index 頁面的布局，在 index 頁面中用到的組件，以及這些組件的層級(jí)關(guān)系。index.hml文件包含了一個(gè) text 組件，內(nèi)容為“Hello World”。

<div class="container">
    <text class="title">
      Hello {{title}}
    </text>
</div>

pages/index/index.css：此文件定義了 index 頁面的樣式。index.css 文件定義了“container”和“title ”的樣式。

.container {
  display: flex;  
  justify-content: center;  
  align-items: center;  
  left: 0px;  
  top: 0px; 
  width: 454px;  
  height: 454px;
}
.title {
  font-size: 30px;  
  text-align: center;  
  width: 200px;  
  height: 100px;
}

pages/index/index.js：此文件定義了 index 頁面的業(yè)務(wù)邏輯，比如數(shù)據(jù)綁定，事件處理等。此處，變量“title”采用數(shù)據(jù)綁定的形式定義為字符串“World”，用戶可以在需要的業(yè)務(wù)邏輯中修改“title”的值。

export default {
    data: {
        title: 'World'
    }
}

resources：此目錄用于存放系統(tǒng)級(jí)資源配置文件，如應(yīng)用圖標(biāo)等。

config.json：此文件是配置文件，主要定義了頁面路由和應(yīng)用信息，可根據(jù) IDE 工程和頁面創(chuàng)建向?qū)ё詣?dòng)完成填充。

{
    "app": {
        "bundleName": "com.huawei.helloworld",
        "vendor": "huawei",
        "version": {
            "code": 1,
            "name": "1"
        },
        "apiVersion": {
            "compatible": 3,
            "target": 4
        }
    },
    "deviceConfig": {
        "default": {}
    },
    "module": {
        "deviceType": ["liteWearable"],
        "distro": {
            "deliveryWithInstall": true,
            "moduleName": "entry",
            "moduleType": "entry"
        },
        "abilities": [{
            "name": "default",
            "icon": "$media:icon",
            "label": "helloworld",
            "visible": true,
            "type": "page"
        }],
        "js": [{
            "pages": ["pages/index/index"],
            "name": "default"
        }]
    }
}