上节已经创建了工程helloword,目录结构看如下图:
- pages/index/index.css:此文件定义了index页面的样式。index.css文件定义了“container”和“title”的样式。
- pages/index/index.hml:此文件定义了index页面的布局,在index页面中用到的组件,以及这些组件的层级关系。index.hml文件包含了一个text组件,内容为“Hello World”。
- pages/index/index.js:此文件定义了index页面的业务逻辑,比如数据绑定,事件处理等。此处,变量“title”采用数据绑定的形式定义为字符串“World”,用户可以在需要的业务逻辑中修改“title”的值。
- resources:此目录用于存放系统级资源配置文件,如应用图标等。
- 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';
}
}
效果如下:
点击按键后: