华为鸿蒙app 登录页面和首页开发

阡陌昏晨2023-12-06 13:42

前言

华为鸿蒙app开发，真的遥遥领先？juejin.cn/post/730207...

上次随手写了一遍华为鸿蒙app的入门开发的文章没想到引起了广大掘友的讨论。

** 上次的体验 我一度要放弃鸿蒙app开发了，但是在评论区发现有些朋友解释了 需要next版本的真机才能体验流畅的感觉，于是乎我又对鸿蒙app开发燃起了兴趣。然后跟着官网学习大家常用app的页面的开发**

HarmonyOS应用开发官网

HarmonyOS第一课|应用开发视频教程学习|HarmonyOS应用开发官网

登录页面

核心代码我放出来了

less 复制代码 
import Prompt from '@system.prompt'
import router from '@ohos.router'
import CommonConstants from '../common/constant/CommonConstants'

@Entry
@Component
struct LoginPage {
  @State message: string = '登录页面'
  @State account: string = ''
  @State pwd: string = ''
  @State isShowProgress: Boolean = false
  private timeOutId = -1

  login() {
    // if (this.account === '' || this.pwd === '') {
    //   Prompt.showToast({
    //     message: '请输入账户和密码'
    //   })
    // } else {
    //   this.isShowProgress = true
    //   if (this.timeOutId === -1) {
    //     this.timeOutId = setTimeout(() => {
    //       router.pushUrl({
    //         url: 'pages/HomePage',
    //       }).catch((error: Error) => {
    //
    //       })
    //     }, 5000)
    //   }
    // }
    this.timeOutId = setTimeout(() => {
      router.pushUrl({
        url: 'pages/HomePage',
      }).catch((error: Error) => {

      })
    }, 1000)
  }

  build() {
    Column() {
      Text(this.message)
        .fontSize(20)
        .fontColor($r('app.color.login_blue_text_color'))
        .fontWeight(FontWeight.Bold)
        .margin({
          top: 20
        })
      Image($r("app.media.logo"))
        .width(100)
        .height(100)

      TextInput({
        placeholder: $r('app.string.account')
      }).maxLength(11)
        .type(InputType.PhoneNumber)
        .margin({
          top: 100
        })
        .onChange((value: string) => {
          this.account = value
        })
      Line().lineStyle()
      TextInput({
        placeholder: $r('app.string.pwd')
      }).maxLength(20)
        .type(InputType.Password)
        .onChange((value: string) => {
          this.pwd = value
        })

      Button($r('app.string.login'), { type: ButtonType.Capsule })
        .width('60%')
        .height($r('app.float.login_button_height'))
        .fontSize($r('app.float.normal_text_size'))
        .fontWeight(FontWeight.Medium)
        .backgroundColor($r('app.color.login_button_color'))
        .margin({ top: $r('app.float.login_button_margin_top'), bottom: $r('app.float.login_button_margin_bottom') })
        .onClick(() => {
          this.login();
        })

      Row() {
        Text('短信验证码登录')
          .blueTextStyle()
        Text('忘记密码')
          .blueTextStyle()
      }.justifyContent(FlexAlign.SpaceBetween)
      .width('100%')
      .margin(20)

      if (this.isShowProgress) {
        LoadingProgress()
          .color($r('app.color.loading_color'))
          .width($r('app.float.login_progress_size'))
          .height($r('app.float.login_progress_size'))
          .margin({ top: $r('app.float.login_progress_margin_top') })
      }

      Row({
        space: 20
      }) {
        Button('其他方式登录')
          .width('25%')
          .type(ButtonType.Circle)
        Button('其他方式登录2')
          .width('25%')
          .type(ButtonType.Circle)
        Button('其他方式登录3')
          .width('25%')
          .type(ButtonType.Circle)
      }.justifyContent(FlexAlign.Center)
      .margin({
        top: 100
      })
      .width('100%')
    }
    .width('100%')
    .height('100%')
    .padding({
      left: $r('app.float.page_padding_hor'),
      right: $r('app.float.page_padding_hor'),
      bottom: $r('app.float.login_page_padding_bottom')
    })
  }
}

@Extend(Line) function lineStyle() {
  .width('100%')
  .height($r('app.float.line_height'))
  .backgroundColor($r('app.color.line_color'))
}

@Extend(Text) function blueTextStyle() {
  .fontSize(16)
  .fontColor($r('app.color.login_blue_text_color'))

}

因为本人有vue开发经验 所以跟着官网敲代码学起来还是蛮快的。基本上代码使用的组件也很简单都是一个垂直布局 然后包裹 文本组件、图片组件、输入框组件、按钮组件 和水平布局组件构成。

首页

核心代码

