鸿蒙系统学习记录

分类：鸿蒙系统作者：阿怪睡不着

一、自定义tabs

// home页
import Home from './Home'
// Work页
import Work from './Work'
// mine页
import Mine from './Mine'

@Entry
@Component
struct TabsExample {
  @State currentIndex: number = 0;
  private tabsController: TabsController = new TabsController();

  @Builder TabBuilder(title: string,targetIndex: number,selectedImg: Resource,normalImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .size({ width: 25,height: 25 })
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#3774c6' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .height(50)
    .justifyContent(FlexAlign.Center)
    .onClick(() => {
      this.currentIndex = targetIndex;
      this.tabsController.changeIndex(this.currentIndex);
    })
  }

  build() {
    Tabs({ barPosition: BarPosition.End,controller: this.tabsController }) {
      TabContent() {
        Home()
      }
      .tabBar(this.TabBuilder('首页',$r('app.media.ic_tab_home_selected'),$r('app.media.ic_tab_home_normal')))

      TabContent() {
        Work()
      }.tabBar(this.TabBuilder('工作台',1,$r('app.media.ic_tab_work_selected'),$r('app.media.ic_tab_work_normal')))

      TabContent() {
        Mine()
      }.tabBar(this.TabBuilder('我的',2,$r('app.media.ic_tab_mine_selected'),$r('app.media.ic_tab_mine_normal')))
    }
    .barWidth('100%')
    .barHeight(50)
    .onChange((index: number) => {
      this.currentIndex = index;
    })
  }
}

效果

二、路由跳转

router.pushUrl({url:'pages/Mine'}) 有历史记录，可以通过router.back()返回  
router.replaceUrl({url:'pages/Mine'}) 无历史记录
@State msg:string = router.getParams()?.['msg']可以接收router.pushUrl传递的数据

三、登录页

import router from '@ohos.router';
import prompt from '@system.prompt';

let msg: String = 'login页面传来的数据'

@Entry
@Component
struct RowPage {
  @State account: string = ''
  @State password: string = ''

  build() {
    Column({ space: 10 }) {
      Image($r('app.media.logo'))
        .width(78)
        .height(78)
        .margin({ top: 120,bottom: 20 })
      Text('登录')
        .fontSize(24)
        .fontWeight(FontWeight.Medium)
        .fontColor('#182431')
      Text('登录账号以使用更多服务')
        .fontSize(16)
        .fontColor('#798189')
        .margin({ top: 20,bottom: 20 })
      TextInput({ placeholder: '请输入账号' })
        .maxLength(11)
        .type(InputType.Number)
        .onChange((value: string) => {
          this.account = value;
        })
        .backgroundColor('#F0F2F4')
        .border({ color: '#3774c6',width: '100%' })
      TextInput({ placeholder: '请输入密码' })
        .type(InputType.Password)
        .maxLength(9)
        .showPasswordIcon(true)
        .onChange((value: string) => {
          this.password = value;
        })
        .backgroundColor('#F0F2F4')
        .border({ color: '#3774c6',width: '100%' })
      Row() {
        Text('短信验证码登录')
          .fontColor('#3774c6')
          .onClick(()=>{
            router.pushUrl({url:'pages/LoginPhone'})
          })
        Text('忘记密码？')
          .fontColor('#3774c6')
          .onClick(()=>{
            router.pushUrl({url:'pages/ForgetPassword'})
          })
      }.width('100%')
      .margin({ top: 10 })
      .justifyContent(FlexAlign.SpaceBetween)

      Button('登录')
        .onClick(() => {
          if (this.account != '' && this.password != '') {
            router.pushUrl({
              url: 'pages/Index',params: {
                msg: msg,}
            })
          } else {
            prompt.showToast({
              message: '请输入账号密码！',duration: 2000,});

          }
        }
        )
        .width('100%')
        .margin({ top: 50,bottom: 10 })
        .backgroundColor('#3774c6')
      Text('注册账号')
        .fontColor('#3774c6')
    }.height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#F1F3F5')
  }
}

效果

四、短信验证码登录

import router from '@ohos.router';
import prompt from '@system.prompt';


@Entry
@Component
struct RowPage {
  @State phone: string = ''
  @State verifyCode: string = ''

