大家好，我是老王~

今天跟大伙分享一下HarmonyOS应用开发之页面开发是怎么操作的？这个适用于HarmonyOS应用开发的初学者。编写两个简单的页面，实现在第一个页面点击按钮跳转到第二个页面，之后还可以通过跨设备启动第二个页面来初步体验HarmonyOS的分布式能力。

1说明

开始前，请完成环境搭建，创建并运行一个项目：

• 搭建环境：请参考《DevEco Studio 使用指南》的环境搭建章节。• 创建项目：请参考《DevEco Studio 使用指南》的项目管理>创建项目>创建Java项目章节。• 运行项目：请参考《DevEco Studio 使用指南》的应用编译章节。

2编写第一个页面

在Java UI框架中，提供了两种编写布局的方式：在XML中声明UI布局和在代码中创建布局。这两种方式创建出的布局没有本质差别，为了熟悉两种方式，我们将通过XML的方式编写第一个页面，通过代码的方式编写第二个页面。

3XML 编写页面

1.在“Project”窗口，打开“entry > src >main > resources > base”，右键点击“base”文件夹，选择“New >Directory”，命名为“layout”。图1设置Directory名称

2.右键点击“layout”文件夹，选择“New > File”，命名为“main_layout.xml”。图 2 设置 File 名称

在“layout”文件夹下可以看到新增了“main_layout.xml”文件。

3.打开“main_layout.xml”文件，添加一个文本和一个按钮，示例代码如下：

4.上述按钮的背景是通过“button_element”来显示的，需要在“base”目录下创建“graphic”文件夹，在“graphic”文件夹中新建一个“button_element.xml”文件。

“button_element.xml”的示例代码如下：

4加载 XML 布局

1.在“Project”窗口中，选择“entry > src > main > java > com.example.helloworld > slice” ，打开“MainAbilitySlice.java”文件。2.重写 onStart()方法加载 XML 布局，示例代码如下：

5运行项目

请参考《DevEco Studio 使用指南》的编译运行章节运行项目（关注老王公众号，后台回复“DS”，领取《DevEco Studio 使用指南》）效果如图：

创建另一个页面

创建 Feature Ability

1.在“Project”窗口，打开“entry>src>main>java”，​右键点击“com.example.myapplication”文件夹，选择“New>FeatureAbility>Empty Feature Ability(Java)”。​

2、配置Ability时，将“Page Name”设置为“SecondAbility”，点击“Finish”。

可以看到新增了“SecondAbility”和“SecondAbilitySlice”文件。

代码编写界面

在上一节中，我们用 XML 的方式编写了一个包含文本和按钮的页面。为了帮助开发者熟悉在代码中创建布局的方式，接下来我们使用此方式编写第二个页面。

打开 “SecondAbilitySlice.java”文件，添加一个文本，示例代码如下：

点击此处添加图片说明文字

实现页面跳转

1、打开第一个页面的“MainAbilitySlice.java”文件，重写onStart()方法添加按钮的

响应逻辑，实现点击按钮跳转到下一页，示例代码如下：

2、再次运行项目，效果如图所示：

图1项目运行效果

9跨设备启动 FA

刚才已经完成了在同一台设备上实现页面跳转，接下来我们通过跨设备启动 FA 来初步体验 HarmonyOS 的分布式能力。首先要设置支持分布式的标记，然后在满足分布式组网条件后，即可体验启动另一设备的 FA。

设置分布式标记

打开第一个页面的“ MainAbilitySlice.java ”文件，设置分布式标记“Intent.FLAG_ABILITYSLICE_MULTI_DEVICE”，表明当前涉及分布式能力，示例代码如下：

分布式组网

分布式组网要同时达到如下条件：

• 两个设备连接同一 Wi-Fi。

• 两个设备都打开蓝牙。

• 两个设备登录同一华为帐号。

• 两个设备都打开“多设备协同”开关：在设备的“设置 > 更多连接”中，开启“多设备协同”。

运行效果

在两个设备上分别安装该应用，将两个设备命名为 A 和 B。当在 A 设备上点击按钮时，会出现弹窗供用户选择，选择 B 设备，即可在 B 设备上启动第二个页面。

​

——————

原创：老王丨鸿蒙hms开发者高级认证持证人！学习更多鸿蒙OS相关开发技术可以关注我的公众号：鸿蒙开发者老王