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

2020-10-15 18:52 更新

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

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

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

JS主體介紹

HelloWorld 工程目錄如下圖所示:

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

img

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

  1. <div class="container">
  2. <text class="title">
  3. Hello {{title}}
  4. </text>
  5. </div>

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

  1. .container {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. left: 0px;
  6. top: 0px;
  7. width: 454px;
  8. height: 454px;
  9. }
  10. .title {
  11. font-size: 30px;
  12. text-align: center;
  13. width: 200px;
  14. height: 100px;
  15. }

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

  1. export default {
  2. data: {
  3. title: 'World'
  4. }
  5. }

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

config.json此文件是配置文件,主要定義了頁面路由和應(yīng)用信息,可根據(jù) IDE 工程和頁面創(chuàng)建向?qū)ё詣油瓿商畛洹?/p>

  1. {
  2. "app": {
  3. "bundleName": "com.huawei.helloworld",
  4. "vendor": "huawei",
  5. "version": {
  6. "code": 1,
  7. "name": "1"
  8. },
  9. "apiVersion": {
  10. "compatible": 3,
  11. "target": 4
  12. }
  13. },
  14. "deviceConfig": {
  15. "default": {}
  16. },
  17. "module": {
  18. "deviceType": ["liteWearable"],
  19. "distro": {
  20. "deliveryWithInstall": true,
  21. "moduleName": "entry",
  22. "moduleType": "entry"
  23. },
  24. "abilities": [{
  25. "name": "default",
  26. "icon": "$media:icon",
  27. "label": "helloworld",
  28. "visible": true,
  29. "type": "page"
  30. }],
  31. "js": [{
  32. "pages": ["pages/index/index"],
  33. "name": "default"
  34. }]
  35. }
  36. }
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號