鸿蒙NEXT项目实战-百得知识库02

代码仓地址，大家记得点个star

IbestKnowTeach: 百得知识库基于鸿蒙NEXT稳定版实现的一款企业级开发项目案例。 本案例涉及到多个鸿蒙相关技术知识点： 1、布局 2、配置文件 3、组件的封装和使用 4、路由的使用 5、请求响应拦截器的封装 6、位置服务 7、三方库的使用和封装 8、头像上传 9、应用软件更新等https://gitee.com/xt1314520/IbestKnowTeach

整体页面布局

设计图

需求分析

整体布局是首页、学习、消息、我的四个大页面组成，然后这些页面属于选项卡里面的页签对应的内容，所以我们整体页面布局是选项卡支撑的

搭建整体页面布局

在ets下面新建一个views目录，在views目录下面分别创建Home、Learn、Message、

Mine目录

1、新建Home页面

在Home目录下面创建Home.ets文件

@Entry
@Component
export struct Home {

  build() {
    Column() {
      Text('首页')
    }
    .height('100%')
    .width('100%')
  }
}

2、新建学习页面

在Learn目录下面创建Learn.ets文件

@Entry
  @Component
  export struct Learn {

    build() {
      Column() {
        Text('学习')
      }
      .height('100%')
        .width('100%')
    }
  }

3、新建消息页面

在Message目录下面创建Message.ets文件

@Entry
@Component
export struct Message {
  build() {
    Column() {
      Text('消息')
    }
    .height('100%')
    .width('100%')
  }
}

4、新建我的页面

在Mine目录下面创建Mine.ets文件

@Entry
  @Component
  export struct Mine {
    build() {
      Column() {
        Text('我的')
      }
      .height('100%')
        .width('100%')
    }
  }

5、修改Index.ets文件默认代码

import { CommonConstant } from '../contants/CommonConstant'
import { Home } from '../views/Home/Home'
import { Learn } from '../views/Learn/Learn'
import { Message } from '../views/Message/Message'
import { Mine } from '../views/Mine/Mine'
import { router } from '@kit.ArkUI'

@Entry
@Component
struct Index {
  // 当前tab索引,默认索引0是首页
  @State currentIndex: number = 0
  private tabsController: TabsController = new TabsController()

  @Builder
  tabBuilder(title: ResourceStr, targetIndex: number, normalImg: Resource, selectedImg: Resource) {
    Column() {
      Image(this.currentIndex === targetIndex ? selectedImg : normalImg)
        .width($r('app.float.common_width_tiny'))
        .aspectRatio(1)
      Text(title)
        .fontSize($r('app.float.common_font_size_small'))
        .fontWeight(FontWeight.Medium)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width(CommonConstant.WIDTH_FULL)
    .height($r('app.float.common_height_small'))
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.tabsController }) {
        TabContent() {
          if (this.currentIndex === 0) {
            // 首页
            Home()
          }
        }
        .tabBar(this.tabBuilder($r('app.string.index_tab_title'), 0, $r('app.media.icon_bottom_home_default'),
          $r('app.media.icon_bottom_home_selected')))

        TabContent() {
          if (this.currentIndex === 1) {
            // 学习
            Learn()
          }
        }
        .tabBar(this.tabBuilder($r('app.string.learn_tab_title'), 1, $r('app.media.icon_bottom_learn_default'),
          $r('app.media.icon_bottom_learn_selected')))

        TabContent() {
          if (this.currentIndex === 2) {
            // 消息
            Message()
          }
        }
        .tabBar(this.tabBuilder($r('app.string.message_tab_title'), 2, $r('app.media.icon_bottom_message_default'),
          $r('app.media.icon_bottom_message_selected')))

        TabContent() {
          if (this.currentIndex === 3) {
            // 我的
            Mine()
          }
        }
        .tabBar(this.tabBuilder($r('app.string.mine_tab_title'), 3, $r('app.media.icon_bottom_my_default'),
          $r('app.media.icon_bottom_my_selected')))
      }.onChange((currentIndex: number) => {
        this.currentIndex = currentIndex
      }).scrollable(false)
    }
    .height(CommonConstant.HEIGHT_FULL)
    .width(CommonConstant.WIDTH_FULL)
    .backgroundColor($r('app.color.background_color_gray'))
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
  }
}

应用开屏页面开发

设计图

需求分析

开屏页很简单，一张背景图片外加一个时间倒计时，倒计时从3s开始到0s就会跳转到首页

搭建整体页面布局

import { CommonConstant } from '../contants/CommonConstant';
import { router } from '@kit.ArkUI';
import { RouterConstant } from '../contants/RouterConstant';
import { PreferencesUtil } from '../utils/PreferencesUtil';

@Entry
  @Component
  struct Advertising {
    // 展示开屏页面时间,单位秒
    @State countDownSeconds: number = CommonConstant.ADVERTISING_TIME;
    // 结束时间,单位秒
    endTime: number = CommonConstant.ADVERTISING_END_TIME;

    /**
   * 生命周期函数
   */
    onPageShow() {
      this.endTime = setInterval(async () => {
        if (this.countDownSeconds === CommonConstant.ADVERTISING_END_TIME) {
          // 清除定时器
          clearInterval(this.endTime);
          // 获取对应的token等数据
          const token = PreferencesUtil.getData(CommonConstant.PREFERENCES_NAME, CommonConstant.TOKEN_NAME, '')
          const userInfo = PreferencesUtil.getData(CommonConstant.PREFERENCES_NAME, CommonConstant.USER_INFO, '')
          if (token && userInfo) {
            AppStorage.setOrCreate(CommonConstant.TOKEN_NAME, token)
            AppStorage.setOrCreate(CommonConstant.USER_INFO, JSON.parse(userInfo))
          }
          // 跳转到首页
          router.replaceUrl({ url: RouterConstant.PAGE_INDEX })
        } else {
          this.countDownSeconds--;
        }
      }, 1000);
    }

    /**
   * 生命周期函数：隐藏页面
   */
    onPageHide() {
      // 清除定时任务
      clearInterval(this.endTime);
    }

    build() {
      Column() {
        Row() {
          Text(this.countDownSeconds.toString() + 's')
            .fontColor($r('app.color.common_white'))
            .fontSize($r('app.float.common_font_size_medium'))
            .width(40)
            .height($r('app.float.common_height_tiny'))
            .backgroundColor($r('app.color.common_gray'))
            .textAlign(TextAlign.Center)
            .borderRadius(10)
        }.padding($r('app.float.common_padding'))
          .width(CommonConstant.WIDTH_FULL)
          .justifyContent(FlexAlign.End)
      }
      .height(CommonConstant.HEIGHT_FULL)
        .width(CommonConstant.WIDTH_FULL)
        .backgroundImage($r('app.media.advertising'))
        .backgroundImageSize({ width: CommonConstant.WIDTH_FULL, height: CommonConstant.HEIGHT_FULL })
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    }
  }