【鸿蒙（HarmonyOS）】Router（路由）、CustomDialog（弹窗）、Popup（气泡提示）和setTimeout（定时服务）的使用（以登录模块为例）

已于 2023-09-18 10:39:24 修改
阅读量1.7k 收藏 9
点赞数 6
分类专栏： HarmonyOS 文章标签： harmonyos 华为
于 2023-09-18 10:33:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48916759/article/details/132957172
版权

文章目录

一、引言

  • 描述：如何在鸿蒙系统中开发一个功能齐全的登录模块，具备准确的定位提示。
  • 难度：初级
  • 知识点：
  • 1、Router页面路由
  • 2、CustomDialog自定义弹窗
  • 3、Popup气泡提示
  • 4、setTimeout定时器
  • 效果：
  • 在这里插入图片描述

二、设计

1、UI设计

（1）主布局

关于布局构建，可以参考同栏目中的文章，以下是大致的布局，后面再完善

在这里插入图片描述

@Entry
@Component
struct Index {

  @State name: string = ""
  @State pass: string = ""
  @State btnLogin: string = "登录"

  build() {
    Row() {
      Column() {
        // person
        Image($r('app.media.person')).width(100).height(100).margin({top:80, bottom:50})
        // data
        TextArea({ placeholder : "账号/电话号码"})
          .margin(15)
          .onChange((value: string) => {
          	// TOD 数据绑定
            this.name = value
          })
        TextInput({ placeholder : "密码", text : this.pass})
          .margin(15)
          .type(InputType.Password)
          .onChange((value: string) => {
          	// TOD 数据绑定
            this.pass = value
          })
        // btn
        Button(this.btnLogin, { type: ButtonType.Normal, stateEffect: true })
          .borderRadius(18)
          .backgroundColor(0x317aff)
          .width(90)
          .height(40)
          .margin({top:50})
          .onClick(() => {
          	// TODO 登录逻辑
            ...
          })
      }
    }
  }
}

（2）CustomDialog

CustomDialog（弹窗）：可用于广告、中奖、警告、软件更新等与用户交互响应操作。

  • 第一步：@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容。
// 弹出登录成功的信息
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  build() {
    Column() {
      Text('登录成功')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
        .borderRadius(5)
    }
  }
}
  • 第二步：@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容。
@Entry
@Component
struct Index {

	// 创建构造器
	dialogController: CustomDialogController = new CustomDialogController({
  		builder: CustomDialogExample({}),
	})

	...

}
  • 第三步：点击与onClick事件绑定的组件使弹窗弹出。
@Entry
@Component
struct Index {

	...

