鸿蒙5.0实战开发【学习app制作】

鸿蒙系统小能手Mr.Li

于 2024-08-02 18:01:21 发布

阅读量532

点赞数 12

分类专栏：鸿蒙开发文章标签： harmonyos OpenHarmony 鸿蒙鸿蒙系统 arkui 分层架构模块化

本文链接：https://blog.csdn.net/2401_82772199/article/details/140875471

版权

鸿蒙开发专栏收录该内容

158 篇文章 1 订阅

订阅专栏

简介

通过学习HarmonyOS，实战项目WanAndroid 鸿蒙版，API接口均来自WanAndroid 开源接口，我们一起来做个App吧。

App采用分层架构、模块化设计、MVVM模式等，布局实现均是原生ArkUI,。
功能实现：开屏页、骨架屏、上拉加载、下拉刷新、状态管理、懒加载、Navigation跨模块页面跳转、瀑布流、Lottie动画、显示动画、属性动画、文字高亮处理等。
界面设计来自个人对App UI理解，合理布局，动画处理，尽量使美感提升，占用时间也是蛮多的。

界面预览

选取主页面和部分页面进行展示

静态预览

动态预览

实现思路&过程

架构

主体架构采用分层架构，产品层+特性层+公共层，分层设计。
分模块设计，例如首页模块、学习模块、广场模块、我的等主题模块
小结：特性层提供了核心业务模块，公共能力层则提供了一套基础的开发组件和服务，包括公共UI组件、数据存储、网络和工具库。
模块化不仅是一个设计原则，更是一种开发实践。它旨在将应用程序拆分为多个功能模块，每个功能模块负责特定的功能或特性。功能模块可以独立开发、编译和部署，也可以在不同的设备上灵活组合和调用。

页面

页面拢共分为：开屏页+ 主体四大板块（首页、学习、广场、我的）+具体页面（搜索页、搜索结果、注册、登录、跳转Web页等）
主要讲讲主体界面开发过程：

主体是 Navigation + Tabs + TabContent + 自定义TabBar, TabContent则承载4个页面实现

ArkTs
 代码解读
复制代码
Tabs({ index: this.currentIndex,controller:this.mTabController }) {
  TabContent() {
    HomeView()
  }
  TabContent() {
    LearningView()
  }
  TabContent() {
    SquareView()
  }
  TabContent() {
    MineView()
  }
}.layoutWeight(1)
.barHeight(0)
.scrollable(false)
.onChange((index) => {
  this.currentIndex = index;
})
CustomTabBar({ currentIndex: $currentIndex })

首页实现骨架屏，加载失败页，主体页面上拉加载，下拉刷新固定头部View + List
主要通过条件控制渲染，根据状态渲染现骨架屏，加载失败页。LazyForEach 懒加载文章Item 。
学习页面开发，嵌套3个TabContent 《体系》、《导航》、《问答》板块，实现左右滑动，上拉加载，下拉刷新，首次展示骨架屏，每个页面为了保持不同的展示风格，采用不同的Item展示，《体系》采用大类目Item ，《导航》采用吸顶Item展示类目，《问答》采用瀑布流Item，高度是随内用撑开的。总体界面简约为主。
广场页面开发，骨架屏+背景图+展示公众号tag+ List列表懒加载数据，这里加入搜索图标变化动画，采用属性动画，根据位置变化，触发动画。背景图下拉变大效果，则采用手势下拉Y轴变化，对背景图的高度变化处理。

ArkTs
 代码解读
复制代码
  .onDidScroll((yOffset: number) => {
    //当列表滚动时，限制列表的下拉操作
    if (yOffset > 0) {
      this.canPullDown = false;
    }
  })
  .parallelGesture(PanGesture({ direction: PanDirection.Down })
    .onActionUpdate((event?: GestureEvent) => {
      this.handleGestureEvent(event)
    })
    .onActionEnd(() => {
      animateTo({ duration: 300, curve: Curve.LinearOutSlowIn }, () => {
        this.offsetY = 0;
      })
    })
  )
}

5.我的页面开发，整体采用Scroll+Colum 进行布局，加入第三方动画实现lottie,提升App整体美感。具体有Lottie 使用如下：

ArkTs
 代码解读
复制代码
Canvas(this.mainCanvasRenderingContext)
  .height(CommonConstants.FULL_PERCENT)
  .width(CommonConstants.FULL_PERCENT)
  .onReady(() => {
    // this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
    // this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium'
    LottieUtil.loadAnimation({
      container: this.mainCanvasRenderingContext,
      renderer: 'canvas',
      loop: true,
      autoplay: true,
      name: "Mine",
      path: this.path
    })
   
  })
  .onVisibleAreaChange([1, 0], (isVisible: boolean, currentRatio: number) => {
    if (isVisible) {
      LottieUtil.play("Mine")
    } else {
      LottieUtil.stop("Mine")
    }
  })

步骤是：加载，播放，这边对播放进行控制，在不可见的时候进行停止播放，进行了边界判断。

总结

通过此次实战，实现WanAndroid 大部分功能。第三方库使用：axios网络请求，Lottie动画库。其他均为原生，可见用原生可以快速构建App,不像Android，想实现一些功能需要大量的自定义和第三方库，总体工程量还是蛮大的，UI设计和代码编对然对比Android有所减少，但是有些必要的工作还是蛮多的。

在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
点赞，转发，有你们的『点赞和评论』，才是我创造的动力。
关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
上面更多鸿蒙最新技术知识点，请前往作者博客：https://gitee.com/li-shizhen-skin/zhihu/blob/master/README.md