HarmonyOS 应用开发-ArkUI(ets)仿“腾讯新闻”APP

一、效果演示

1、新闻列表页

2、新闻详情页、图片展示页

3、视频页

4、动态页

二、 流程图

–本来自定义了视频的控制栏的,但是发现VideoController()控制器的bug会导致控制器失效,所以没继续做。视频页先不搞了。

三、文件组织(“我的页面”没做,视频页面因为bug没做完)

四、思路与实现

1、网络连接

我是做成一个POST通用请求,有点粗糙(也没做错误处理)不要介意,能用就行,哈哈

数据请求官方文档链接

/** 通用请求* url:链接* params:参数*/
export function DataHelperPOST(url: string, params: Object) {let httpRequest = http.createHttp()let promise = httpRequest.request(url, {method: http.POST,extraData: params,connectTimeout: 30000,readTimeout: 30000,header: {'Content-Type': 'application/json'}})return promise.then((value) => {let data:{ code: number, data: any } = { code: 0, data: '' }data.code = value.responseCodeif(value.responseCode === 200) {data.data = JSON.parse(JSON.stringify(value.result));}return data})
}//调用
export async function GetNewsList(newsType: string) {//接口链接let newsUrl: string = `http://v.juhe.cn/toutiao/index`;//参数let params: Object = { "type": newsType, "key": NewsKey }let getData = await DataHelperPOST(newsUrl, params);
}

2、自定义固定Tabs菜单,点击菜单切换,滑动页面菜单跟随

菜单用Scroll包裹设置为横向滑动,用display.getDefaultDisplay() 获取屏幕宽度(预览器无法获取),根据每个tab的固定宽度算出屏幕能显示多少个tab,用this.scroller.currentOffset().xOffset获取滑动偏移值,依据当前的index与偏移值的关系设置Scroll的偏移值this.scroller.scrollTo()

获取屏幕大小接口官方文档链接

3、下拉刷新

主要用List,List下拉自带弹簧效果

1、内容item用ForEach循环,再在最前面加一个刷新 item 10%高度,整个List往上偏移10%,List高度为110%,用parallelGesture绑定滑动事件。

2、往下滑动时未达到刷新行程,释放自动回弹(List自带的弹簧效果)。达到刷新行程,释放,List整体往下偏移10%(固定显示刷新item),刷新完成,List往上偏移10%(隐藏刷新 item)。

List() {//刷新 itemListItem() {Column() {Image($r("app.media.jiazaizhong_1")).objectFit(ImageFit.Contain).height('50%').aspectRatio(1).margin({ bottom: 5 }).rotate({ x: 0, y: 0, z: 1, angle: this.rotateAngle })Text(this.loadingText).fontSize(14).fontColor($r("app.color.fontColor_text2"))}}.width('100%').height(`${this.loadingHeight}%`)ForEach(this.tabData, item => {ListItem() {//内容item}}, item => item.id)
}
.position({ x: 0, y: `-${this.loadingYOffset}%` })
.width('100%').height(`${100 + this.loadingYOffset}%`)

4、新闻内容详情页

api获取的内容数据是html字符串,直接显示的话只能显示一堆很乱的文本,所以要将html字符串处理一下,把里面的文本、图片提取出来。

可以用charAt()逐字循环、indexOf()循环处理文本,把处理好的文本、图片存到一个数组里[{“node”: “text”, “content”: “文本····”}, {“node”: “img”, “content”: “图片地址”}],在显示页面用for循环判断node,显示Text或Image

(因为聚合的这个新闻内容只有图片和文字,而且格式也很整齐,所以处理起来比较简单。如果是整个页面的话也可以,但处理文本就比较复杂。而且不同网站的结构也不一样,如果玩过爬取的话这个就很简单了)

5、自定义视频控制栏

①Stack
②position

用Stack或position在视频前面设置一个控制栏,再用VideoController()控制器控制视频暂停/播放,用滑动条Slider()设置为进度条,用Video的onUpdate()方法实时更新进度条,用Slider()的onChange()事件设置拉动进度条播放。

