一、背景

登录功能在应用中是一个常用模块，此次使用 HarmonyOS 实现登录流程，包含页面呈现与网络请求。

二、页面呈现

三、实现流程

3.1、创建项目

构建一个ArkTS应用项目(Stage模型)，今天创建流程可查看官网教程：文档中心

目录结构介绍：

3.2、添加静态资源

所需图片：背景图，土拨鼠图片

添加位置：entry > src > main > resources > base > media

备注：icon.png是初始图片，另外两个是新增加的图片资源

3.3、编写登录界面

在pages目录下新建LoginPage页面，用于编写登录界面

具体代码：

@Entry
@Component
struct LoginPage {@State tenant:string = ''@State account:string = ''@State password:string = ''build() {Column({space:10}){Image($r('app.media.Groundhog')).width('100vp').borderRadius(50).margin({top:120})Text('欢迎登录土拨鼠').fontColor(Color.Gray).fontSize(20)Select([{value:'土拨鼠充电公司'},{value:'钢铁侠充电公司'}]).selected(0).value('请选择租户').font({size:16,weight:500}).fontColor('#182431').selectedOptionFont({ size: 16, weight: 400 }).optionFont({ size: 16, weight: 400 }).onSelect((index: number) => {this.tenant = (index + 1).toString()})TextInput({placeholder:'请输入用户名'}).width(300).onChange((val:string) => this.account = val)TextInput({placeholder:'请输入密码'}).width(300).onChange((val:string) => this.password = val).type(InputType.Password)Button('登录').width("90%").backgroundColor('#0aa671')LoadingProgress().color('#0aa671').width(50).height(50)}.width('100%').height('100%').backgroundImage($r('app.media.rect'))}
}

3.4、界面测试

3.4.1、方法一：Preview 预览

 Previewer 预览用于查看应用的UI界面效果，方便随时调整界面UI布局。只需打开需要预览的页面文件，在LoginPage.ets文件中，点击IDE右侧的 Previewer 即可看到预览效果。

3.4.2、方法二：模拟器运行

右上角选择设备，点击进入设备管理器

①如果没有模拟器需下载安装，可查看我前面写的此篇文章👉【鸿蒙 HarmonyOS 4.0】开发工具安装_安装鸿蒙ide-CSDN博客

②如果已经下载，点击启动设备。

③此时设备上已选中启动的设备，点击右上角的按钮，启动下项目

备注：

模拟器默认启动页面是Index，如果需要启动项目直接是LoginPage页面，需要在EntryAbility文件内windowStage.loadContent方法中修改启动路径，如下👇

最终，模拟器运行效果👇