  build() {
    Column({ space: 10 }) {
      Image($r('app.media.logo'))
        .width(78)
        .height(78)
        .margin({ top: 120,bottom: 20 })
      Text('短信验证码登录')
        .fontSize(24)
        .fontWeight(FontWeight.Medium)
        .fontColor('#182431')
      Text('登录账号以使用更多服务')
        .fontSize(16)
        .fontColor('#798189')
        .margin({ top: 20,bottom: 20 })
      TextInput({ placeholder: '请输入手机号' })
        .maxLength(11)
        .type(InputType.PhoneNumber)
        .onChange((value: string) => {
          this.phone = value;
        })
        .backgroundColor('#F0F2F4')
        .border({ color: '#3774c6',width: '100%' })
      Text('点击获取验证码').onClick(() => {
        console.log('获取验证码')
      }).fontSize(16)
        .fontColor('#3774c6').position({ x: 220,y: 343 })
      TextInput({ placeholder: '请输入短信验证码' })
        .type(InputType.Normal)
        .onChange((value: string) => {
          this.verifyCode = value;
        })
        .backgroundColor('#F0F2F4')
        .border({ color: '#3774c6',width: '100%' })
      Row() {
        Text('账号密码登录')
          .fontColor('#3774c6')
          .onClick(() => {
            router.pushUrl({ url: 'pages/Login' })
          })
        Text('忘记账号？')
          .fontColor('#3774c6')
          .onClick(() => {
            router.pushUrl({ url: 'pages/ForgetPassword' })
          })
      }.width('100%')
      .margin({ top: 10 })
      .justifyContent(FlexAlign.SpaceBetween)

      Button('登录')
        .onClick(() => {
          if (this.phone != '') {
            if (this.verifyCode != '') {
              router.pushUrl({
                url: 'pages/Index',})
            } else {
              prompt.showToast({
                message: '请输入验证码！',});
            }
          } else {
            prompt.showToast({
              message: '请输入手机号！',});
          }
        }
        )
        .width('100%')
        .margin({ top: 50,bottom: 10 })
        .backgroundColor('#3774c6')
    }.height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#F1F3F5')
  }
}

效果

五、忘记密码

import router from '@ohos.router';
import prompt from '@system.prompt';


@Entry
@Component
struct RowPage {
  @State phone: string = ''
  @State verifyCode: string = ''
  @State newPassword: string = ''
  @State password: string = ''