scss 复制代码 
@Entry
@Component
struct HomePage {
@State
currentIndex: number = 0
private tabsController: TabsController = new TabsController();

@Builder
tabBuilder(title: string, index: number, selectImg: Resource, normalImg: Resource) {
  Column() {
    Image(this.currentIndex === index ? selectImg : normalImg).size({ width: 25, height: 25 })
    Text(title).fontColor(this.currentIndex === index ? '#1698CE' : '#6B6B6B')
  }
  .width('100%')
  .height(50)
  .justifyContent(FlexAlign.Center)
  .onClick(() => {
    this.currentIndex = index
    this.tabsController.changeIndex(index)
  })
}

build() {
  Column() {
    /**
     *自定义组件
     */
    Tabs({
      barPosition: BarPosition.End,
      controller:this.tabsController
    }) {
      TabContent() {
        homeUI()
      }.tabBar(this.tabBuilder('首页', 0, $r('app.media.home_selected'), $r('app.media.home_normal')))

      TabContent() {
        Column().width('100%').height('100%').backgroundColor('#007DFF')
      }.tabBar(this.tabBuilder('我的', 1, $r('app.media.mine_selected'), $r('app.media.mine_normal')))
    }
    .width('100%')
    .height('100%')
    .barWidth('100%')
    .barHeight(50)
    .onChange((index) => {
      this.currentIndex = index
    })

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


@Builder
function homeUI(){

Column().width('100%').height('100%').backgroundColor('#00CB87')
}
/**
* 简单的tab组件使用
*/
// function tabTest(){
//   Column() {
//     Tabs({
//       barPosition: BarPosition.Start,
//     }) {
//       TabContent() {
//         Column().backgroundColor(Color.Green).width('100%').height('100%')
//       }
//       .tabBar('green')
//
//       TabContent() {
//         Column().backgroundColor(Color.Blue).width('100%').height('100%')
//       }
//       .tabBar('blue')
//
//       TabContent() {
//         Column().backgroundColor(Color.Blue).width('100%').height('100%')
//       }
//       .tabBar('blue')
//
//
//       TabContent() {
//         Column().backgroundColor(Color.Blue).width('100%').height('100%')
//       }
//       .tabBar('blue')
//
//
//       TabContent() {
//         Column().backgroundColor(Color.Blue).width('100%').height('100%')
//       }
//       .tabBar('blue')
//
//     }.width('100%')
//     .height('100%')
//     .barHeight(60)
//     .barMode(BarMode.Scrollable)
//     .backgroundColor(0x999999) // 设置Tabs组件背景颜色
//
//   }
//   .width('100%')
//   .height('100%')
// }

官网代码实例

Codelabs: 分享知识与见解，一起探索HarmonyOS的独特魅力。 - Gitee.com

踩坑的地方

1、页面跳转看官网视频 通过路由一直跳转不到首页 原来是自己复制的ets文件 page页面需要在main_pages.json配置

个人总结

个人学了2节课程 对华为鸿蒙app开发的优缺点总结

优点

1、构建ui页面快(有前端开发经验)

2、ui页面适配方便 可以按照宽度百分比布局 不像安卓那么麻烦了

缺点

1、编译器和模拟器吃内存和cpu 我的mac电脑开发的时候风扇呼呼的响个不停

2、官网的提供基础组件功能和样式比较单一 这个能理解刚起步嘛

3、官网目前提供的都是ui方便的实例 想原生 相机 导航 定位 地图等功能没有提供学习和实例代码(现在大家的app核心页面基本都会涉及原生功能吧)

鸿蒙app开发官网留言有些太刻意刷好评了，明眼人一看就看得出来。最后希望华为鸿蒙系统越做越好，让开发者主动融入学习开发。真的实现遥遥领先。

相关推荐
MiyueFE1 分钟前
14 个逻辑驱动的 UI 设计技巧，助您改善任何界面
前端·设计
啃火龙果的兔子5 分钟前
前端单元测试覆盖率工具有哪些，分别有什么优缺点
前端·单元测试
Digitally26 分钟前
如何将文件从 iPhone 传输到 Android（新指南）
android·ios·iphone
「、皓子~33 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了35 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_37 分钟前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
老A技术联盟1 小时前
从小白入门，基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游1 小时前
构建引擎: 打造小程序编译器
前端·小程序·架构
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock（主题时钟）
前端·javascript·css·vue.js·前端框架·tailwindcss
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02如何将markdown生成pdf03Coze扣子平台完整体验和实践（附国内和国际版对比）04Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07GPU 进阶笔记（二）：华为昇腾 910B GPU08鸽了六年的某大厂面试题：你会手写一个模板引擎吗？09DeepSeek各版本说明与优缺点分析10扣子空间的使用教程与大模型技术思考