HarmonyOS鸿蒙开发指南:基于ArkTS开发 轻量级智能穿戴 体验应用、构建布局、绘制样式​​​​​​​和交互事件

目录

体验应用

构建布局

绘制样式​​​​​​​

交互事件

---

体验应用

JS主体介绍

HelloWorld工程目录如下图所示：

图1 目录结构

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

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

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

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

{
    "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"
        }]
    }
}

构建布局

布局说明

方舟开发框架以454px（这里，px是逻辑像素，非物理像素）为基准宽度。在构建页面布局时，需要对每个基本元素思考以下几个问题：

• 该元素的尺寸和排列位置
• 是否有重叠的元素
• 是否需要设置对齐、内间距或者边界
• 是否包含子元素及其排列位置
• 是否需要容器组件

将页面中的元素分解之后再逐个基本元素进行自上而下的实现，可以减少多层嵌套造成的视觉混乱，尽可能的避免出现逻辑混乱，还可以提高代码的可读性，方便对页面做后续的调整和增改。

使用组件

一个页面由组件声明（.hml）、css样式(.css)和script脚本(.js)三部分构成。组件声明是在“pages/index/index.hml”文件中实现。首先，分析要显示 Hello World需要用到哪些组件。显示文字使用<text>组件，使用一个容器组件来包裹<text>组件，这里以<div>为例进行说明。index.hml文件中代码示例如下：

<!-- 需要注意的是index.hml文件中有且仅有一个根节点。 -->
<div style="width: 454px; height: 454px;">
    <!-- style中是组件的样式信息，关于样式的相关介绍会在下一小节详细讲述。 -->
    <text style="width: 200px; height: 100px;"> 
        <!-- <text>组件中要显示的内容 -->
        Hello World
    </text>
</div>

现在已经完成了一个简单应用开发的第一步，在后续章节中将继续介绍样式、事件的开发方法，不断优化和完善此应用。

绘制样式

组件标签中类似“style="width:454px;height:454px;"”的语句即为样式设置语句，通过样式可以设置组件的显示大小、背景颜色、对齐方式等属性。本章节以<div>和<text>组件为例来介绍如何设置样式，样式主要有三种设置方式：行内样式、选择器样式和动态绑定样式。三种方式设置的样式效果一致，只是写法不同。

行内样式

行内样式是将样式内容直接放到组件的style属性中，多个样式值则是通过分号间隔。在示例中，我们可以看到通过行内样式对div和text组件设置了高度和宽度属性。

<div style="width: 454px; height: 454px;">
<text style="width: 200px; height: 100px;">

我们可以通过设置组件的部分样式，使得text组件中的内容显示在屏幕的最中间。

<!-- 设置div中的子组件为弹性布局，并且居中显示；保证text组件显示在屏幕中间。-->
<div style="width: 454px; height: 454px; display: flex; justify-content: center; align-items: center;"> 
<!-- 设置text组件中文字居中显示；保证Hello World显示在屏幕最中间。-->
<text style="width: 200px; height: 100px; font-size: 30px; text-align: center;"> 

选择器样式

使用行内样式存在以下缺点：

• 针对每个组件都要设置样式。
• 如果多个组件需要设置相同的样式，则每个组件都写同样的样式，导致代码冗余；而且修改样式时，需要修改所有代码，工作量大。

针对以上问题，我们可以采用选择器样式，将所有的样式代码写到pages/index/index.css文件中，然后通过class、id等方式和组件关联起来。以上节中的代码为例，修改后的代码如下：

/* index.css */
/* 类选择器，所有组件中class="container" 的组件都会使用该样式。*/
.container { 
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}
/* ID选择器，id为title的组件使用的样式 */
#title { 
    font-size: 30px;
    text-align: center;
    width: 400px;
    height: 100px;
    /* 设置文字颜色为红色 */
    color: #ff0000; 
}

<!-- index.hml -->
<!-- 关联index.css中的.container样式代码块 -->
<div class="container"> 
    <!-- 关联index.css中的#title样式代码块 -->
    <text id="title"> 
        Hello World
    </text>
</div>

动态绑定样式

如果要在程序运行过程中动态地改变样式，就需要用到动态绑定样式。所谓动态绑定就是值和变量动态关联，随着值的变更而显示不同的效果。动态绑定的使用方式为{{变量名}}，其中变量名是js文件中data对象的属性值。目前动态绑定样式只支持绑定行内样式。

在下面代码中，text的字体大小和data中的fontSize属性绑定，字体颜色和data中的fontColor属性绑定：

<!-- index.hml -->
<div class="container">
    <text class="title" style="font-size: {{fontSize}}; color: {{fontColor}};">
        Hello World
    </text>
</div>

// index.js:
export default  {
    data: {
        fontSize: '30px',
        fontColor: '#ff0000',
    },
}

现在已经完成了字体大小和颜色的样式绑定，下一节
交互事件将介绍如何通过按钮的点击事件实现动态改变字体的样式。

交互事件

每个组件都有一些通用事件和特有事件，开发者可在这些事件中实现应用的功能和逻辑。组件中添加事件的格式如下：

1. <element onevent="eventAction">

常见的组件事件如下表所示： 

以<input>组件的onclick事件为例，介绍事件的使用方法。首先，在index.hml文件中添加一个<input>组件，添加后的代码示例如下：

<!-- index.hml -->
<div class="container">
    <text class="title" style="font-size: {{fontSize}}; color: {{fontColor}};">
        Hello World
    </text>
    <input type="button" value="Change" style="width: 200px; height: 50px;" οnclick="clickAction"></input>
</div>

在如上代码中，页面里添加了一个<input>组件，onclick事件及其处理函数也添加到组件中。clickAction是一个Javascript函数，它的实现在pages/index/index.js文件中，代码示例如下：

// index.js:
export default  {
    data: {
        fontSize: '30px',
        fontColor: '#ff0000',
    },
    clickAction() {
        this.fontSize = '38px';
        this.fontColor = '#ffffff';
    }
}

clickAction实现的功能是点击按钮即可改变字体的大小和颜色。