【鸿蒙实战开发】HarmonyOS应用开发-低代码开发登录页

最新推荐文章于 2025-11-04 10:11:45 发布

原创

最新推荐文章于 2025-11-04 10:11:45 发布 · 2.3k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #低代码 #华为 #android #鸿蒙 #前端

本篇文章我来手把手教大家做一个HarmonyOS 应用的登录页面，逐步讲解，非常细致，百分百能学会，并提供全部源码。页面使用 DevEco Studio 的低代码开发。通过本文的实践经验，我想告诉大家， HarmonyOS 应用开发其实并不难，只要了解具体的开发流程和开发思想，大家都可以很快上手。

下面这张图是我们的目标实现图，具体实现流程将由我一步一步讲解：

一、项目初始化

1、创建低代码项目

下载安装 DevEco Studio，新建一个支持 Super Visual 低代码模式的项目。

2、低代码项目结构解读

初始项目目录如下：

├──entry/src/main/ets           // 代码区
│  ├──entryability              
│  │  └──EntryAbility.ets       // 程序入口类
│  └──pages
│     └──Index.ets              // 首页的逻辑描述文件
├──entry/src/main/resources     // 资源文件
└──entry/src/main/supervisual
   └──pages
      └──Index.visual           // 首页的数据模型

其中.ets文件就是我们正常编写界面逻辑的文件，语言为ArcTS；
.visual为低代码项目特有的文件，由系统根据我们对界面的可视化设计自动更新，用写字板打开能看到是存储界面设计的Json文本；

二、添加静态文件

1、新增图片文件

ets 文件下创建 common\images\icon 文件夹，icon内添加我们需要添加的图片文件，本教程我们用到了3个“其他登录方式”的图标。

添加的图标图片如下：

增加完三个图标后，我们的项目结构更新如下：

├──entry/src/main/ets           // 代码区
│  ├──common                    
│  │  └──images                 
│  │     └──icon                // 图标图片
│  │        ├──csdn.png         // 图标A
│  │        ├──huawei.png       // 图标B
│  │        └──openatom.png     // 图标C
│  ├──entryability              
│  │  └──EntryAbility.ets       // 程序入口类
│  └──pages
│     └──Index.ets              // 首页的逻辑描述文件
├──entry/src/main/resources     // 资源文件
└──entry/src/main/supervisual
   └──pages
      └──Index.visual           // 首页的数据模型

2、新增常量类

这一步可选，一般意义上，我们会根据系统业务需要把一些固定的参数写到一个记录常量的 ArcTS 文件里，比如命名为 Const.ts，本次我们把页面需要的常量写到了页面自带的 index.ets文件里，所以没有建立常量类，特此说明。

如果需要添加，我们可以把常量类 Const.ts 放在和 images 文件夹平级的位置，添加 Const.ts 之后的项目结构如下：

├──entry/src/main/ets           // 代码区
│  ├──common                    
│  │  ├──Const.ts               // 常量类
│  │  └──images                 
│  │     └──icon                // 图标图片
│  │        ├──csdn.png         // 图标A
│  │        ├──huawei.png       // 图标B
│  │        └──openatom.png     // 图标C

│  ├──entryability              
│  │  └──EntryAbility.ets       // 程序入口类
│  └──pages
│     └──Index.ets              // 首页的逻辑描述文件
├──entry/src/main/resources     // 资源文件
└──entry/src/main/supervisual
   └──pages
      └──Index.visual           // 首页的数据模型