鸿蒙实战开发（5.0版）视觉应用开发添加页面

  鸿蒙NEXT开发实战往期必看文章：

HarmonyOS NEXT应用开发性能优化实践总结（持续更新......）

HarmonyOS NEXT应用开发案例实践总结合集（持续更新......）

一分钟了解”纯血版！鸿蒙HarmonyOS Next应用开发！

“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

---

准备开发环境

首先需要下载和配置DevEco Studio，具体操作请参考《DevEco Studio使用指南》。

创建项目

1. 通过如下两种方式，打开工程创建向导界面。

   • 如果当前未打开任何工程，可以在DevEco Studio的欢迎页，选择Create Project开始创建一个新工程。
   • 如果已经打开了工程，可以在菜单栏选择File > New > Create Project来创建一个新工程。

2. 选择“Application”下的“Empty Ability”模板，点击Next。

1. 填写工程相关信息，保持默认值即可，单击Finish。

   关于各个参数的详细介绍，请参考《DevEco Studio使用指南》。

   工程创建完成后，DevEco Studio会自动进行工程的同步。

创建首页面

空气质量监测App包含两个界面（Page），工程创建完成后会生成一个名为index的Page，可以作为首页。工程目录如下图所示：

图 1 工程目录

创建详情页

新增一个Page，作为详情页，具体步骤如下：

1. pages目录右键 ，弹出的菜单中选择New、JS Page。

   图 2 添加页面

   

2. 输入Page名称。

   图 3 输入页面名称

   

3. 确认创建结果。

   详情页创建完成后应用工程目录如下图所示，每个Page包括三个文件：布局文件hml、样式文件css、业务逻辑代码js。

   图 4 完整工程目录