不废话纯干货，一文教会你鸿蒙开发登录页

华为鸿蒙系统5.0不再兼容安卓app的消息广为流传，再加上各大头部互联网大厂纷纷下场抢夺鸿蒙开发人才，并且最高月薪高达6万元，一时之间鸿蒙开发成了最热门的技术。全文无废话，全部干货，一文教会你鸿蒙开发，0基础也可以上手。

安装华为集成开发环境DevEco Studio 3.1

学习编程开发的第一步就是安装IDE(集成开发环境)软件，开发鸿蒙也不例外。第一步就是下载DevEco Studio 3.1安装包了，可以到华为鸿蒙开发官网下载，网址是：https://developer.harmonyos.com/cn/develop/deveco-studio。

华为DevEco Studio 3.1下载页面

安装DevEco Stutio 3.1没啥好说的，双击安装文件，然后就是“Next"接一个“Next”点下去。要注意的是，该开发环境占用磁盘空间较大，尤其是接下来下载模拟器（仿真），大约需要15GB的存储空间。因此，建议大家安装时修改安装路径到磁盘空间充裕的分区。另外，针对电脑硬件方面，华为建议的最低内存是8GB，最好是16GB。我个人的建议是最好32GB，如果你要使用模拟器的话。

DevEco Studio 3.1快捷方式图标

安装成功后，桌面上会生成一个快捷方式图标，如上图。当然，安装时你需要确认勾选了在桌面生成快捷方式选项。这样，就安装成功了华为鸿蒙开发集成开发环境了。

下载所需模拟器

安装成功IDE后，我们在桌面上双击DevEco Studio 3.1快捷图标，打开IDE。打开后，我们在该软件的顶部工具栏寻找“工具”=>“设备管理器”，以打开“设备管理器”。如下图：

在这里，我们可以模拟器分为三种不同的模式，其中“本地模拟器”是我们在脱机开发中最常用的，所以我们需要下载本地模拟器。由于鸿蒙开发支持手机、平板、电视（智慧屏）、智能穿戴设备、物联网、车机（智能驾驶）等硬件设备，所以你可以根据自己的开发需要选择。

远程模拟器

如果你所需的本地模拟器菜单中没有你想要的模拟器，你可以选择远程模拟器，因为远程模拟器拥有更多选项。这里我们选择了本地模拟器中的手机模拟器，由于手机模拟器文件超过了10GB，因此需要你安排好该模拟器文件的存放路径，你可以通过编辑按钮来重新选择你要将模拟器文件放在哪个文件路径下。

鸿蒙开发使用的开发语言ArkTS是一种描述性开发语言

众所周知，编程开发通常学习的第一个程序就是Hello world。但笔者认为所谓的Hello world程序，只不过是为了让你验证你的开发环境装对了没有，其他的没啥意义。所以，在这里我们开发的第一个鸿蒙应用程序是基于用户登录的应用程序，让你少走不必要的弯路。

在程序开发之前，我们必须做出基本且必须的说明。鸿蒙开发官方推荐的开发语言是ArkTS，也就是JS的一个超集。当然了，鸿蒙开发完全支持纯JS开发，这个JS开发跟你使用H5+JS开发网页没有本质区别。如果你以前是网页开发者，那么基本上你花费三分钟了解一下鸿蒙开发的基本东西，就可以上手了。我们这里使用ArkTS来开发。

ArkTS是一种描述性语言，它与传统的C、C++、VB、Java等编译型语言不同，属于特别傻瓜容易上手的语言。尽管华为官方把这种语言称之为“声明式语言”，我认为这种叫法很不专业。因为声明变量、声明一个类，这是上面所说传统的编程语言使用的概念。而描述性语言，其实就像是我们平时向别人描述一个东西，一个事件一样。比如某人多高、多重、头发长短、衣着如何等。ArkTS也是如此，它给出一个按钮，会描述这个按钮的高度、宽度、圆角、背景色、字体颜色等。

ArkTS基于TypeScript，是JS的超集

使用描述性开发语言，非常符合也更适合更多普通人参与鸿蒙开发。因为我们普通人在表达一件事或者一个事物的时候，通常多是描述性语言。因此无论从我们的思维习惯还是日常处理事务的逻辑上，描述性语言的适应人群最为广泛。

当然，你也可以通过华为鸿蒙开发官网来学习鸿蒙开发，并找到适合你的学习路线图。因为开发鸿蒙应用，可以使用java、C++、ArkTS，也可以使用JS。通过学习，你还可以获得华为鸿蒙开发官网发放的电子认证证书。上图是本文作者的后台获得的证书展示。

创建工程项目

开发鸿蒙应用，我们首先要打开IDE。点击“文件”依次选择"New"=>"Create Project“，点击了Create Project之后，就打开了创建工程的界面。通常，我们会选择空项目，即下图红框所标识的选项。当然，鸿蒙开发为我们准备了多种不同的应用场景开发模板，我们可以按需选择。这里为了教学方便，我们选择了空的工程项目模板。

