轻量级智能穿戴开发：开发示例

HarmonyOS应用开发文档更新说明：生命周期新增onHide的说明，方便开发者更易理解生命周期 ; 以“动态改变样式”为例，讲解绘制样式和交互事件，方便开发者循序渐进地理解轻量级开发的基础功能。

目录

生命周期

绘制样式

行内样式

选择器样式

动态绑定样式

交互事件

---

生命周期

应用生命周期主要有两个：应用创建时调用的onCreate和应用销毁时触发的onDestroy。

一个应用中可能会有多个页面，一个页面一般包括onInit、onReady、onShow和onDestroy等在页面创建、显示和销毁时会触发调用的事件：

• onInit：表示页面的数据已经准备好，可以使用js文件中的data数据。
• onReady：表示页面已经编译完成，可以将界面显示给用户。
• onShow：JS UI只支持应用同时运行并展示一个页面，当打开一个页面时，上一个页面就销毁了。当一个页面显示的时候，会调用onShow。
• onHide：页面消失时被调用。
• onDestroy：页面销毁时被调用。

 

当应用从页面A跳转到页面B时，首先调用页面A的onDestroy函数。页面A销毁后，依次调用页面B的onInit、onReady、onShow函数来初始化和显示页面B。

 

绘制样式

在构建布局中，已经可以运行应用并显示结果。组件标签中类似“style="width:454px;height:454px;"”的语句即为样式设置语句，通过样式可以设置组件的显示大小、背景颜色、对齐方式等属性。本章节以

和组件为例来介绍如何设置样式，样式主要有三种设置方式：行内样式、选择器样式和动态绑定样式。三种方式设置的样式效果一致，只是写法不同。

行内样式

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

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

选择器样式

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

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

针对以上问题，我们可以采用选择器样式，将所有的样式代码写到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; 
}

 
    
     
        Hello World
    

动态绑定样式

在行内样式和选择器样式中，样式设置方式是静态的，即代码开发中设置的样式在程序运行的时候不能更改，这种方式限制了程序的显示效果。如果要在程序运行过程中动态地改变样式，就需要用到动态绑定样式。所谓动态绑定就是值和变量动态关联，随着值的变更而显示不同的效果。动态绑定的使用方式为{ {变量名}}，其中变量名是js文件中data对象的属性值。目前动态绑定样式只支持绑定行内样式。

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

    
        Hello World
    

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

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

 

交互事件

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

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

事件	描述
click	组件被点击时触发，使用方法参见下面示例。
longpress	组件被长按时触发，使用方法与click相同。
swipe	组件上快速滑动时触发，使用方法参见应用退出章节。

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

    
        Hello World
    
    

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

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

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