HarmonyOS开发之ArkTS利用：用户登录页面应用

目录

目录
前言
关于HarmonyOS
情况准备
新建项目
设计用户登录页面
1. 布局设计
2. 编写ArkTS代码
运行和测试
结束语

---

前言

   随着HarmonyOS（鸿蒙操作体系）的不断发展，越来越多的开发者开始投入到这个全新的生态体系中，而ArkTS（Adaptive Runtime for TypeScript）作为HarmonyOS的声明式UI编程语言，为开发者提供了高效、简洁的开发体验，尤其是对于前端开发者入手鸿蒙OS开发来说更是如鱼得水。那么本文就来介绍怎样利用ArkTS，这里以创建一个简单的用户登录页面应用来做具体分享。
  关于HarmonyOS

关于HarmonyOS的基本内容，HarmonyOS（鸿蒙操作体系）是华为公司推出的一种分布式操作体系，它被设计为一种全场景、全连接的操作体系，旨在实如今各种装备之间的无缝协同和共享，包罗智能手机、平板电脑、智能穿戴、智能家居、车载体系等。HarmonyOS的目标是构建一个同一的、开放的、全场景的操作体系生态体系。也是我们的国光操作体系，值得保举！
情况准备

在开始之前，请确保已经安装了DevEco Studio（华为开发者联盟提供的官方IDE）以及HarmonyOS SDK，与此同时，还需要对ArkTS的基本语法和组件有肯定的熟悉和了解，如许才能更好的快速入手体验。
新建项目

接下来就是直接去做创建项目的操作，上面假如把开发情况安装完毕之后，就可以直接创建项目了，大概步调如下所示：

• 打开DevEco Studio，选择“Create New Project”；
  
• 然后在项目模板中选择“Empty Feature Ability (ArkTS)”；
  
• 填写项目信息，比如项目名称、保存位置等，这里就不再过多介绍，具体以现实情况填写即可，然后点击“Finish”即可。
  

设计用户登录页面

创建新的项目之后，先要根据设计的登录页面来开发，这里着重分享一下用户登录页面的设计的内容。具体步调如下所示：
1. 布局设计

在新建项目的resources/base/layout目录下创建一个新的XML布局文件，比如login_layout.xml，然后在这个文件中，可以利用ArkUI提供的组件来设计登录页面的布局，利用TextField组件来输入用户名和暗码，利用Button组件来提交登录哀求等设置。
2. 编写ArkTS代码

然后在对应的.ets文件中（通常是与布局文件同名的.ets文件），可以利用ArkTS来编写页面的逻辑代码。以下是一个简单的示例，具体如下所示：

1. # ArkTS页面源码
3. import router from '@ohos.router'
4. import prompt from '@ohos.prompt'
5. import promptAction from '@ohos.promptAction'
7. @Entry
8. @Component
9. struct LoginPage {
10.   @State password: string = ''
11.   @State username: string = ''
12.   @State phone: string = ''
13.   build() {
14.     Column() {
15.       Text("登录")
16.         .fontSize(50)
17.         .fontWeight(FontWeight.Bold).margin({
18.         bottom: 60
19.       })
20.       Row() {
21.         Text("用户名")
22.           .fontSize(18)
23.           .fontWeight(FontWeight.Bold)
24.       }.width("100%")
25.       Row() {
26.         Image($r("app.media.name")).width(30)
27.         TextInput({
28.           placeholder: "请输入用户名"
29.         }).width(300).onChange((val: string) => {
30.           this.username = val
31.         })
32.       }.margin({
33.         bottom: 8,
34.         top: 8
35.       }).width("100%")
36.       Divider().strokeWidth(4)
37.       Row() {
38.         Text("密码")
39.           .fontSize(18)
40.           .fontWeight(FontWeight.Bold).margin({
41.           bottom: 8,
42.           top: 8
43.         })
44.       }.width("100%")
45.       Row() {
46.         Image($r("app.media.password")).width(30)
47.         TextInput({
48.           placeholder: "请输入密码"
49.         }).width(300).onChange((val: string) => {
50.           this.password = val
51.         }).type(InputType.Password)
52.       }.width("100%")
53.       Divider().strokeWidth(4)
54.       Row() {
55.         Blank()
56.         Text("忘记密码？")
57.           .fontSize(18)
58.           .fontWeight(FontWeight.Bold)
59.       }.width("100%")
60.       Button("登录").width("90%").height(60).backgroundColor(Color.Orange).onClick(() => {
61.         if (this.username == "admin" && this.password == "admin") {
62.           router.replaceUrl({
63.             url: "page/homepage",
64.             params: {
65.               name: this.username
66.             }
67.           })
68.         }
69.         else {
70.           promptAction.showToast({
71.             message:"密码或用户名错误，请重新输入"
72.           })
73.         }
74.       }).margin({
75.         top: 30,
76.       })
77.       Row() {
78.         Button('第三方登录')
79.           .width("140vp")
80.           .height("80vp")
81.           .fontSize(20)
82.           .margin({
83.             bottom: 40,
84.             top: 60,
85.             right: 20
86.           })
87.         Button('立即注册')
88.           .width("140vp")
89.           .height("80vp")
90.           .fontSize(20)
91.           .margin({
92.             bottom: 40,
93.             top: 60,
94.           })
95.       }
96.       Image($r("app.media.logo")).width(80)
97.     }
98.     .width('100%')
99.     .height('100%')
100.     .justifyContent(FlexAlign.Center)
101.     .alignItems(HorizontalAlign.Center)
102.     .padding({
103.       left: 20,
104.       right: 20
105.     })
106.   }
107. }

复制代码

1. 上面的登录页面实现之后，运行之后，具体效果如下所示：

复制代码

运行和测试

在DevEco Studio中点击运行按钮（或利用快捷键），将应用摆设到模拟器或真机上进行测试。在登录页面中输入用户名和暗码，然后点击“登录”按钮，检察控制台输出以验证代码是否按预期工作。到此为止，整个开发流程全部结束，本篇文章内容也要到此结束。
结束语

通过本文内容，介绍了怎样利用ArkTS来创建一个简单的用户登录页面应用，通过设计布局、编写ArkTS代码和运行测试等步调，你可以快速掌握ArkTS的基本用法并开发出具有交互性的HarmonyOS应用。需要阐明的是本文示例代码是一个较为简单的 HarmonyOS 应用程序示例，但是涵盖了常见的 UI 布局、状态管理、事件处理和导航等内容，是一个比较全面的入门案例，你也可以在这个示例代码中做自己的修改。我觉得理解这些概念对于开发更复杂的 HarmonyOS 应用程序是很有资助的，盼望这篇文章对你有所资助！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。