当我们选择了模板之后，点击Next，然后到Finish。创建好了空项目，IDE会为我们自动生成必要的文件和目录。我们依次点开我们创建的FirstApp工程目录，找到entry这个工程程序的入口目录，依次点开src->main-ets-pages。其中ets目录下就是我们鸿蒙开发最常操作的目录了，下面的pages就是存放我们开发的页面文件。也就是说，pages内的文件，就是我们在鸿蒙手机上看到的页面了。

接下来，我们在pages上右键，在弹出的菜单上选择"新建”（New），然后在弹出的菜单中选择"文件"，点击它。在弹出的输入框中输入Index.ets，然后回车，就可以创建一个页面文件了。如下图：

因为这个页面是一个登录页面，你也可以命名为LoginPage，命名成什么，随你高兴。但如果你是正规开发，还是要根据项目要求，设置一个跟页面功能十分贴合的文件名，方便开发和后期维护。同样的方法，我们再创建一个名称为main.ets的文件，作为我们登录后要跳转的页面。

从容器控件开始编辑登录页面

登录页面通常会有App的图标、App名称、用户名文本输入框、密码输入框、登录按钮组成。程序设计中，我们通常把上述元素称之为控件。但实际上，在页面开发中，我们首先需要给页面一张画布，或者说给一个容器，来承载控件。就像我们要出门坐车，车总得有个车厢才好让大家乘坐一样。

鸿蒙开发ArkTS中，最常用的容器控件就是Column（列容器）和Row（行容器）。顾名思义，列容器就是可以在其内部竖直排列控件的容器，而行容器则是可以横向排列控件的容器。每一个页面，有且只有一个@Entry入口，然后是声明@Component控件组。其中struct Index是表示要构建Index这个界面。接下来是对页面实施构建的build指令，如下图：

我们需要来描述Column容器的表现样式，比如宽度，只需要如上图那样使用.width('100%')来表示这个容器横向占满整个手机屏幕。同样的，.height('100%')则表示纵向占满整个屏幕。由于容器背景默认是白色或者透明的，我们需要为Column容器设置一个背景色，这里我们选择了蓝色，即.backgroundColor('#4169E1')。这样，我们就构建了一个底色是蓝色，占满整个屏幕的容器页面了。下面我们把登录页所需要的控件放上去就可以了。

为了让登录页面看上去更加整洁，代码逻辑清晰，我在ets目录下创建了一个view目录，来存放控件。我将登录页上面的控件分为了三个部分，第一部分包括了App的Logo和App名称的文字，我将它命名为AppLogoImage.ets。输入框和登录按钮放在了ComponentLogin.ets中，登录选项则放在了LoginItem.ets中。这样，我们在Index.ets页面中引用这三个组件组的相对目录即可。引用代码如下图所示：

创建控件组文件的方法，与上文提到的创建页面文件是完全相同的。代码我截图放在下面，大家可以参考：

登录按钮的事件代码如下：

Button('登录',{type:ButtonType.Capsule})
  .stateEffect(true)
  .fontColor('white')
  .fontSize(28)
  .width(320)
  .height(50)
  .margin(26)
  .backgroundColor(Color.Orange)
  .onClick(() => {
    let url= "https://example_urlL?param1=v1&param2=v2";
    let promise = httpRequest.request(
      // 请求url地址
      url,
      {
        // 请求方式
        method: http.RequestMethod.GET,
        // 可选，默认为60s
        connectTimeout: 60000,
        // 可选，默认为60s
        readTimeout: 60000,
        // 开发者根据自身业务需要添加header字段
        header: {
          'Content-Type': 'application/json'
        }
      });
    if(this.account == 'admin' && this.pwd == '123456') {
      router.pushUrl({
        url: 'pages/main',
        params: {
          src: userMsg,
        }
      }, router.RouterMode.Single)
    }else{
      AlertDialog.show({
        title: "登录提示",
        message: "用户名或密码错误",
        confirm: {
          value: "",
          action: () => {

          },
        }
      })
    }
  })

上面这段示例代码中，我加入了http调用的代码，由于本文没有远程调用，只是告诉你如何调用Http远程接口，以方便你实际开发时使用。

项目最终完成效果：

其中，带有手机模拟器的，是从“工具”->“设备管理器"打开手机模拟器，然后点击IDE右上角绿色三角图标，把应用程序推到模拟器上来显示效果的。在模拟器上的效果，与将该应用App安装到华为鸿蒙手机上的效果是一致的。

结束语：

不废话，纯干货，如果你有web开发经验，花几分钟阅读本文，就能让你很快上手鸿蒙开发，并开发出符合鸿蒙系统要求的App登录页面。通过简单的示例，能够快速在学习鸿蒙开发中获得成就感，以便你更有信心开始深入了解鸿蒙开发