鸿蒙OS 轻量级智能穿戴开发概述

2020-10-15 18:52 更新

为了方便开发者,本文档提供了全量接口和组件中适用于轻量级智能穿戴的部分,以及构建布局、绘制样式、事件交互、页面路由等主要场景的开发示例。

通过搭建环境和创建项目、JS 主体介绍、运行应用,开发者可以快速体验轻量级智能穿戴应用的开发。

搭建环境和创建项目

JS主体介绍

HelloWorld 工程目录如下图所示:

图1 目录结构

img

pages/index/index.hml此文件定义了 index 页面的布局,在 index 页面中用到的组件,以及这些组件的层级关系。index.hml文件包含了一个 text 组件,内容为“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 页面的业务逻辑,比如数据绑定,事件处理等。此处,变量“title”采用数据绑定的形式定义为字符串“World”,用户可以在需要的业务逻辑中修改“title”的值。

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

resources此目录用于存放系统级资源配置文件,如应用图标等。

config.json此文件是配置文件,主要定义了页面路由和应用信息,可根据 IDE 工程和页面创建向导自动完成填充。

  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. }
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号