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事件里完成数据请求,拿到详情数据。
5. 结论
通过本篇博文,我们对如何使用 HarmonyOS Next 开发知乎日报详情页进行了深入的探讨。这不仅涵盖了从API获取数据到页面渲染的整个流程,还详细介绍了相关组件的使用方法。在实践中,开发者可以根据具体需求进一步扩展和优化页面功能。
希望这篇博文对你理解 HarmonyOS Next 项目开发有所帮助!如果你有任何问题,欢迎在下方留言讨论。
项目开源地址
zhihudaily: HarmonyOS NEXT 项目开发实战,仿知乎日报的实现
写在最后
最后,推荐下笔者的业余开源app影视项目“爱影家”,推荐分享给与我一样喜欢免费观影的朋友。【注】:该项目仅限于学习研究使用!请勿用于其他用途!
开源地址:爱影家app开源项目介绍及源码
https://gitee.com/yyz116/imovie

相关文章:
HarmonyOS NEXT 应用开发实战(九、知乎日报项目详情页实现详细介绍)
在本篇博文中,我们将探讨如何使用 HarmonyOS Next 框架开发一个知乎日报的详情页,逐步介绍所用到的组件及代码实现。知乎日报是个小巧完整的小项目,这是一个循序渐进的过程,适合初学者和有一定开发经验的工程师参考。 1. 项目背景…...
lvgl 模拟器移植(V9)
1.模拟器代码下载 1.1:通过git 下载 github链接:GitHub - lvgl/lv_port_pc_visual_studio: Visual Studio projects for LVGL embedded graphics library. Recommended on Windows. Linux support with Wayland is work in progress.https://github.com…...
基于vue+neo4j 的中药方剂知识图谱可视化系统
前言 历时一周时间,中药大数据R02系统中药开发完毕,该系统通过scrapy工程获取中药数据,使用python pandas预处理数据生成知识图谱和其他相关数据,利用vuespringbootneo4jmysql 开发系统,具体功能请看本文介绍。 简要…...
(自用)机器学习python代码相关笔记
一些自存的机器学习函数和详细方法记录,欢迎指错。 前言:读取数据方法 import pandas as pd import pandas as pddf pd.read_csv(数据集.csv, header0) # header是从哪一行开始读起,一般是0,也可以取infer 一、数据处理&#…...
docker复现pytorch_cyclegan
1、安装docker 配置docker镜像 添加镜像源至docker engine 2、wsl2安装nvidia-docker 要在Ubuntu中安装NVIDIA Docker,需要满足以下条件: 确保主机已安装NVIDIA的CUDA驱动程序,并使用适用于您操作系统的正确版本。 wsl --update在Ubuntu…...
IDEA2024下安装kubernetes插件并配置进行使用
【1】安装插件 其实2024.2.3下默认已经安装了kubernetes插件,如果你发现自己IDEA中没有,在市场里面检索并下载即可。 【2】kubernetes配置 ① 前置工作 首先你要准备一个config文件和一个kubectl.exe 。 config文件类似如下: apiVersi…...
理解原子变量之二:从volatile到内存序-进一步的认识
目录 实例1 实例2 实例3 内存序中两个最重要的概念 补记 结论 实例1 看下面的例子:在vs2013中建立如下工程: #include <thread> #include <iostream> #include <chrono>bool done false;void worker(){std::this_thread::sle…...
DICOM标准:MR图像模块属性详解——磁共振成像(MR)在DICOM中的应用
目录 引言 磁共振成像(MR) 一、MR图像模块 二、MR图像属性描述 1、图像类型 (Image Type) 2、抽样每个象素 (Sampling per Pixel) 3、光度插值 (Photometric Interpretation) 4、位分配 (Bits Allocated) 结论 引言 数字成像和通信在医学(…...
Linux内核与用户空间
Linux内核与用户空间是Linux操作系统中的两个重要概念,它们各自承担着不同的功能和职责,并通过特定的机制进行交互。以下是对Linux内核与用户空间的详细解释: 一、Linux内核 定义:Linux内核是Linux操作系统的核心组件,…...
计算机网络-以太网小结
前导码与帧开始分界符有什么区别? 前导码--解决帧同步/时钟同步问题 帧开始分界符-解决帧对界问题 集线器 集线器通过双绞线连接终端, 学校机房的里面就有集线器 这种方式仍然属于共享式以太网, 传播方式依然是广播 网桥: 工作特点: 1.如果转发表中存在数据接收方的端口信息…...
找树根和孩子c++
题目描述 给定一棵树,输出树的根root,孩子最多的结点max以及他的孩子 输入 第一行:n(0<结点数<100),m(0<边数<200)。 以下m行;每行两个结点x和y…...
植物源UDP-糖基转移酶及其分子改造-文献精读75
植物源UDP-糖基转移酶及其分子改造 摘要 糖基化能够增加化合物的结构多样性,有效改善水溶性、药理活性和生物利用度,对植物天然产物的药物开发至关重要。UDP-糖基转移酶(UGTs)能够催化糖基从活化的核苷酸糖供体转移到受体形成糖苷键,植物中天然产物的糖基化修饰主要通过UGTs实…...
Redis中String 的底层实现是什么?
Redis中String 的底层实现是什么? Redis 是基于 C 语言编写的,但 Redis 的 String 类型的底层实现并不是 C 语言中的字符串(即以空字符 \0 结尾的字符数组),而是自己编写了 SDS(Simple Dynamic String&…...
像mysql一样查询es
先简单介绍一下这个sql查询,因为社区一直反馈这个Query DSL 实在是太难用了。大家可以感受一下下面这个es的查询。 GET /my_index/_search { “query”: { “bool”: { “must”: [ { “match”: { “title”: “search” } }, { “bool”: { “should”: [ { “te…...
SpringBoot中@Validated或@Valid注解校验的使用
文章目录 SpringBoot中Validated或Valid注解校验的使用1. 添加依赖2. 使用示例准备2-1 测试示例用到的类2-2 实体Dto,加入校验注解2-2 Controller 3. 示例测试4. Valid 和 Validated注解详解4-1 常用规则注解4-2 分组验证4-2-1 示例准备4-2-2 Controller接口4-2-3 P…...
HashMap为什么线程不安全?
一、Put操作(数据覆盖) HashMap底层是基于数组 链表(在 Java 8 以后,当链表长度超过一定阈值时会转换为红黑树)的数据结构。在多线程环境下,当多个线程同时对HashMap进行put操作时,可下面这种…...
类加载器及反射
目录 1.类加载器 1.1类加载【理解】 1.2类加载器【理解】 1.2.1类加载器的作用 1.2.2JVM的类加载机制 1.2.3Java中的内置类加载器 1.2.4ClassLoader 中的两个方法 2.反射 2.1反射的概述【理解】 2.2获取Class类对象的三种方式【应用】 2.2.1三种方式分类 2.2.2示例…...
aws boto3 下载文件
起因:有下载 aws s3 需求,但只有web 登录账号,有 id 用户名 密码,没有 boto3 的 key ID 经过分析,发现网页版有个地址会返回临时 keyID,playwright 模拟登录,用 page.on 监测返回数据ÿ…...
3DDFA-V3——基于人脸分割几何信息指导下的三维人脸重建
1. 研究背景 从二维图像中重建三维人脸是计算机视觉研究的一项关键任务。在虚拟现实、医疗美容、计算机生成图像等领域中,研究人员通常依赖三维可变形模型(3DMM)进行人脸重建,以定位面部特征和捕捉表情。然而,现有的方…...
求串长(不使用任何字符串库函数)
问题描述 编写一个程序,输入一个字符串,输出串的长度。 要求: (1)字符串长度不超过100个字符。 (2)不使用任何字符串库函数,建议使用堆串存储结构。 输入描述 输入一个字符串。 …...
Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)
目录 1.TCP的连接管理机制(1)三次握手①握手过程②对握手过程的理解 (2)四次挥手(3)握手和挥手的触发(4)状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得,如果用户端访问量比较大,数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据,减少数据库查询操作。 缓存逻辑分析: ①每个分类下的菜品保持一份缓存数据…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)
笔记整理:刘治强,浙江大学硕士生,研究方向为知识图谱表示学习,大语言模型 论文链接:http://arxiv.org/abs/2407.16127 发表会议:ISWC 2024 1. 动机 传统的知识图谱补全(KGC)模型通过…...
GitHub 趋势日报 (2025年06月08日)
📊 由 TrendForge 系统生成 | 🌐 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
AI病理诊断七剑下天山,医疗未来触手可及
一、病理诊断困局:刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断",医生需通过显微镜观察组织切片,在细胞迷宫中捕捉癌变信号。某省病理质控报告显示,基层医院误诊率达12%-15%,专家会诊…...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》
近日,嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》,海云安高敏捷信创白盒(SCAP)成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天,网络安全已成为企业生存与发展的核心基石,为了解…...
