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

在本篇博文中，我们将探讨如何使用 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事件里完成数据请求，拿到详情数据。