HarmonyOS NEXT 应用开发实战（九、知乎日报项目详情页实现详细介绍）

news2024/11/12 13:51:41

在本篇博文中，我们将探讨如何使用 HarmonyOS Next 框架开发一个知乎日报的详情页，逐步介绍所用到的组件及代码实现。知乎日报是个小巧完整的小项目，这是一个循序渐进的过程，适合初学者和有一定开发经验的工程师参考。

1. 项目背景

知乎日报是一个非常热门的新闻聚合应用，通过API接口获取最新的新闻内容。在我们的实现中，我们将从知乎接口获取详情数据，并在应用中展示相应的内容。

1.1 知乎接口介绍

知乎日报提供了api接口，方便个人开发者联手使用。接口介绍：

### 获取最新日报
get https://news-at.zhihu.com/api/4/news/latest

###历史日报
get https://news-at.zhihu.com/api/4/news/before/20240617

### 热门日报
get http://news-at.zhihu.com/api/4/news/hot

### 主题日报
get http://news-at.zhihu.com/api/4/news/theme/2024
### 2016年
get http://news-at.zhihu.com/api/4/news/before/20240721

### 日报详情
get http://news-at.zhihu.com/api/4/news/9773253

1.2日报详情页特殊处理

需要特别注意的是，知乎日报的详情页需要特殊处理，因为，因为后台返回的竟然是html.是的，你没听错，这有点儿。。。，但也不麻烦。我自己造了个后台接口特殊处理过了，处理为了这个样子：

2. 主要组件介绍

2.1 `DetailPageBuilder`

这是构建整个详情页的入口，是NavDestination组件包括着的一个子页面，它使用了HarmonyOS提供的Navigation组件路由，通过主页的点击进入详情页。

//zhihu.ets (主页)
build() {
    Navigation(this.pageStack){
        Column({ space: 0 }) {

          // 内容项
          Swiper(this.swiperController) {
            LazyForEach(this.swiperData, (item: ZhiNewsItem) => {
              Stack({ alignContent: Alignment.Center }) {
                Image(item.image)
                  .width('100%')
                  .height(200)
                  .backgroundColor(0xAFEEEE)
                  .zIndex(1)
                  .onClick(() => {
                    //this.pageStack.pushPathByName("PageOne", item)
                    //点击跳转到详情页
                    this.pageStack.pushDestinationByName("ZhiPageDetail", { id:item.id }).catch((e:Error)=>{
                      // 跳转失败，会返回错误码及错误信息
                      console.log(`catch exception: ${JSON.stringify(e)}`)
                    }).then(()=>{
                      // 跳转成功
                    });
                  })

                // 显示轮播图标题

2.2 `DetailPage`

该结构体是页面的核心包含所有的状态管理和生命周期回调。我们在其中定义了一些主要的状态变量，例如消息、页面数据和页面ID等。

2.3 生命周期回调

aboutToAppear: 组件即将出现时的处理逻辑，可以在这里做初始化操作。
aboutToDisappear: 组件即将消失时的处理逻辑，通常用于清理操作。

3. 代码实现

以下是主要代码部分：

import { getZhiHuDetail } from '../../../common/api/zhihu';
import { BaseResponse, ErrorResp, ZhiDetailRespData, ZhiDetailItem } from '../../../common/bean/ApiTypes';
import { Log } from '../../../utils/logutil';
import { LengthMetrics } from '@kit.ArkUI';

@Builder
export function DetailPageBuilder() {
  DetailPage();
}

@Component
struct DetailPage {
  @State message: string = 'Hello World';
  pageStack: NavPathStack = new NavPathStack();
  private pathInfo: NavPathInfo | null = null;
  @State detailData: ZhiDetailRespData | null = null;
  private pageId = '';

  // 组件生命周期
  aboutToAppear() {
    Log.info('Detail aboutToAppear');
  }

  // 组件生命周期
  aboutToDisappear() {
    Log.info('Detail aboutToDisappear');
  }

  build() {
    NavDestination() {
      Scroll() {
        Column({ space: 0 }) {
          Stack({ alignContent: Alignment.Bottom }) {
            Image(this.detailData?.image).width('100%').height(250).zIndex(1);
            
            // 显示轮播图标题
            Text(this.detailData?.title)
              .padding(5)
              .margin({ bottom: 10 })
              .width('100%')
              .height(50)
              .textAlign(TextAlign.Center)
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Clip })
              .fontSize(16)
              .fontColor(Color.White)
              .opacity(100)
              .backgroundColor('#808080AA')
              .zIndex(2);
          }.height(250); // 设置高度

          Text(`${this.detailData?.author ?? ""} ${this.detailData?.bio ?? ""}`)
            .fontSize(14)
            .fontColor("#999")
            .padding(10).width('100%');

          Column() {
            ForEach(this.detailData?.content, (item: ZhiDetailItem, idx) => {
              if (item.types === 'p') {
                Text(item.value).fontSize(16).padding(10).lineSpacing(LengthMetrics.px(30)).width('100%').alignSelf(ItemAlign.Start);
              } else if (item.types === 'p.strong') {
                Text(item.value).fontSize(16).fontWeight(FontWeight.Bold).padding(10).width('100%').alignSelf(ItemAlign.Start);
              } else if (item.types === 'img') {
                Image(item.value).padding(10);
              }
            });
          }
        }
      }
    }
    .title("日报详情")
    .width('100%')
    .height('100%')
    .onReady(ctx => {
      this.pageStack = ctx.pathStack;
      this.pathInfo = ctx.pathInfo;

      interface params {
        id: string;
      }
      let par = ctx.pathInfo.param as params;
      Log.debug("par:%s", par.id);
      this.pageId = par.id;
      Log.info('current page config info is ' + JSON.stringify(ctx.getConfigInRouteMap()));
    })
    .onShown(() => {
      console.info('Detail onShown');
      getZhiHuDetail(this.pageId).then((res) => {
        Log.debug(res.data.message);
        Log.debug("request", "res.data.code:%{public}d", res.data.code);
        this.detailData = res.data;
      }).catch((err: BaseResponse<ErrorResp>) => {
        Log.debug("request", "err.data.code:%d", err.data.code);
        Log.debug("request", err.data.message);
      });
    });
  }
}

4. 代码解析

数据获取：使用getZhiHuDetail(this.pageId)获取当前页面的内容，并将数据存储在detailData状态中。
组件渲染：通过NavDestination和Scroll组件容纳整个页面，确保内容在可滚动视图内。
动态数据展示：使用${this.detailData?.author ?? ""} ${this.detailData?.bio ?? ""}实现了数据的安全合并，确保了在获取到的数据不存在时不发生错误。
生命周期：在NavDestination的onReady事件里拿到上个页面传递的参数值，在onShown事件里完成数据请求，拿到详情数据。