鸿蒙应用如何新建页面

使用"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"
  ]
}
相关推荐
最爱老式锅包肉2 小时前
《HarmonyOS技术精讲-蓝牙》传统蓝牙实战:音频播放与文件传输
华为·音视频·harmonyos
山内桜良12 小时前
HarmonyOS中,html 与 ets 桥接沟通
华为·html·harmonyos
心中有国也有家3 小时前
AtomGit Flutter 鸿蒙客户端:初始化流水线
学习·flutter·华为·harmonyos
在书中成长3 小时前
HarmonyOS 小游戏《对战五子棋》开发第30篇 - TwoPlayerPage双人对战(二):状态栏与玩家指示器
harmonyos
爱吃大芒果3 小时前
面向未来的大模型原生应用 (AI-Native) 架构解析与演进路线图 (Roadmap)
华为·信息可视化·架构·harmonyos·ai-native
爱吃大芒果3 小时前
ArkUI V2 状态管理极简教程,手写待办清单 Demo
华为·harmonyos
水龙吟啸4 小时前
华为2026.6.17机考选择题+编程题【速刷敲黑板】
人工智能·深度学习·算法·华为
ujainu小4 小时前
帧率协议栈:13变量揭秘60Hz性能分析
华为·harmonyos
花开彼岸天~12 小时前
15 Button 组件与交互反馈设计:按压动画与呼吸脉冲
华为·交互·harmonyos·鸿蒙系统