前言

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

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

前言