效果图：

开发者班级链接：

HarmonyOS赋能资源丰富度建设（第四期）-夏文强-华为开发者学堂

一，环境安装

下载软件

请前往下载中心，登录华为账号后下载DevEco Studio，并根据下载中心页面工具完整性指导进行完整性校验。

DevEco Studio支持Windows和macOS系统，下面将针对两种操作系统的软件安装方式分别进行介绍。

Windows环境

运行环境要求

为保证DevEco Studio正常运行，建议电脑配置满足如下要求：

• 操作系统：Windows10 64位、Windows11 64位
• 内存：16GB及以上
• 硬盘：100GB及以上
• 分辨率：1280*800像素及以上

安装DevEco Studio

1. 下载完成后，双击下载的“deveco-studio-xxxx.exe”，进入DevEco Studio安装向导。在如下界面选择安装路径，默认安装于C:\Program Files路径下，也可以单击浏览（B）...指定其他安装路径，然后单击下一步。

   

2. 在如下安装选项界面勾选DevEco Studio后，单击下一步，直至安装完成。

   

3. 安装完成后，单击Finish完成安装。安装完成后，如有需要请根据配置代理，检查和配置开发环境。

   

   说明

   • DevEco Studio提供开箱即用的开发体验，将HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化DevEco Studio安装配置流程。
   • HarmonyOS SDK已嵌入DevEco Studio中，无需额外下载配置。HarmonyOS SDK可以在DevEco Studio安装位置下DevEco Studio\sdk目录中查看。如需进行OpenHarmony应用开发，可通过File > Settings > OpenHarmony SDK页签下载OpenHarmony SDK。

macOS环境

运行环境要求

为保证DevEco Studio正常运行，建议电脑配置满足如下要求：

• 操作系统：macOS(X86) 11/12/13/14/15、 macOS(ARM) 12/13/14/15
• 内存：8GB及以上
• 硬盘：100GB及以上
• 分辨率：1280*800像素及以上

安装DevEco Studio

1. 在安装界面中，将“DevEco-Studio.app”拖拽到“Applications”中，等待安装完成。

   

2. 安装完成后，如有需要请根据配置代理，检查和配置开发环境。

   说明

   • DevEco Studio提供开箱即用的开发体验，将HarmonyOS SDK、Node.js、Hvigor、OHPM、模拟器平台等进行合一打包，简化DevEco Studio安装配置流程。
   • HarmonyOS SDK已嵌入DevEco Studio中，无需额外下载配置。HarmonyOS SDK可以在DevEco Studio安装位置下DevEco Studio\sdk目录中查看。如需进行OpenHarmony应用开发，可通过DevEco Studio > Preferences/Settings > OpenHarmony SDK页签下载OpenHarmony SDK。

诊断开发环境

为了您开发应用/元服务的良好体验，DevEco Studio提供了开发环境诊断的功能，帮助您识别开发环境是否完备。您可以在欢迎页面单击Diagnose进行诊断。如果您已经打开了工程开发界面，也可以在菜单栏单击Help > Diagnostic Tools > Diagnose Development Environment进行诊断。

DevEco Studio开发环境诊断项包括电脑的配置、网络的连通情况、依赖的工具是否安装等。如果检测结果为未通过，请根据检查项的描述和修复建议进行处理。

启用中文化插件

• 从DevEco Studio 6.0.0 Beta1版本开始，中文化插件无需下载，默认安装。如需切换为中文显示效果，在菜单栏进入File > Settings...（macOS为DevEco Studio > Preferences/Settings ） > Appearance & Behavior > System Settings > Language，语言选择Chinese并点击Apply，在弹窗中点击Restart重启即可完成语言切换。

• 若使用DevEco Studio 6.0.0 Beta1之前版本，请在菜单栏进入File > Settings （macOS为DevEco Studio > Preferences ）> Plugins，选择Installed页签，在搜索框输入“Chinese”，搜索结果里将出现Chinese(Simplified)，在右侧单击Enable，点击OK，在弹窗中单击Restart，重启DevEco Studio后即可生效。