  build() {
    Column({ space: 10 }) {
      Image($r('app.media.logo'))
        .width(78)
        .height(78)
        .margin({ top: 120,bottom: 20 })
      Text('忘记密码')
        .fontSize(24)
        .fontWeight(FontWeight.Medium)
        .fontColor('#182431')
      Text('登录账号以使用更多服务')
        .fontSize(16)
        .fontColor('#798189')
        .margin({ top: 20,width: '100%' })
      TextInput({ placeholder: '请输入新密码' })
        .type(InputType.Normal)
        .maxLength(9)
        .showPasswordIcon(true)
        .onChange((value: string) => {
          this.newPassword = value;
        })
        .backgroundColor('#F0F2F4')
        .border({ color: '#3774c6',width: '100%' })
      TextInput({ placeholder: '请确认新密码' })
        .type(InputType.Normal)
        .maxLength(9)
        .showPasswordIcon(true)
        .onChange((value: string) => {
          this.password = value;
        })
        .backgroundColor('#F0F2F4')
        .border({ color: '#3774c6',width: '100%' })
      Row() {
        Text('账号密码登录')
          .fontColor('#3774c6')
          .onClick(() => {
            router.pushUrl({ url: 'pages/Login' })
          })
      }.width('100%')
      .margin({ top: 10 })
      .justifyContent(FlexAlign.SpaceBetween)

      Button('重置密码')
        .onClick(() => {
          if (this.phone != '') {
            if (this.verifyCode != '') {
              if (this.newPassword !== '' && this.password !== '') {
                if (this.newPassword !== this.password) {
                  prompt.showToast({
                    message: '两次输入密码不一致！',});
                } else {
                  prompt.showToast({
                    message: '重置密码成功，请重新登录！',});
                  setTimeout(() => {
                    router.pushUrl({
                      url: 'pages/Login',})
                  },1000)
                }
              } else {
                prompt.showToast({
                  message: '请输入密码！',});
              }
            } else {
              prompt.showToast({
                message: '请输入验证码！',});
            }
          } else {
            prompt.showToast({
              message: '请输入手机号',bottom: 10 })
        .backgroundColor('#3774c6')
    }.height('100%')
    .width('100%')
    .padding(10)
    .backgroundColor('#F1F3F5')
  }
}

效果

原文地址：https://blog.csdn.net/qq_43751614/article/details/135391217

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 四）
文章浏览阅读1.4k次。被@Observed装饰的类，可以被观察到属性的变化；子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中是属性，这个属性同样也需要被@Observed装饰。单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。_鸿蒙ark对象数组
【Harmony OS】【ArkUI】【Demo】关系数据库基本使用
文章浏览阅读1k次。Harmony OS_harmonyos创建数据库
HarmonyOS4.0之ArkTs学习笔记
文章浏览阅读1.1k次，点赞25次，收藏23次。自定义组件Header.ets页面(子组件)//自定义组件@Component//组件声明private title:ResourceStr//接收的参数build(){Row() {index.ets(父组件)//导入自定义组件@Entry@Componentbuild() {Column() {/*** 1. 自定义组件调用-----自定义组件------* 2. 在调用的组件上设置样式*/ShopTitle({ title: '商品列表' })
跨Android、iOS、鸿蒙多平台框架ArkUI-X
文章浏览阅读952次，点赞11次，收藏25次。ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具，帮助您提升移动应用界面开发效率30%。您只需使用一套ArkTS API，就能在Android、iOS、鸿蒙多个平台上提供生动而流畅的用户界面体验。_支持ios 安卓 鸿蒙next的跨平台方案
错误: 找不到符号符号: 变量 Layout_list_item位置: 类 ResourceTable
文章浏览阅读735次。​错误: 找不到符号符号: 变量 Layout_list_item位置: 类 ResourceTable_错误: 找不到符号 符号: 变量 resourcetable 位置: 类 mainabilityslice
鸿蒙harmony加解密算法 写法封装
文章浏览阅读941次，点赞23次，收藏21次。harmony ARKTS base64 加解密_鸿蒙 鸿蒙加解密算法库
HarmonyOS鸿蒙基于Java开发: Java UI 自定义布局
文章浏览阅读860次，点赞21次，收藏24次。使用自定义布局，实现子组件自动换行功能。图1自定义布局的使用效果创建自定义布局的类，并继承ComponentContainer，添加构造方法。//如需支持xml创建自定义布局，必须添加该构造方法实现ComponentContainer.EstimateSizeListener接口，在onEstimateSize方法中进行测量。......@Override//通知子组件进行测量//关联子组件的索引与其布局数据idx++) {//测量自身。_鸿蒙javaui
使用 Taro 开发鸿蒙原生应用 —— 快速上手，鸿蒙应用开发指南
文章浏览阅读917次，点赞25次，收藏25次。这里需要注意的是，真机需要使用华为侧提供的测试机，测试机中会安装纯鸿蒙的系统镜像，能够体验到完整的鸿蒙系统功能，纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。当前，真机调试需要使用华为侧提供的测试机，测试机中会安装纯鸿蒙的系统镜像，能够体验到完整的鸿蒙系统功能，纯鸿蒙应用目前还不能完美地在 HarmonyOS 4.0 的商用机侧跑起来。另外，由于样式的解析是基于组件文件的纬度的，因此样式文件只能应用于被其引用的组件文件中，而不能跨文件应用，并且样式文件也只支持类选择器。_鸿蒙 小程序
2. HarmonyOS应用开发DevEcoStudio准备-1
文章浏览阅读876次，点赞17次，收藏4次。2. HarmonyOS应用开发DevEcoStudio准备-1HUAWEI DevEco Studio为运行在HarmonyOS和OpenHarmony系统上的应用和服务（以下简称应用/服务）提供一站式的开发平台。
HarmonyOS ArkTS实现JSON数组动态渲染
文章浏览阅读811次。此对象主要映射JSON数组数据，比如服务器传的数据是这样的。_arkts json
『牛角书』HarmonyOS手机小游戏——数字华容道
文章浏览阅读429次。鸿蒙小游戏-数字华容道_华为鸿蒙手机自带小游戏
HarmonyOS【应用服务开发】在模块中添加Ability
文章浏览阅读1.1k次，点赞24次，收藏19次。Ability是应用/服务所具备的能力的抽象，一个Module可以包含一个或多个Ability。
OpenHarmony通过MQTT连接 “改版后的华为IoT平台”
文章浏览阅读846次。本文带大家使用MQTT协议连接华为IoT平台,使用的是E53_IA1 智慧农业扩展板与 BearPi-HM_Nano 开发主板_mqtt 如何对接第三方iot平台
HarmonyOS/OpenHarmony元服务开发-ArkTS卡片运行机制
文章浏览阅读567次。HarmonyOS_arkts卡片
ArkTS开发鸿蒙OS连接mongoDB（后端node.js）2024最新教程
文章浏览阅读1k次，点赞19次，收藏20次。ArkTS开发鸿蒙OS连接mongoDB（后端node.js）2024最新教程
鸿蒙Harmony开发学习（一）运行helloworld
文章浏览阅读1.2k次，点赞23次，收藏15次。HarmonyOS与OpenHarmony（1）本质上的不同是：HarmonyOS是鸿蒙操作系统，而OpenHarmony则是从开源项目。这里可以联想一下Android，比如小米手机在Android开源系统的基础上开发了MIUI的手机操作系统，HarmonyOS就类似于MIUI，OpenHarmony类似Android基础底座。（2）HarmonyOS:是双框架，内聚了AOSP（Android Open Source Project ）和OpenHarmony等。_鸿蒙模拟器开了怎么跑代码
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件
文章浏览阅读1.1k次，点赞21次，收藏21次。鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Navigation组件。
鸿蒙手表开发之使用adb命令安装线上包
文章浏览阅读2k次。由于之前的哥们匆忙离职了，所以鸿蒙手表项目的新版本我临时接过来打包发布，基本上之前没有啥鸿蒙经验，但是一直是做Android开发的，在工作人员的指导下发现打包配置基本上和Android一样，所以这些都不是问题，这里记录一下使用过程中遇到的问题。！过程和遇到的问题基本上都讲解了，关机睡觉，打卡收工。_鸿蒙系统adb命令
HarmonyOS应用开发者基础认证
文章浏览阅读7.3k次，点赞9次，收藏29次。39. 【多选题】_column和row容器中,设置子组件在主轴方向上的对齐格式
18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器
文章浏览阅读1.1k次，点赞13次，收藏24次。18.鸿蒙HarmonyOS App(JAVA)日期选择器-时间选择器点击button按钮显示月份与获取的时间。_harmonyos农历获取
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot