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状态中。
  • 组件渲染:通过NavDestinationScroll组件容纳整个页面,确保内容在可滚动视图内。
  • 动态数据展示:使用${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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/884454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++线程异步

std::future std::future作为异步结果的传输通道&#xff0c;可以很方便地获取线程函数的返回值。 std::future_status Ready (std::future_status::ready): 当与 std::future 对象关联的异步操作已经完成时&#xff0c;std::future 处于 ready 状态。在这个状态下&#xff0c;…

阿里云k8s-master部署CNI网络插件遇到的问题

问题 按照网络上的部署方法 cd /opt/k8s # 下载 calico-kube-controllers配置文件&#xff0c;可能会网络超时 curl https://docs.projectcalico.org/manifests/calico.yaml -O kubectl apply -f calico.yaml 试了很多次都不行&#xff0c;k8s-master都是Not ready的状态 ca…

从壹开始解读Yolov11【源码研读系列】——Data.Base.py.BaseDataset:可灵活改写的数据集加载处理基类

目录 一、base.BaseDataset 1.__init__类初始化 2.get_img_files根据地址获得图片详细地址 3.get_labels&#xff08;自定义&#xff09;获取标签数据 4. update_labels指定类别和单分类设定 5.set_rectangle开启批量矩阵训练 6.cache_images加载图片进程可视化 7.load_image内…

从0学习React(10)

示例代码&#xff1a; const columns: ProColumns<API.BasicInfoItem>[] [{title: 设备编码,dataIndex: deviceCode,ellipsis: true,width: 40,},{title: 设备名称,dataIndex: deviceName,ellipsis: true,width: 50,},{title: 产线-工序,dataIndex: deviceClassifyName…

js操作数组的方法 / js操作字符串的方法

操纵数组的方法 常见的有10种 push() -在数组末尾添加一个或多个元素&#xff0c;并返回新的长度。 pop() -删除数组的最后一个元素&#xff0c;并返回那个元素。 shift() -删除数组的第一个元素&#xff0c;并返回那个元素。 unshift() -在数组的开始添加一个或多个元素&…

计算机毕业设计Hadoop+大模型地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Spark 机器学习 深度学习 Flink 大数据

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Redis到底支不支持事务?半事务

redis是支持事务的&#xff0c;它与传统的关系数据库中的事务有所不同。 1.原子性&#xff1a; redis事务保证的是队列中的命令作为一个整体要么全部执行&#xff0c;要么全部不执行。但是&#xff0c;如果事务中的某个命令因为执行错误而失败&#xff0c;redis会继续执行事务…

数据结构和算法(六):贪心算法、分治算法、回溯算法、动态规划、拓扑排序

从广义上来讲&#xff1a;数据结构就是一组数据的存储结构 &#xff0c; 算法就是操作数据的方法 数据结构是为算法服务的&#xff0c;算法是要作用在特定的数据结构上的。 10个最常用的数据结构&#xff1a;数组、链表、栈、队列、散列表、二叉树、堆、跳表、图、Trie树 10个最…

浅谈二进制位移

一、基本形式 二进制位移操作是计算机编程中常用的一种位操作&#xff0c;它可以用来实现乘除操作、数据压缩和扩展等。位移操作包括左移和右移两种基本形式&#xff1a; 1、左移&#xff08;Left Shift&#xff09;&#xff1a; 符号&#xff1a;<<功能&#xff1a;将…

顺序表和链表(一)

目录 线性表 一、顺序表 <1>顺序表 &#xff08;1&#xff09;静态顺序表 &#xff08;2&#xff09;动态顺序表-按需申请 <2>链表 &#xff08;1&#xff09;单链表 &#xff08;2&#xff09;双链表 主程序&#xff08;test.c&#xff09; 头文件&#…

pgsql数据量大之后可能遇到的问题

当 PostgreSQL 数据量增大时&#xff0c;可能会遇到以下问题&#xff1a; 查询性能下降&#xff1a;随着数据量的增加&#xff0c;查询可能会变得缓慢&#xff0c;尤其是在没有适当索引的情况下。大量的数据意味着更多的行需要被扫描和过滤&#xff0c;这会显著增加查询执行时间…

样本不均衡与异常点检测处理|SMOTE|LOF|IForest

在机器学习中&#xff0c;数据样本不均衡和异常值检测是数据科学家和机器学习工程师经常面临的挑战。这些问题如果不加以处理&#xff0c;会严重影响模型的性能和准确性。本文将概述这些问题&#xff0c;并提出相应的解决方案。 样本不均衡概述 在分类任务中&#xff0c;样本…

aws boto3 下载文件

起因&#xff1a;有下载 aws s3 需求&#xff0c;但只有web 登录账号&#xff0c;有 id 用户名 密码&#xff0c;没有 boto3 的 key ID 经过分析&#xff0c;发现网页版有个地址会返回临时 keyID&#xff0c;playwright 模拟登录&#xff0c;用 page.on 监测返回数据&#xff…

# Ubuntu 达人九步养成记(1)

Ubuntu 达人九步养成记&#xff08;1&#xff09; 目录&#xff1a; 一、ubuntu基本安装 二、设置语言环境 三、设置服务器镜像源 四、在启动栏添加终端图标 五、使用apt更新和升级系统软件 六、使用apt安装软件 七、使用apt删除软件以及apt-get 八、deb格式及谷歌浏览…

QT——TCP网络调试助手

目录 一.项目展示 ​编辑 二.开发流程 三.QTcpServer、QTcpSocket、QUdpSocket类的学习 1.QTcpServer服务端 2.QTcpSocket客户端 3.Udp通信 四.网络调试助手 1.首先我们实现当用户选择不同协议类型时不同的UI组件如何切换 2.实现打开/关闭按键图片的切换 方式一&…

InsuranceclaimsController

目录 1、 InsuranceclaimsController 1.1、 SelectInsurances 1.1.1、 //单据状态名称 1.1.2、 //报案编号 1.1.3、 //保单金额 InsuranceclaimsController using QXQPS.Models; using QXQPS.Vo; using System; using System.Collections; using System.Collec…

导航栏渐变色iOS

- (void)viewDidLoad {[super viewDidLoad];// 设置导航栏属性self.navigationBar.translucent NO;[self.navigationBar setTitleTextAttributes:{NSForegroundColorAttributeName : [UIColor whiteColor], NSFontAttributeName:[UIFont boldSystemFontOfSize:28]}];// 修复iO…

layui tree customSelet选中的内容重写,查找父级

layui tree customSelet选中的内容重写&#xff0c;查找父级 需要重新源码 // 递归查找函数 // tree 所有数据 &#xff0c;nodeId选中数据id值 function findParent(tree, nodeId, parent null) {for (let i 0; i < tree.length; i) {if (tree[i].id nodeId) {return …

《Web性能权威指南》-浏览器API与协议-读书笔记

本文是《Web性能权威指南》第四部分——浏览器API与协议的读书笔记。 第一部分——网络技术概览&#xff0c;请参考网络技术概览&#xff1b; 第二部分——无线网络性能&#xff0c;请参考无线网络性能&#xff1b; 第三部分——HTTP&#xff0c;请参考HTTP。 浏览器网络概述 …

使用TypeORM进行数据库操作

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用TypeORM进行数据库操作 引言 TypeORM 简介 安装 TypeORM 配置 TypeORM 定义实体 连接数据库 运行项目 高级功能 事务管理 关…