鸿蒙应用如何新建页面

使用"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 5.0金融科技开发实战:构建硬件级安全数字钱包与分布式智能支付系统
安全·金融·harmonyos
HwJack203 小时前
HarmonyOS UI 开发中的 EventHub:终结“回调地狱”的通信轻骑兵
ui·华为·harmonyos
见山是山-见水是水11 小时前
鸿蒙flutter第三方库适配 - 儿童故事
flutter·华为·harmonyos
睿麒12 小时前
json2est 的用法
鸿蒙
2401_8396339113 小时前
鸿蒙flutter第三方库适配 - URL处理应用
flutter·华为·harmonyos
不爱吃糖的程序媛13 小时前
鸿蒙三方库适配README.OpenSource文件解读
harmonyos
李李李勃谦14 小时前
Flutter 框架跨平台鸿蒙开发 - 星空日记
flutter·华为·harmonyos
2401_8396339114 小时前
鸿蒙flutter第三方库适配 - 看板应用
flutter·华为·harmonyos
轻口味16 小时前
HarmonyOS 6 自定义人脸识别模型10:基于MindSpore Lite框架的自定义人脸识别功能实现
华为·harmonyos