	build() {
    Row() {
      Column() {
      	  Flex({justifyContent:FlexAlign.Center}) {
          Button(this.btnLogin, { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(18)
            .backgroundColor(0x317aff)
            .width(90)
            .height(40)
            .margin({ top: 50 })
            .onClick(() => {
                // 打开自定义弹窗
                this.dialogController.open()
                // 定时关闭弹窗（1s）
                setTimeout(() => {
                  // 关闭自定义弹窗
                  this.dialogController.close()
                }, 1000)
            })
        }
      }
     }
    }

}

（3）Popup

Popup（气泡提示）：可绑定在组件上显示气泡弹窗提示，设置弹窗内容、交互逻辑和显示状态。

  • 以当个输入框为例

在这里插入图片描述

@Entry
@Component
struct Index {

  @State name: string = ""
  @State pass: string = ""
  @State btnLogin: string = "登录"
  @State handlePopup_name: boolean = false
  @State handlePopup_pass: boolean = false
  @State handlePopup_btn: boolean = false

  // TODO 创建构造器

  build() {
    Row() {
      Column() {
        // person
        ...
        // data
        ...
        TextInput({ placeholder : "密码", text : this.pass})
          .margin(15)
          .type(InputType.Password)
          .onChange((value: string) => {
            ...
          })
          .bindPopup(this.handlePopup_pass, {
            message: '密码为空',
          })
        // btn
        Flex({justifyContent:FlexAlign.Center}) {
          Button(this.btnLogin, { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(18)
            .backgroundColor(0x317aff)
            .width(90)
            .height(40)
            .margin({ top: 50 })
            .onClick(() => {
              ...
              // 密码为空，气泡提示
              if (this.pass == "") {
                this.handlePopup_pass = !this.handlePopup_pass
              }
              ...
            })
            ...
        }
      }
    }
  }
}

2、逻辑设计

关于此处的Router和setTimeout，主攻前端的小伙伴肯定不陌生，科班学习的小伙伴多少也有印象，这里我就简单讲一下。

（1）Router

Router（路由）：在应用程序中实现不同页面之间的跳转和数据传递

  • 第一步：声明URL
    在这里插入图片描述

  • 第二步：跳转并传递数值

import router from '@ohos.router';

// 弹出登录成功的信息
...

@Entry
@Component
struct Index {

  ...

  // 创建构造器
  ...

  build() {
    Row() {
      Column() {
        ...
        // btn
        Flex({justifyContent:FlexAlign.Center}) {
          Button(this.btnLogin, { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(18)
            .backgroundColor(0x317aff)
            .width(90)
            .height(40)
            .margin({ top: 50 })
            .onClick(() => {
              ...
              router.push({
                    url: 'pages/UserInfo',
                    // 传递数值
                    params: {
                      name: this.name,
                      pass: this.pass
                    }
              })
            })
        }
      }
    }
  }
}
  • 第三步：被选定界面，接收数值
import router from '@ohos.router';

@Entry
@Component
struct UserInfo {

  // 接收数据
  @State name: string = router.getParams()?.['name'];
  @State pass: string = router.getParams()?.['pass'];

  build() {
    Row() {
      Column(){
        Text("账号：" + this.name).fontSize(50)
        Text("密码：" + this.pass).fontSize(50)
        Button('返回')
          .onClick(() => {
            router.back()
          })
      }
    }
  }

}

（2）setTimeout

setTimeout（定时器）：指定多久后（ms）完成方法（function）

setTimeout(() => {
  // 关闭自定义弹窗
  this.dialogController.close()
  // 路由跳转
  router.push({
    url: 'pages/UserInfo',
    params: {
      name: this.name,
      pass: this.pass
    }
  })
}, 1000)

三、附件

1、完整代码

  • Index.ets
import router from '@ohos.router';

// 弹出登录成功的信息
@CustomDialog
struct CustomDialogExample {
  controller: CustomDialogController
  build() {
    Column() {
      Text('登录成功')
        .fontSize(20)
        .margin({ top: 10, bottom: 10 })
        .borderRadius(5)
    }
  }
}

@Entry
@Component
struct Index {

  @State name: string = ""
  @State pass: string = ""
  @State btnLogin: string = "登录"
  @State handlePopup_name: boolean = false
  @State handlePopup_pass: boolean = false
  @State handlePopup_btn: boolean = false

  // 创建构造器
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({}),
  })

  build() {
    Row() {
      Column() {
        // person
        Image($r('app.media.person')).width(100).height(100).margin({top:80, bottom:50})
        // data
        TextArea({ placeholder : "账号/电话号码"})
          .margin(15)
          .onChange((value: string) => {
            this.name = value
            this.handlePopup_name = false
            this.handlePopup_btn = false
          })
          .bindPopup(this.handlePopup_name, {
            message: '账号为空',
          })
        TextInput({ placeholder : "密码", text : this.pass})
          .margin(15)
          .type(InputType.Password)
          .onChange((value: string) => {
            this.pass = value
            this.handlePopup_pass = false
            this.handlePopup_btn = false
          })
          .bindPopup(this.handlePopup_pass, {
            message: '密码为空',
          })
        // btn
        Flex({justifyContent:FlexAlign.Center}) {
          Button(this.btnLogin, { type: ButtonType.Normal, stateEffect: true })
            .borderRadius(18)
            .backgroundColor(0x317aff)
            .width(90)
            .height(40)
            .margin({ top: 50 })
            .onClick(() => {
              if (this.name == "") {
                this.handlePopup_name = !this.handlePopup_name
              } else if (this.pass == "") {
                this.handlePopup_pass = !this.handlePopup_pass
              } else if (this.name == "123456" && this.pass == "666") {
                console.log("登录成功!")
                this.dialogController.open()
                // 定时任务,跳转到第二个界面,两秒后
                setTimeout(() => {
                  // 关闭自定义弹窗
                  this.dialogController.close()
                  // 路由跳转
                  router.push({
                    url: 'pages/UserInfo',
                    params: {
                      name: this.name,
                      pass: this.pass
                    }
                  })
                }, 1000)
              } else {
                this.handlePopup_btn = !this.handlePopup_btn
              }
            })
            .bindPopup(this.handlePopup_btn, {
              message: '账号或密码错误',
            })
        }
      }
    }
  }
}
  • UserInfo.ets
import router from '@ohos.router';

@Entry
@Component
struct UserInfo {

  @State name: string = router.getParams()?.['name'];
  @State pass: string = router.getParams()?.['pass'];

  build() {
    Row() {
      Column(){
        Text("账号：" + this.name).fontSize(50)
        Text("密码：" + this.pass).fontSize(50)
        Button('返回')
          .onClick(() => {
            router.back()
          })
      }
    }
  }

}
云端new守夜人
关注
专栏目录
鸿蒙应用开发之弹窗
xiangzhihong8的专栏
10-26 909
自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现，然后结合CustomDialogController来控制自定义弹窗的显示和隐藏。下面我们通过一个兴趣爱好的选择框来介绍自定义弹窗的使用。从上面的效果图可以看出，这个选择框是一个多选的列表弹窗，我们可以使用装饰器@CustomDialog，结合List组件来完成这个弹窗布局，实现步骤如下：1，初始化弹窗数据。
HarmonyOS从基础到实战-高性能华为在线答题元服务
热门推荐
一键难忘的博客
11-21 13万+
HarmonyOS从基础到实战-高性能华为在线答题元服务 在本文中，我们介绍了一个关于在线答题应用的项目，其中包括项目结构和开发计划。项目主要分为主应用的Ability（entryability）、卡片的Ability（Entnyformability）、从云数据库导出的数据类型（Models）以及页面代码文件夹（Pages）等模块。使用了两个重要的配置文件，分别是agconnect-services.json和schema.json，用于连接serverless服务和云端配置信息。
鸿蒙HarmonyOS教程-路由管理（Router）【入门篇】
shudaoshanQAQ的博客
01-12 4021
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。
鸿蒙之setTimeout问题
fengyongge的专栏
09-25 303
开启日志并打印，发现会执行Timer has been successfully deleted.TimerID，代表setTimeout被取消，打印TimerID，发现为0，为什么是0，由于场景比较特殊这个setTimeout是项目中第一个setTimeout，经确认TimerID是从0开始累加。发现有其他地方TimerID默认值不规范，例如初始化为0或者在最后清空时候未做判断，导致被取消。setTimeout箭头函数里面，延时后业务逻辑不执行，导致出现业务bug。
【HarmonyOS NEXT】路由router
weixin_71403100的博客
02-22 3688
这种方式不仅可以返回到指定页面，还可以在返回的同时传递自定义参数信息。这些参数信息可以在目标页中通过调用router.getParams()方法进行获取和解析。// 获取传递过来的参数对象// 获取id属性的值@Entry@Componentbuild() {Row() {Text('接收login传递的id：' + this.params.id)Button('返回到login页面')message:'确定返回到login页面吗？',
深入解析鸿蒙系统的页面路由（Router）机制
maniuT的博客
02-17 1818
鸿蒙系统以其独特的分布式架构和跨设备的统一体验而备受瞩目。在这个系统中，页面路由（Router）机制是连接应用各页面的关键组成部分。本文将深入探讨鸿蒙系统的页面路由，揭示其工作原理、特点以及在应用开发中的实际应用。
【鸿蒙开发教程】HarmonyOS Next 页面路由
HarmonyOS_001的博客
06-17 2624
即 Navigation + NavPathStack + navDestination// 主页用Navigation// 子页面用 NavDestination})有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
鸿蒙HarmonyOS应用开发者高级认证习题汇总（齐全）
11-25
【鸿蒙HarmonyOS应用开发者高级认证习题详解】 鸿蒙HarmonyOS是华为推出的面向全场景的分布式操作系统，旨在构建万物互联的新一代智能终端操作系统。对于开发者来说，理解和掌握HarmonyOS应用开发的关键知识点至关...
HarmonyOS应用开发者基础认证题目+答案
09-26
HarmonyOS应用开发者基础认证题目，以及答案，本人目前已经取得证书啦，有需要的朋友自行下载哦~ 1.DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。 （正确） 2.main_pages.json存放页面page路径配置信息。...
HarmonyOS应用开发者基础认证 word试题及答案
12-21
三、 HarmonyOS 路由 * 每调用一次 router.pushUrl() 方法，默认情况下，页面栈数量会加 1，页面栈支持的最大页面数量为 32。 四、 HarmonyOS 存储 * 首选项 preferences 是以 Key-Value 形式存储数据，其中 Key ...
鸿蒙Harmony-页面路由（router）详解
袁震的博客
01-17 4390
慢慢理解世界，慢慢更新自己，希望你的每一个昨天，今天，和明天都会很快乐，你知道的，先好起来的从来都不是生活，而是你自己
鸿蒙开发系列教程（十七）--路由Router
huazi99的博客
02-13 1583
router.back({ url: ‘pages/Home’, params: { info: ‘你好’ }});
【鸿蒙HarmonyOS开发笔记】关于页面路由（router）详解
温的打怪之旅
03-18 7715
页面路由指在应用程序中实现不同页面之间的跳转和数据传递。HarmonyOS提供了Router模块，通过不同的url地址，可以方便地进行页面路由，轻松地访问不同的页面。本文将从页面跳转、页面返回和页面返回前增加一个询问框几个方面介绍Router模块提供的功能。自定义询问框的方式，可以使用弹窗或者自定义弹窗实现。这样可以让应用界面与系统默认询问框有所区别，提高应用的用户体验度。本文以弹窗为例，介绍如何实现自定义询问框。在使用页面路由Router相关功能之前，需要在代码中先导入Router模块。
鸿蒙开发（ArkTs）路由
Davoid的博客
12-04 945
页面栈的最大容量为32个页面。如果超过这个限制，可以调用。方法清空历史页面栈，释放内存空间。
鸿蒙HarmonyOS教程-路由管理（Router）【入门篇】_鸿蒙 pushnamedroute
2401_84164576的博客
04-12 2126
params: {info: '来自Home页'});多HAP机制。
鸿蒙开发----定时器
2301_82231652的博客
05-28 1512
鸿蒙开发----定时器
鸿蒙5.0开发：ArkUI组件（页面路由）
最新发布
AyomQAQ的博客
10-14 577
路由导航是指在应用程序中通过路径导航定位到特定页面的过程。
鸿蒙HarmonyOS开发者认证题库详解与答案解析
鸿蒙HarmonyOS应用开发者认证题库包含了针对HarmonyOS开发者的多项知识点，旨在帮助开发者理解和掌握操作系统的关键特性，以便通过认证考试。以下是部分题目及其解析： 1. **布局管理** - 在Colum和Row容器组件中，...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云端new守夜人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值