鸿蒙应用如何新建页面

使用"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"
  ]
}
相关推荐
小雨青年6 小时前
【HarmonyOS 7 平行视界深度实战】06 页面路由、返回栈与多层跳转怎么处理
华为·harmonyos
2501_9197490311 小时前
华为鸿蒙免费刷题软件—小羊免费刷题
华为·harmonyos·鸿蒙
游戏智眼11 小时前
HarmonyOS 7 适配升级:NIM SDK 释放端侧 AI 与网络能力
人工智能·harmonyos
昇腾知识体系12 小时前
昇腾 A5 ISA 指令集:文档入口与 mem_bar 等关键指令
人工智能·华为·架构·知识图谱
程序猿追13 小时前
react-native-elements 三方库鸿蒙版本适配与使用(MatePad Edge 双模式真机验证)
华为·harmonyos
lqj_本人13 小时前
白泽上手:给小鸿 SE 写一个温控风扇工程
harmonyos
贾伟康13 小时前
【口算王|12】HarmonyOS ArkTS 启动页实战:处理 Splash 到训练首页的稳定切换
harmonyos·arkts·启动优化·uiability·windowstage
万物智能信息科技15 小时前
RK3568 的多路显示移植—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
linux·开发语言·华为·开源·harmonyos
万物智能信息科技16 小时前
MIPI DSI屏幕输出—【万物智能之开源鸿蒙OpenHarmony系统实战开发系列教程】
嵌入式硬件·华为·开源·harmonyos·鸿蒙
贾伟康16 小时前
【口算王|13】HarmonyOS ArkTS 应用启动链路实战:从 EntryAbility 到首屏加载保持窗口与路由稳定
harmonyos·arkts·arkui·应用启动·entryability