鸿蒙应用如何新建页面

使用"Empty Ability"模板新建项目后,我们得到了一个预先生成的页面Index.ets,其路径为"你的项目名称\entry\src\main\ets\pages\Index.ets",我们可以看到他在pages目录下,如下图所示:

那么我们想要再加一个页面应该如何添加呢,是不是直接复制Index.ets呢,虽然可以但是我们不推荐这样做,正确的方法是在ets或pages文件夹右键,依次选择"新建>Page>Empty Page",我们一般还是把页面放在pages文件夹内即可:

在弹出的配置窗口,输入Page名称后点击"完成"按钮,我们一般按照首字母大写的方式,比如:

这样新的页面MyPage.ets就创建好了,我们发现初始页面结构和Index.ets的一致,我们可以根据自己的需要修改页面的内容进行开发。

通过以上方式新建的页面会自动在main_pages.json文件中生成配置,路径在"你的项目名称\entry\src\main\resources\base\profile\main_pages.json",如下图所示:

​而如果不通过新建的方式,而是直接复制Index.ets的话,需要手工按照该格式添加一行新页面的配置才可以,注意每行末尾加逗号(,),最后一行不加。

TypeScript 复制代码
{
  "src": [
    "pages/Index",
    "pages/MyPage"
  ]
}
相关推荐
芒鸽1 小时前
鸿蒙应用测试实战:从单元测试到自动化测试
华为·单元测试·harmonyos
Davina_yu2 小时前
Hello HarmonyOS:搭建DevEco Studio开发环境与第一个应用运行(1)
harmonyos·鸿蒙原生开发
2501_919749032 小时前
鸿蒙 Flutter 实战:video_compress 3.1.4 适配 3.27-ohos 全流程
flutter·华为·harmonyos
nashane3 小时前
HarmonyOS 6学习:应用退出动画优化实战——从“闪退“到优雅退出的完美蜕变
学习·华为·harmonyos
程序猿追5 小时前
在 HarmonyOS 模拟器上用递归种出科赫分形
华为·harmonyos
高心星6 小时前
鸿蒙6.0应用开发——访问应用文件
华为·文件读写·fs·鸿蒙6.0·harmonyos6.0·应用文件·fileio
FrameNotWork6 小时前
HarmonyOS三方库:lv-markdown-in 技术解析与自定义语法扩展实战
华为·harmonyos
条tiao条7 小时前
鸿蒙 ArkTS 实战进阶:从核心组件到面向对象编程一篇通
华为·harmonyos
book01217 小时前
华为ensp学习日志 记2026
学习·华为·智能路由器