2. 鸿蒙JSUI开发 - 组件使用，样式布局，按键交互_鸿蒙开发js

上节已经创建了工程helloword，目录结构看如下图：

1. pages/index/index.css：此文件定义了index页面的样式。index.css文件定义了“container”和“title”的样式。
2. pages/index/index.hml：此文件定义了index页面的布局，在index页面中用到的组件，以及这些组件的层级关系。index.hml文件包含了一个text组件，内容为“Hello World”。
3. pages/index/index.js：此文件定义了index页面的业务逻辑，比如数据绑定，事件处理等。此处，变量“title”采用数据绑定的形式定义为字符串“World”，用户可以在需要的业务逻辑中修改“title”的值。
4. resources：此目录用于存放系统级资源配置文件，如应用图标等。
5. config.json：此文件是配置文件，主要定义了页面路由和应用信息，可根据IDE工程和页面创建向导自动完成填充。

总结目录结构中文件分类如下：

• .hml结尾的HML模板文件，这个文件用来描述当前页面的文件布局结构。
• .css结尾的CSS样式文件，这个文件用于描述页面样式。
• .js结尾的JS文件，这个文件用于处理页面和用户的交互

1. 组件使用：

一个页面由组件声明（.hml）、css样式(.css)和script脚本(.js)三部分构成。

组件声明是在“pages/index/index.hml”文件中实现。

行内样式:

行内样式是将样式内容直接放到组件的style属性中，多个样式值则是通过分号间隔。

我们可以通过设置组件的部分样式，使得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等方式和组件关联起来。

动态绑定样式:

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

pages/index/index.hml 和 pages/index/index.js 通过变量方式把属性绑定：

通过fontSize 和 fontColor 绑定。

2. 交互事件

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

<!-- pages/index/index.hml -->
<div class="container">
    <text class="title" style="font-size: {{fontSize}}; color: {{fontColor}};">
        {{ $t('strings.hello') }} {{ title }}
    </text>
    <input type="button" value="Change" style="width: 200px; height: 50px;" onclick="clickAction"></input>
</div>

pages/index/index.js 添加对应的事件函数:

export default {
    data: {
        title: "",
        fontSize: '30px',
        fontColor: '#ffeeeeed',
    },
    onInit() {
        this.title = this.$t('strings.world');
    },
    clickAction() {
        this.fontSize = '30px';
        this.fontColor = '#ff0000';
    }
}

效果如下：

点击按键后：

 2. JSUI开发 - 组件使用，样式布局，按键交互