二、创建工程

文件->新建->新建项目

NEXT

新键项目名称和选择版本

创建完成后是这样的

三、安装SDK

文件，设置中下载对应工程版本的SDK

下载模拟器

在设备管理器中下载对应SDK版本的手机

在右下角选着新建

选择对应的下载即可

运行后能有个手机弹出

四、修改代码

1、第一界面

在index.ets中复制该代码

import router from '@ohos.router';//页面切换
import { demo } from "./componte1"
@Entry//入口
@Component//组件
struct hym {
  userneme:string ="SeaDrm";
  passwd:string="12345678"
  build() {
    Column(){
      // demo()//组件
      Image($r("app.media.startIcon"))
        .width(100)
        .margin({top:100,bottom:10})
      Text("登录界面")
        .fontSize(40)
        .fontWeight(FontWeight.Bold)

      Text('登录账号已使用更多的服务')
        .margin({top:10})
        .fontSize(20)
        .fontColor(Color.Gray)

      Row(){
        Text("用户名:")
        TextInput({placeholder:"用户名",text:this.userneme})
          .onChange((name:string)=>{
            this.userneme=name
          })
          .layoutWeight(1)
      }.padding(16)
      Row(){
        Text(" 密  码: ")
        TextInput({placeholder:"密码",text:this.passwd})
          .onChange((key:string)=>{
            this.passwd=key
          })
          .layoutWeight(1)
      }.padding({ left:16,right:16 })

      Row(){
        Text("短信验证码登录")
          .fontColor(Color.Blue)
          .fontSize(13)
        Blank()
        Text("忘记密码")
          .fontColor(Color.Blue)
          .fontSize(13)
      }.padding({ left:16,right:16,bottom:16 })
      .width("100%")

      Button("登录")
        .width("60%")
        .margin({top:60})
        .onClick(()=>{
          console.log("用户名："+this.userneme+",密码："+this.passwd)
          console.log('点击')
          router.pushUrl({url:"pages/hhh"})//页面切换

        })

      Row(){
        Text("注册账号")
          .fontColor(Color.Blue)
          .fontSize(13)
          .margin({top:10})
      }

      Row(){
        Text("其他方式登录")
          .fontColor(Color.Blue)
          .fontSize(13)
          .margin({top:70})
          .fontColor(Color.Gray)
      }

      Row(){
        Button('方式1', { type: ButtonType.Circle, stateEffect: false })
          .backgroundColor(0x317aff)
          .width(50)
          .height(50)

        Blank()
        Button('方式2', { type: ButtonType.Circle, stateEffect: false })
          .backgroundColor(0x317aff)
          .width(50)
          .height(50)

        Blank()
        Button('方式3', { type: ButtonType.Circle, stateEffect: false })
          .backgroundColor(0x317aff)
          .width(50)
          .height(50)


      }.padding({ left:16,right:16,top:16,bottom:16 })
      .width("60%")

    }.height("100%").width("100%")
  }
}

代码解释

1. 导入模块

import router from '@ohos.router';  // 用于页面路由跳转
import { demo } from "./componte1";  // 导入自定义组件（当前被注释）

---

2. 入口组件

