#星光不负码向未来# 我的鸿蒙成长路原创

funny_匚

发布于 2025-10-23 21:08

浏览

0收藏

从零启程：拆解鸿蒙知识点的攻坚之路

非科班的学习之路，注定充满挑战。但因为有前端的开发经验,让我对学习鸿蒙的道路增加了几分信心,但是要想学好一门技术,还是要打好基础,才能走的长远

基础阶段：首先从鸿蒙开发必备的 ArkTS 语言学习。它是 TS 和 JS 的加强版,增加了数据类型的限制, 面对陌生的语法规则，我跟着官网的ArkTs 语法的学习反复调试,观察对比代码不同点带来不同效果,理解其中的含义，慢慢掌握变量、函数、类等基础概念

鸿蒙进阶：根据之前的学习经验,我先学习ArkUI组件的使用同时结合官网 codelabs 中提供的案例,进行学习,研读每一行代码,尝试理解其含义,之后我开始搭建一个小demo ,找到一个页面尝试自己完成它,慢慢的上手了鸿蒙基本的语法和使用,这也增强了我的学习信心,进而我转战官网尝试理解学习鸿蒙的分布式架构,理解一多开发的概念和在实际应用中的表现,尝试服务卡片的开发,明白UIAbility 的多种启动模式,把晦涩的技术拆分呈通俗的逻辑,完成一个小案例后的成就感 ,让我相更加有信心.

官方学习 同时华为官方也提供了很多学习的机会,有机会参加到了 **鸿蒙赋能交流会-实操工坊(广州站) ** ,线下的分为真的特别的好,专门请了导师为开发者讲解活动规则,现场指导学习鸿蒙应用的相关开发知识,并且现场答题,非常感谢现场导师的帮助.大家有需要学习的可以自行关注一下

现场需要完成的小案例

//通过栅格布局实现一个页面大小的页面响应式变化   
 Column() {
      // TODO: 使用栅格布局实现顶部页签和搜索框区域自适应不同断点的效果
      GridRow({
        columns: {
          // 栅格数4、12、12列
          sm: 4,
          md: 12,
          lg: 12
        }
      }) {
        GridCol({
          span: {
            // 顶部页签占用4、7、7列
            sm: 4,
            md: 7,
            lg: 7
          }
        }) {
          this.TopTabBar()
        }
        .padding({ top: deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') })
        .height(deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more'))

        GridCol({
          span: {
            // 搜索框占用4、5、5列
            sm: 4,
            md: 5,
            lg: 5
          }
        }) {
          this.searchBar()
        }
        .padding({ top: this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === '2in1' ? 0 : $r('app.float.search_top_padding_top') })
        .height(this.currentWidthBreakpoint === 'sm' || deviceInfo.deviceType === '2in1' ? $r('app.float.search_top_height') : $r('app.float.search_top_height_more'))
      }
      // The background color of the top tab bar is changed during the slide-down process.
      .backgroundColor(this.scrollHeight >= new BreakpointType(HomeConstants.BACKGROUND_CHANGE_HEIGHT[0],
        HomeConstants.BACKGROUND_CHANGE_HEIGHT[1], HomeConstants.BACKGROUND_CHANGE_HEIGHT[2])
        .getValue(this.currentWidthBreakpoint) && this.currentTopIndex === 2 ? $r('app.color.home_content_background') :
        Color.Transparent)
    }
    .width('100%')

#星光不负码向未来# 我的鸿蒙成长路-鸿蒙开发者社区