低代码开发方式具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低开发者的上手成本并提升开发者构建UI界面的效率。

如需使用低代码开发方式，请打开上图中的Enable Super Visual开关。



1. 点击**Finish**，工具会自动生成示例代码和相关资源，等待工程创建完成。
2. 工程创建完成后，在**entry > build-profile.json5**文件中，将targets中的runtimeOS改为“OpenHarmony”，然后点击右上角提示框的**Sync Now**以进行OpenHarmony应用开发。


### ArkTS工程目录结构（Stage模型）



![zh-cn_image_0000001364054489](https://img-blog.csdnimg.cn/img_convert/9bdb3e746cb3359638bbc7ecf5ad28e0.webp?x-oss-process=image/format,png)


* **AppScope > app.json5**：应用的全局配置信息。
* **entry**：OpenHarmony工程模块，编译构建生成一个[HAP]( )包。


	+ **src > main > ets**：用于存放ArkTS源码。
	+ **src > main > ets > entryability**：应用/服务的入口。
	+ **src > main > ets > pages**：应用/服务包含的页面。
	+ **src > main > resources**：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
	+ **src > main > module.json5**：模块配置文件。主要包含HAP的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
	+ **build-profile.json5**：当前的模块信息 、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。若需开发OpenHarmony应用，则需开发者自行修改为OpenHarmony。
	+ **hvigorfile.ts**：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。
* **oh\_modules**：用于存放三方库依赖信息。
* **build-profile.json5**：应用级配置信息，包括签名、产品配置等。
* **hvigorfile.ts**：应用级编译构建任务脚本。


### 构建第一个页面


1. 使用文本组件。

 工程同步完成后，在“**Project**”窗口，点击“**entry > src > main > ets > pages**”，打开“**Index.ets**”文件，可以看到页面由Text组件组成。“**Index.ets**”文件的示例如下：

// Index.ets
@Entry
@Component
struct Index {
@State message: string = ‘Hello World’

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
ts

2. 添加按钮。

 在默认页面基础上，我们添加一个Button组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“**Index.ets**”文件的示例如下：

// Index.ets
@Entry
@Component
struct Index {
@State message: string = ‘Hello World’

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，以响应用户点击
Button() {
Text(‘Next’)
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor(‘#0D9FFB’)
.width(‘40%’)
.height(‘5%’)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
ts

3. 在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：



![zh-cn_image_0000001311334976](https://img-blog.csdnimg.cn/img_convert/c11a403741aee9ef557dbecaeb76acb5.webp?x-oss-process=image/format,png)


### 构建第二个页面


1. 创建第二个页面。


	* 新建第二个页面文件。在“**Project**”窗口，打开“**entry > src > main > ets**”，右键点击“**pages**”文件夹，选择“**New > ArkTS File**”，命名为“**Second**”，点击“**Finish**”。可以看到文件目录结构如下：



![secondPage](https://img-blog.csdnimg.cn/img_convert/2169b1c74c578cb275bd36da9a49adad.webp?x-oss-process=image/format,png)





> **说明：**
>
> 开发者也可以在右键点击“**pages**”文件夹时，选择“**New > Page**”，则无需手动配置相关页面路由。

  • 配置第二个页面的路由。在“Project”窗口，打开“entry > src > main > resources > base > profile”，在main_pages.json文件中的“src”下配置第二个页面的路由“pages/Second”。示例如下：

    {
  "src": [
    "pages/Index",
    "pages/Second"
  ]
}
json



1. 添加文本及按钮。

 参照第一个页面，在第二个页面添加Text组件、Button组件等，并设置其样式。“**Second.ets**”文件的示例如下：

// Second.ets
@Entry
@Component
struct Second {
@State message: string = ‘Hi there’

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text(‘Back’)
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor(‘#0D9FFB’)
.width(‘40%’)
.height(‘5%’)
}
.width(‘100%’)
}
.height(‘100%’)
}
}
ts



### 实现页面间的跳转


页面间的导航可以通过[页面路由router]( )来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。


1. 第一个页面跳转到第二个页面。

 在第一个页面中，跳转按钮绑定onClick事件，点击按钮时跳转到第二页。“**Index.ets**”文件的示例如下：

// Index.ets
// 导入页面路由模块
import router from ‘@ohos.router’;

@Entry
@Component
struct Index {
@State message: string = ‘Hello World’

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// 添加按钮，以响应用户点击
Button() {
Text(‘Next’)
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor(‘#0D9FFB’)
.width(‘40%’)
.height(‘5%’)
// 跳转按钮绑定onClick事件，点击时跳转到第二页
.onClick(() => {
console.info(Succeeded in clicking the 'Next' button.)
// 跳转到第二页
router.pushUrl({ url: ‘pages/Second’ }).then(() => {
console.info(‘Succeeded in jumping to the second page.’)
}).catch((err) => {
console.error(Failed to jump to the second page.Code is ${err.code}, message is ${err.message})
})
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
ts

2. 第二个页面返回到第一个页面。

 在第二个页面中，返回按钮绑定onClick事件，点击按钮时返回到第一页。“**Second.ets**”文件的示例如下：

// Second.ets
// 导入页面路由模块
import router from ‘@ohos.router’;

@Entry
@Component
struct Second {
@State message: string = ‘Hi there’

build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button() {
Text(‘Back’)
.fontSize(25)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor(‘#0D9FFB’)
.width(‘40%’)
.height(‘5%’)
// 返回按钮绑定onClick事件，点击按钮时返回到第一页
.onClick(() => {
console.info(Succeeded in clicking the 'Back' button.)
try {
// 返回第一页
router.back()
console.info(‘Succeeded in returning to the first page.’)
} catch (err) {
console.error(Failed to return to the first page.Code is ${err.code}, message is ${err.message})
}
})
}
.width(‘100%’)
}
.height(‘100%’)
}
}
ts

3. 打开Index.ets文件，点击预览器中的

 ![zh-cn_image_0000001311015192](https://img-blog.csdnimg.cn/img_convert/4f0347aab15962cac4afeda9aff14457.webp?x-oss-process=image/format,png)

 按钮进行刷新。效果如下图所示：

  ![zh-cn_image_0000001364254729](https://img-blog.csdnimg.cn/img_convert/06232634e691489c82b06554934c2f58.webp?x-oss-process=image/format,png)
# harmonyos # rxjava # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

【开发者故事】这款小众穿戴应用，凭什么让7成用户天天打开 ？

avatar HarmonyOS开发者社区

鸿蒙系统实况窗功能详解与开发适配指南

实况窗是 HarmonyOS 提供的一种帮助用户聚焦正在进行的任务、方便快速查看和即时处理的通知形态。它支持应用将订单或服务的实时状态信息变化在设备的关键界面展示，并对展示信息的生命周期、用户界面 UI 效果等进行管理。实况窗具有时段性时效性变化性时段性：事件或服务需要持续一段时间，有明确的开始和结束，而非单点的提醒或信息。例如打车、外卖等从事件开始到结束需要经历一段时间，属于实况窗；天气提示、待

avatar HarmonyOS开发者社区
cover

灯光模拟HarmonyOS应用实战-39-20题测试做到最后又回第1题：用TheorySession收口跳题、完成与汇总

avatar HarmonyOS开发者社区