js失去焦点事件_鸿蒙2.0 JavaScript / JS 入门教程（一）组件、样式和交互概览

鸿蒙js开发和开发前端网页类似，每个当前屏幕画面是一个页面，每个页面由3个部分组成html、css、js。可以简单地理解为组件、样子、交互。

页面源码结构

当然我有了几个组件，规定了它们的样子之后，还需要布局，就是怎么摆放它们。

布局是由组件的嵌套包含关系和样子中的方向等共同决定的。

比如我有3个组件，A、B、C

嵌套关系为A包含B，方向为A和C水平排列。（A是容器；水平或垂直排列由css决定）

组件包括四种：

• 基础组件
• 容器组件
• 媒体组件
• 画布组件

样子包括四种：

• 通用样式
• 动画样式
• 渐变样式
• 转场样式

通用样式包括：宽、高、内外边距、边框、背景、透明度、在父组件里的空间收缩适应性。

动画样式包括：旋转、平移、缩放。

转场样式包括：页面或共有组件的进入退出过渡效果。

渐变样式包括：线性渐变和重复线性渐变。

左为线性渐变，右为重复性线性渐变

交互包括2个步骤：

1. 事件发生
2. 事件响应

事件包括：

• 手势事件：触摸、点击、长按等
• 遥控器按键事件

响应包括：

• 可见信息的改变：组件、样式、布局、焦点、页面等的改变
• 不可见信息的传递：比如退出程序、数据库改变、发送网络请求、打开蓝牙等

所以我们的开发实际就是设计一个个页面中的组件和样式，然后对每个页面中的事件作出响应。而这些页面、事件和响应实际上由我们的需求决定，我们只是去选择比较好或简单的实现方式。

---

收藏前请点赞！