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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据结构之链式结构二叉树的实现(初级版)

本文内容将主会多次用到函数递归知识&#xff01;&#xff01;&#xff01; 本节内容需要借助画图才能更好理解&#xff01;&#xff01;&#xff01; 和往常一样&#xff0c;还是创建三个文件 这是tree.h #pragma once #include<stdio.h> #include<stdlib.h> …

数据结构(Java)—— 认识泛型

1. 包装类 在学习泛型前我们需要先了解一下包装类 在 Java 中&#xff0c;由于基本类型不是继承自 Object &#xff0c;为了在泛型代码中可以支持基本类型&#xff0c; Java 给每个基本类型都对应了一个包装类型。 1.1 基本数据类型和对应的包装类 基本数据类型包装类byteByt…

LSTM模型改进实现多步预测未来30天销售额

项目源码获取方式见文章末尾&#xff01; 600多个深度学习项目资料&#xff0c;快来加入社群一起学习吧。 《------往期经典推荐------》 项目名称 1.【BiLSTM模型实现电力数据预测】 2.【卫星图像道路检测DeepLabV3Plus模型】 3.【GAN模型实现二次元头像生成】 4.【CNN模型实…

使用带有令牌认证的 Jupyter Notebook 服务器

当你不想在默认浏览器打开Jupyter Notebook,但是在其他浏览器打开http://localhost:8890/lab或者http://localhost:8889/tree&#xff0c;却显示 Token authentication is enabled&#xff0c;如下图 可以按以下步骤操作&#xff1a; 获取令牌&#xff1a;在启动 Jupyter Note…

软考(中级-软件设计师)数据库篇(1101)

第6章 数据库系统基础知识 一、基本概念 1、数据库 数据库&#xff08;Database &#xff0c;DB&#xff09;是指长期存储在计算机内的、有组织的、可共享的数据集合。数据库中的数据按一定的数据模型组织、描述和存储&#xff0c;具有较小的冗余度、较高的数据独立性和扩展…

【java】java的基本程序设计结构06-运算符

运算符 一、分类 算术运算符关系运算符位运算符逻辑运算符赋值运算符其他运算符 1.1 算术运算符 操作符描述例子加法 - 相加运算符两侧的值A B 等于 30-减法 - 左操作数减去右操作数A – B 等于 -10*乘法 - 相乘操作符两侧的值A * B等于200/除法 - 左操作数除以右操作数B /…

躺平成长-代码开发(07)-利用kimi帮助自己写代码

开源竞争&#xff1a; 开源竞争&#xff08;当你无法彻底掌握技术的时候&#xff0c;就去开源这个技术&#xff0c;让更多人了解这个技术&#xff0c;随着越来越多的人了解这个技术&#xff0c;就会培养出更多的技术依赖&#xff0c;让更多的人帮助你们完善你的技术依赖&#x…

基于javaweb(springboot+mybatis)网站建设服务管理系统设计和实现以及文档报告设计

基于javaweb(springbootmybatis)网站建设服务管理系统设计和实现以及文档报告设计 &#x1f345; 作者主页 网顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取…

时间序列预测(十)——长短期记忆网络(LSTM)

目录 一、LSTM结构 二、LSTM 核心思想 三、LSTM分步演练 &#xff08;一&#xff09;初始化 1、权重和偏置初始化 2、初始细胞状态和隐藏状态初始化 &#xff08;二&#xff09;前向传播 1、遗忘门计算&#xff08;决定从上一时刻隐状态中丢弃多少信息&#xff09; 2、…

Sigrity Power SI 3D-EM Full Wave Extraction模式如何进行S参数提取和观测3D电磁场和远场操作指导(一)

Sigrity Power SI 3D-EM Full Wave Extraction模式如何进行S参数提取和观测3D电磁场和远场操作指导(一) Sigrity Power SI的3D-EM Full Wave Extraction模式是Power SI的3D全波提取工具,相比于2D提取,3D全波提取的结果更为精确,且支持设置跨平面的port,也就是lump port,这…

rhce:web服务器

web服务器简介 服务器端&#xff1a;此处使用 nginx 提供 web 服务&#xff0c; RPM 包获取&#xff1a; http://nginx.org/packages/ /etc/nginx/ ├── conf.d #子配置文件目录 ├── default.d ├── fastcgi.conf ├── fastcgi.conf.default ├── fastcgi_params #用…

jenkins国内插件源

Jenkins是一个开源的持续集成和持续部署&#xff08;CI/CD&#xff09;工具, 可以大大减轻部署的工作量, 但是jenkins作为一个国外的软件, 在国内下载插件会很麻烦, 因此我们可以将其换为国内源 更换步骤 替换国内插件下载地址 以linux为例 首先, jenkins初始化完成之后不会…

DiffusionDet: Diffusion Model for Object Detection—用于对象检测的扩散模型论文解析

DiffusionDet: Diffusion Model for Object Detection—用于对象检测的扩散模型论文解析 这是一篇发表在CVPR 2023的一篇论文&#xff0c;因为自己本身的研究方向是目标跟踪&#xff0c;之前看了一点使用扩散模型进行多跟踪的论文&#xff0c;里面提到了DiffusionDet因此学习一…

idea 配置tomcat 服务

选择tomcat的安装路径 选到bin的文件夹的上一层就行

opencv 图像预处理

图像预处理 ​ 在计算机视觉和图像处理领域&#xff0c;图像预处理是一个重要的步骤&#xff0c;它能够提高后续处理&#xff08;如特征提取、目标检测等&#xff09;的准确性和效率。OpenCV 提供了许多图像预处理的函数和方法&#xff0c;以下是一些常见的图像预处理操作&…

初始JavaEE篇——多线程(4):wait、notify,饿汉模式,懒汉模式,指令重排序

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 wait、notify 方法 多线程练习 单例模式 饿汉模式 懒汉模式 指令重排序 wait、notify 方法 wait 和 我们前面学习的sleep…

新工具可绕过 Google Chrome 的新 Cookie 加密系统

一位研究人员发布了一款工具&#xff0c;用于绕过 Google 新推出的 App-Bound 加密 cookie 盗窃防御措施并从 Chrome 网络浏览器中提取已保存的凭据。 这款工具名为“Chrome-App-Bound-Encryption-Decryption”&#xff0c;由网络安全研究员亚历山大哈格纳 (Alexander Hagenah…

JavaSE笔记4】API、包、String类、Object类

目录 一、API 二、包 2.导入不同包下的同名程序 三、String 1. String类是什么&#xff1f; 2. 如何创建String对象?(常用的四种方法&#xff09; 3. String API a. 遍历字符串 b. 判断字符串内容是否相等&#xff1a; c. 截取子串 d. 替换部分内容 e. 匹配子串 f. 匹配开头字…

【含文档】基于ssm+jsp的超市订单后台理系统(含源码+数据库+lw)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: apache tomcat 主要技术: Java,Spring,SpringMvc,mybatis,mysql,vue 2.视频演示地址 3.功能 该系统有两个主…

雷军救WPS“三次”,WPS注入新生力量,不再“抄袭”微软

救WPS“三次” 1989年&#xff0c;求伯君用128万行代码编写出了WPS1.0&#xff0c;宣告了中国自主办公时代的开启。 那时候&#xff0c;雷军还在武汉大学深造&#xff0c;他早就把求伯君当成了自己的榜样&#xff0c;这一来二去的&#xff0c;雷军和WPS之间也就结下了不解之缘…