Stack(){Video()Column() {//自定义控制栏}
}
Column() {Video()Column() {//自定义控制栏}.position({x: 0, y: 0})//透明度渐变//控制栏顶部(标题)与底部(进度条)黑色半透明向中间全透明渐变.linearGradient({colors: [['#a6000000', 0.0],['#00000000', 0.2], ['#00000000', 0.8], ['#a6000000', 1.0]]})
}

五、多机型适配(API7只有P40 Pro能开)

MatePadPro

MateX2

六、代码

下载代码的同学记得要填上自己的聚合API key,才能请求数据:data/NewsData

如果要用模拟器请求数据要把这两个注释去掉:common/TabsTypePage:aboutToAppear()方法下面
(还有index主页的获取屏幕Size的方法,预览器无法设置/获取,还会报错,有点烦。所以注释掉)

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

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

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

相关文章

网工内推 | 深信服、宁德时代,最高20K招安全工程师,包吃包住

01 深信服科技 招聘岗位:安全服务工程师 职责描述: 1.负责现场安全服务项目工作内容,包含渗透测试、安全扫描、基线核查、应急响应等; 2.协助用户完成安全测试漏洞整改、复测工作; 3.为用户提供网络、主机、业务系统等…

dg_mmld部分复现

Ours ( K ˆ \^{K} Kˆ2)复现结果– Photo:0.9634730538922156 (at Epoch 23) Art:0.8125 (at Epoch 23) Cartoon:0.7713310580204779 (at Epoch 18) 差距在可接受范围内 辅助信息 If you send 作者 an e-mail, 作者 will tell you a URL w…

2022年蓝桥杯省赛——重合次数

目录 题目链接:1.重合次数 - 蓝桥云课 (lanqiao.cn) 题目描述 答案提交 运行限制 思路 总结 题目链接:1.重合次数 - 蓝桥云课 (lanqiao.cn) 题目描述 在同一天中, 从上午 6 点 13 分 22 秒到下午 14 点 36 分 20 秒, 钟表上的 分针和秒针一共重合…

HTML - 请你谈一谈img标签图片和background背景图片的区别

难度级别:中级及以上 提问概率:65% 面试官当然不会问如何使用img标签或者background来加载一张图片,这些知识点都很基础,相信只要从事前端开发一小段时间以后,就可以轻松搞定加载图片的问题。但很多人习惯用img标签,很多人习惯用backgro…

Java 数据类型转换

String 转 char 数组 String str "abc"; char[] charArr str.toCharArray();char 数组转 String char[] charArr{a, b, c}; String str new String(charArr);char 字符转 String 使用 String.valueOf() 方法 char ch a; String str String.valueOf(ch);使…

element-ui的年份范围选择器,选择的年份需等于或小于当前年份,选择的年份范围必须在三年之内

写在前面 日期限制处理(禁用),下面我以我这边的需求为例, 选择的年份需等于或小于当前年份 选择的年份范围必须在三年之内 1.限制起始日期小于截止日期 1)根据用户选中的开始日期,置灰不可选的日期范围&…

【腾讯云 TDSQL-C Serverless 产品体验】饮水机式使用云数据库

云计算的发展从IaaS,PaaS,SaaS,到最新的BaaS,FasS,在这个趋势中serverless(去服务器化) 计算资源发展Physical -> Virtualisation -> Cloud Compute -> Container -> Serverless。 一、背景介绍…

LeetCode 264. 丑数 II

解题思路 三个指针进行遍历&#xff0c;归并排序。 相关代码 class Solution {public int nthUglyNumber(int n) {int temp1;int a[] new int[n];a[0] 1;for(int i0,j0,k0,index1;index<n;index){temp Math.min(a[i]*2,Math.min(a[k]*5,a[j]*3));a[index] temp;if(te…

什么是电子邮件组,为什么要使用它们?

在当今时代&#xff0c;电子邮件无处不在&#xff0c;尤其是对于商业活动而言。电子邮件的重要性不容忽视&#xff0c;因为它在沟通中极为高效。然而&#xff0c;电子邮件也存在降低工作效率和阻碍流程的风险。在这种情况下&#xff0c;电子邮件群组就是最佳的解决方案。什么是…

代码随想录算法训练营第二十九天|491.递增子序列,46.全排列,47.全排列 II

题目&#xff1a;491.递增子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中至少有两个元素。你可以按任意顺序返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一…

VUE路由跳转、传参总结

路由跳转方式有哪些&#xff1f; 在Vue中&#xff0c;路由跳转主要有以下几种方式&#xff1a; 使用router-link组件&#xff1a; <router-link to"/home">Home</router-link>使用编程式导航 // 字符串 this.$router.push(home)// 对象 this.$router.…

大学生拥有一台服务器可以做什么?

云服务器的崭新世界&#xff0c;充满了无限的可能性和激动人心的挑战。无论你是想要建立个人网站、运行定时任务&#xff0c;还是学习Linux系统&#xff0c;云服务器都为你提供了一个极具灵活性和自由度的平台。 让我们一起深入探索&#xff0c;看看拥有一台服务器你可以做些什…

【学习 在服务器上使用bypy直接下载百度云盘的资源。

参考&#xff1a;bypy 具体步骤 step1&#xff1a; pip install bypystep2&#xff1a; bypy info第一次输入该命令&#xff0c; 点击进入网址&#xff0c;点击登陆后&#xff0c;获取token&#xff08;10分钟内有效&#xff09;&#xff0c;然后输入到命令行&#xff1a;…

【linux深入剖析】深入理解基础外设--磁盘

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.磁盘物理结构2.磁盘…

汽车差速器原理?

差速器&#xff08;Differential&#xff09;是汽车传动系统中的重要组成部分&#xff0c;主要作用是允许车辆驱动轮以不同速度旋转&#xff0c;从而使车辆能够顺利转弯并保持稳定性。其基本原理如下&#xff1a; 解决转弯问题&#xff1a; 当车辆转弯时&#xff0c;内侧轮和外…

pnputil卸载Sangfor

pnputil /delete-driver sangforvnic.inf /uninstall Microsoft PnP 工具PNPUTIL [/add-driver <...> | /delete-driver <...> |/export-driver <...> | /enum-drivers |/enum-devices [<...>] | /enum-interfaces [<...>] |/disable-device &l…

Go 实战|使用 Wails 构建轻量级的桌面应用:仿微信登录界面 Demo

概述 本文探讨 Wails 框架的使用&#xff0c;从搭建环境到开发&#xff0c;再到最终的构建打包&#xff0c;本项目源码 GitHub 地址&#xff1a;https://github.com/mazeyqian/go-run-wechat-demo 前言 Wails 是一个跨平台桌面应用开发框架&#xff0c;他允许开发者利用 Go …

C中的函数原型声明、头文件包含的思考

1&#xff09;如果add1.c调用了add2.c中的add2函数&#xff0c;add2.h定义了add2.c中的函数原型&#xff0c;add1.c需包含#include "add2.h"的原因&#xff1f; add1.c既然调用了函数add2&#xff0c;必须知道函数add2的函数原型&#xff0c;否则gcc -c add1.c&…

联想电脑VMware虚拟机VT开启虚拟化

以联想电脑为例。 关机重启&#xff0c; 有的电脑是按F2&#xff0c; 有的是按fnF2 进入BIOS&#xff0c;左右键&#xff0c;选择Configuration&#xff0c; 再上下键选择 Intel Virtual Technology 按回车键&#xff0c;再按上下键选择 Enable &#xff0c;回车确认。 按fn…

Xlinx相关原语讲解导航页面

原语就是对FPGA底层器件的直接调用&#xff0c;与IP功能是类似的&#xff0c;将原语的参数变成IP配置时的GUI界面参数&#xff0c;可能会更加直观。IP的缺陷在于繁杂&#xff0c;比如SelectIO IP内部包含IDDR、ODDR等等IO转换的功能&#xff0c;如果只想使用单沿转双沿一个功能…