开启鸿蒙HarmonyOS之旅（四：实战篇，做第一个小练习吧~）

前言

在此之前，我们简单把基础过了一遍，我觉得光讲基础是枯燥且不高效的

于是这节我们来做一个简单的项目，串联之前学过的内容，并且学习一些新的知识

在我个人看来，做项目的特点就一个：抽离，或者你就记住一个字，抽！

那么抽什么呢？

抽组件，抽数据，抽逻辑，抽所有公共的、多次会用到的东西

你抽的好，那么你的项目就更清晰，后期迭代更高效

记住，我们本文也会围绕抽来把我们的项目做完，抽完

OK，我们开始吧~

项目结构

在开始之前，我们梳理一下项目结构，这是在基础篇欠给大家的，因为我觉得在实战讲效果会更好

我们新建一个项目，我就叫它project了

我们目前只需要关注ets里的内容即可

然后下面我们也只关注resources下base下的media即可，这里存放我们的静态资源（也就是图片），因为我们这个项目会用到

现在在ets下有两个文件夹 entryability和pages

entryability下有个EntryAbility.ts，这个是我们的程序入口类，注意，这个是应用层面的，不是组件层面的，也就是点进我们这个应用会触发的

我们大致看一下里面的内容

大致看一下就行了哈，其中我们看到了里面有很多函数，没错，这是我们应用的生命周期，不是组件的

里面有很多的hilog.xxx，这个是应用系统的日志，我们不进行关注

但是其中windowStage.loadContent指定了我们入口页面，就是刚进来是哪个页面

在这个入口类当中我们还可以设置一些全局的状态（也可以说是数据），这个状态可以为所有的组件可用，就类似于application

其它的我们目前先不关注

然后我在ets下新建一个views来存放我的功能组件,新建一个model来存放接口

开始开发

我们看一下我们想要做的效果吧，这里不打算实现所有效果，因为实现所有效果东西不少，需要放的代码也太多了，不打算放在基础篇，这里我们就简单实现一下大致的效果

就这个页面来看有什么

首先最下面有一个导航栏，分为主页和记录
页面主题部分有很多个小卡片，对应不同的内容，我们第一反应就是这是个公共的组件，我们要给它抽离出来
最上面还有一个导航栏，用来切换不同的分类

那么我们开始吧

导航栏

目前有两个导航栏：一个是顶部的，一个是底部的在官方中，已经给了我们Tabs的组件，我们可以直接用，也给了对应的TabContent

我们先看Tabs的

首先这两个属性是告诉我们的Tab你是顶部导航栏，还是底部导航栏

同时它还有一些别的参数

主要是vertical，它可以控制我们的导航栏是横向的还是纵向的（是否是侧面导航栏）

我们看到SubTabBarStyle就是我们的顶部菜单，而BottomTabBarStyle则是底部菜单

同时我们还看到了，顶部菜单只可以有文字，而底部的则是可以有文字和图标，这正是我们想要的

我们先来写底部菜单，因为我们要知道，我们底部菜单级别是更大的，它应该在顶部菜单之上

ts 复制代码

@Entry
@Component
struct Index {
  build() {
    Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Pink)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), '主页'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor(Color.Yellow)
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), '记录'))
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .width('100%')
        .backgroundColor(0xF1F3F5)
    }
    .width('100%')
    .height('100%')
  }
}

于是我们先得出这样一段代码，我们先来看一下效果