@Entry  // 标记为入口组件
@Component  // 标记为自定义组件
struct hym {  // 组件名为 hym

• @Entry：表示该组件是应用的入口页面。

• @Component：表示这是一个自定义组件。

---

3. 组件状态变量

userneme: string = "SeaDrm";  // 用户名，初始值 "SeaDrm"
passwd: string = "12345678";  // 密码，初始值 "12345678"

• 这两个变量用于存储用户输入的用户名和密码。

---

4. UI 构建（build 方法）

整体布局

Column() { ... }  // 垂直布局容器
  .height("100%")  // 高度占满父容器
  .width("100%")   // 宽度占满父容器

---

子组件说明

(1) 图片和标题

Image($r("app.media.startIcon"))  // 引用资源图片
  .width(100)
  .margin({top:100, bottom:10})

Text("登录界面")
  .fontSize(40)
  .fontWeight(FontWeight.Bold)

Text('登录账号已使用更多的服务')
  .margin({top:10})
  .fontSize(20)
  .fontColor(Color.Gray)

(2) 用户名输入框

Row() {
  Text("用户名:")
  TextInput({placeholder: "用户名", text: this.userneme})
    .onChange((name: string) => {  // 监听输入变化
      this.userneme = name;
    })
    .layoutWeight(1)  // 占据剩余空间
}.padding(16)

(3) 密码输入框

Row() {
  Text(" 密  码: ")
  TextInput({placeholder: "密码", text: this.passwd})
    .onChange((key: string) => {
      this.passwd = key;
    })
    .layoutWeight(1)
}.padding({ left:16, right:16 })

(4) 辅助链接（短信登录/忘记密码）

Row() {
  Text("短信验证码登录")
    .fontColor(Color.Blue)
    .fontSize(13)
  Blank()  // 空白填充
  Text("忘记密码")
    .fontColor(Color.Blue)
    .fontSize(13)
}.padding({ left:16, right:16, bottom:16 })
.width("100%")

(5) 登录按钮

Button("登录")
  .width("60%")
  .margin({top:60})
  .onClick(() => {
    console.log("用户名：" + this.userneme + ",密码：" + this.passwd);  // 打印日志
    router.pushUrl({url: "pages/hhh"});  // 跳转到 pages/hhh 页面
  })

(6) 注册账号

Row() {
  Text("注册账号")
    .fontColor(Color.Blue)
    .fontSize(13)
    .margin({top:10})
}

(7) 其他登录方式

Row() {
  Text("其他方式登录")
    .fontColor(Color.Gray)  // 灰色文字
    .fontSize(13)
    .margin({top:70})
}

(8) 第三方登录按钮

Row() {
  Button('方式1', { type: ButtonType.Circle, stateEffect: false })
    .backgroundColor(0x317aff)  // 蓝色背景
    .width(50)
    .height(50)

  Blank()  // 间隔

  // 方式2、3同理
}.padding({ left:16, right:16, top:16, bottom:16 })
.width("60%")

---

5. 功能总结

• 显示一个登录界面，包含用户名/密码输入框。

• 支持输入实时更新状态变量（userneme、passwd）。

• 点击登录按钮打印用户名和密码，并跳转到 pages/hhh 页面。

• 提供短信登录、忘记密码、注册账号等辅助功能。

• 支持第三方登录方式（三个圆形按钮）。

2、第二界面

在目录下创建一个hhh.ex文件

复制下面代码

import router from '@ohos.router';
@Entry
@Component
struct Scend {
  build() {
    Column() {
      Text("这是第二个界面").fontSize(50)
      Button("返回").onClick(() => {
        router.pushUrl({url:"pages/Index"})

      })
    }
  }
}

在main_pages.json中

增加

{
  "src": [
    "pages/Index",
    "pages/hhh"
  ]
}

代码解释

1. 导入模块

import router from '@ohos.router';  // 导入路由模块，用于页面导航

---

2. 组件定义

@Entry  // 标记为入口组件（可以独立运行的页面）
@Component  // 标记为自定义组件
struct Scend {  // 组件名为 Scend（Second的拼写错误）

---

3. UI 构建（build 方法）

整体布局

Column() {  // 垂直布局容器
  // 子组件内容
}

---

子组件说明

(1) 文本显示

Text("这是第二个界面")
  .fontSize(50)  // 设置字体大小为50

• 显示文字"这是第二个界面"

• 使用较大的字体（50px）突出显示

(2) 返回按钮

Button("返回")  // 按钮文字为"返回"
  .onClick(() => {  // 点击事件处理
    router.pushUrl({url: "pages/Index"})  // 跳转到Index页面
  })

---

4. 功能总结

• 这是一个简单的二级页面，显示"这是第二个界面"的文字

• 提供一个"返回"按钮，点击后跳转回 pages/Index 页面

• 页面布局简单，只有一个垂直排列的文本和按钮

五、预览

点击右边栏，预览

点击登录，就会跳转到第二界面