鸿蒙应用如何新建页面

使用"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"
  ]
}
相关推荐
SmartBrain15 小时前
《资治通鉴》20 条智慧赋能企业经营管理
华为·架构·创业创新
条tiao条15 小时前
从静态到动态:鸿蒙 ArkTS 列表组件与状态装饰器实战
华为·harmonyos
maaath16 小时前
【无标题】Flutter for OpenHarmony 的文具手账应用开发实践
flutter·华为·harmonyos
李李李勃谦16 小时前
鸿蒙PC打造电子书阅读器:支持 EPUB/PDF、书签同步、笔记管理
笔记·华为·pdf·harmonyos
枫叶丹416 小时前
【HarmonyOS 6.0】Core File Kit:端云文件版本管理能力解析与实践
开发语言·华为·harmonyos
李李李勃谦16 小时前
鸿蒙PC数据查看器:大数据量快速加载、筛选与可视化图表
华为·harmonyos
枫叶丹416 小时前
【HarmonyOS 6.0】CANN Kit 新增支持获取 AI 模型 Dump 维测数据功能详解
开发语言·人工智能·华为·信息可视化·harmonyos
key_3_feng17 小时前
鸿蒙6.0父子组件通信深度解析
华为·harmonyos
李李李勃谦1 天前
鸿蒙PC密码管理器实战:本地加密存储与自动填充完整实现
华为·harmonyos
Swift社区1 天前
鸿蒙 App 架构中的“领域拆分”
华为·架构·harmonyos