页面路由 很多应用由多个页面组成，比如用户可以从音乐列表页面点击歌曲，跳转到该歌曲的播放界面。开发者需要通过页面路由将这些页面串联起来，按需实现跳转。
阅读全文
openharmony 鸿蒙 ui-js-building-ui-layout-text
添加标题行和文本区域 实现标题和文本区域最常用的是基础组件text。text组件用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区，完整属性和样式信息请参考text。在页面中插入标题和文本区域的示例如下：
阅读全文
openharmony 鸿蒙 ui-js-building-ui-layout-intro
布局说明 设备的基准宽度为720px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。 其换算关系如下： 组件的width设为100px时，在宽度为720物理像素的屏幕上，实际显示为100物理像素；在宽度为1440物理像素的屏幕上，实际显示为200物理像素。
阅读全文
openharmony 鸿蒙 ui-js-building-ui-layout-image
添加图片区域 添加图片区域通常用image组件来实现，使用的方法和text组件类似。 图片资源建议放在js\default\common目录下，common目录需自行创建，详细的目录结构见目录结构。代码示例如下：
阅读全文
openharmony 鸿蒙 ui-js-building-ui-layout-external-container
添加容器 要将页面的基本元素组装在一起，需要使用容器组件。在页面布局中常用到三种容器组件，分别是div、list和tabs。在页面结构相对简单时，可以直接用div作为容器，因为div作为单纯的布局容器，可以支持多种子组件，使用起来更为方便。
阅读全文
openharmony 鸿蒙 ui-js-building-ui-layout-comment
添加留言区域 留言框的功能为：用户输入留言后点击完成，留言区域即显示留言内容。用户点击右侧的删除按钮可删除当前留言内容并重新输入。 留言区域由div、text、input关联click事件实现。开发者可以使用input组件实现输入留言的部分，使用text组件实现留言完成部分，使用commentText的状态标记此时显示的组件（通过if属性控制）。在包含文本完成和删除的text组件中关联click事
阅读全文
openharmony 鸿蒙 ui-js-building-ui-interactions
添加交互 添加交互可以通过在组件上关联事件实现。本节将介绍如何用div、text、image组件关联click事件，构建一个如下图所示的点赞按钮。 点赞按钮通过一个div组件关联click事件实现。div组件包含一个image组件和一个text组件：
阅读全文
openharmony 鸿蒙 ui-js-building-ui-event
手势事件 手势表示由单个或多个事件识别的语义动作（例如：触摸、点击和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。支持的事件有：
阅读全文
openharmony 鸿蒙 ui-js-building-ui-component
组件介绍 组件（Component）是构建页面的核心，每个组件通过对数据和方法的简单封装，实现独立的可视、可交互功能单元。组件之间相互独立，随取随用，也可以在需求相同的地方重复使用。
阅读全文
openharmony 鸿蒙 ui-js-building-ui-animation
动画 动画分为静态动画和连续动画。 静态动画 静态动画的核心是transform样式，主要可以实现以下三种变换类型，一次样式设置只能实现一种类型变换。
阅读全文