WanAndroid(鸿蒙版)开发的第二篇

前言

DevEco Studio版本：4.0.0.600

WanAndroid的API链接：玩Android 开放API-玩Android - wanandroid.com

1、WanAndroid(鸿蒙版)开发的第一篇

2、WanAndroid(鸿蒙版)开发的第二篇

3、WanAndroid(鸿蒙版)开发的第三篇

4、WanAndroid(鸿蒙版)开发的第四篇

5、WanAndroid(鸿蒙版)开发的第五篇

其他一些参考点，请参考上面的WanAndroid开发第一篇

效果

首页实现

整体布局分为头部的Banner和底部的列表List，知道了整体的机构我们就来进行UI布局

1、Banner实现

参考华为官方  OpenHarmony Swiper

详细代码：

import router from '@ohos.router';
import { BannerItemBean } from '../bean/BannerItemBean';
import { HttpManager, RequestMethod } from '@app/BaseLibrary';
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';
import { BannerBean } from '../bean/BannerBean';const TAG = 'Banner--- ';@Component
export struct Banner {@State bannerData: Array<BannerItemBean> = [];private swiperController: SwiperController = new SwiperController();@State isVisibility: boolean = trueprivate onDataFinish: () => void //数据加载完成回调aboutToAppear() {this.getBannerData()}private getBannerData() {HttpManager.getInstance().request<BannerBean>({method: RequestMethod.GET,header: { "Content-Type": "application/json" },url: 'https://www.wanandroid.com/banner/json', //wanAndroid的API：Banner}).then((result: BannerBean) => {LogUtils.info(TAG, "result: " + JSON.stringify(result))if (result.errorCode == 0) {this.isVisibility = truethis.bannerData = result.data} else {this.isVisibility = false}this.onDataFinish()}).catch((error) => {LogUtils.info(TAG, "error: " + JSON.stringify(error))this.isVisibility = falsethis.onDataFinish()})}build() {Swiper(this.swiperController) {ForEach(this.bannerData, (banner: BannerItemBean) => {Image(banner.imagePath).borderRadius(16).onClick(() => {router.pushUrl({url: 'pages/WebPage',params: {title: banner.title,uriLink: banner.url,isShowCollect: false,}}, router.RouterMode.Single)})}, (banner: BannerItemBean) => banner.url)}.margin({ top: 10 }).autoPlay(true).interval(1500).visibility(this.isVisibility ? Visibility.Visible : Visibility.None).width('100%').height(150)}
}

2、List列表实现

因为是带上拉加载和下拉刷新，参考我之前文章：鸿蒙自定义刷新组件使用_harmoneyos 自定义刷新

详细代码：

import {BaseResponseBean,Constants,HtmlUtils,HttpManager,RefreshController,RefreshListView,RequestMethod
} from '@app/BaseLibrary';
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';
import { HomeListItemBean } from '../bean/HomeListItemBean';
import { HomeListBean } from '../bean/HomeListBean';
import router from '@ohos.router';
import promptAction from '@ohos.promptAction';const TAG = 'HomeList--- ';@Component
export struct HomeList {@State controller: RefreshController = new RefreshController()@State homeListData: Array<HomeListItemBean> = [];@State pageNum: number = 0@State isRefresh: boolean = trueprivate onDataFinish: () => void //数据加载完成回调@State userName: string = ''@State token_pass: string = ''@State listCollectState: Array<boolean> = [] //用于存储收藏状态aboutToAppear() {if (AppStorage.Has(Constants.APPSTORAGE_USERNAME)) {this.userName = AppStorage.Get(Constants.APPSTORAGE_USERNAME) as string}if (AppStorage.Has(Constants.APPSTORAGE_TOKEN_PASS)) {this.token_pass = AppStorage.Get(Constants.APPSTORAGE_TOKEN_PASS) as string}this.getHomeListData()}/*** 获取列表数据*/private getHomeListData() {HttpManager.getInstance().request<HomeListBean>({method: RequestMethod.GET,header: {"Content-Type": "application/json","Cookie": `loginUserName=${this.userName}; token_pass=${this.token_pass}`},url: `https://www.wanandroid.com/article/list/${this.pageNum}/json` //wanAndroid的API：Banner}).then((result: HomeListBean) => {LogUtils.info(TAG, "result: " + JSON.stringify(result))if (this.isRefresh) {this.controller.finishRefresh()} else {this.controller.finishLoadMore()}if (result.errorCode == 0) {if (this.isRefresh) {this.homeListData = result.data.datasfor (let i = 0; i < this.homeListData.length; i++) {this.listCollectState[i] = this.homeListData[i].collect}} else {this.homeListData = this.homeListData.concat(result.data.datas)}}this.onDataFinish()}).catch((error) => {LogUtils.info(TAG, "error: " + JSON.stringify(error))if (this.isRefresh) {this.controller.finishRefresh()} else {this.controller.finishLoadMore()}this.onDataFinish()})}@BuilderitemLayout(item: HomeListItemBean, index: number) {RelativeContainer() {//作者或分享人Text(item.author.length > 0 ? "作者：" + item.author : "分享人：" + item.shareUser).fontColor('#666666').fontSize(14).id("textAuthor").alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },left: { anchor: '__container__', align: HorizontalAlign.Start }})Text(item.superChapterName + '/' + item.chapterName).fontColor('#1296db').fontSize(14).id("textChapterName").alignRules({top: { anchor: '__container__', align: VerticalAlign.Top },right: { anchor: '__container__', align: HorizontalAlign.End }})//标题Text(HtmlUtils.formatStr(item.title)).fontColor('#333333').fontWeight(FontWeight.Bold).maxLines(2).textOverflow({overflow: TextOverflow.Ellipsis}).fontSize(20).margin({ top: 10 }).id("textTitle").alignRules({top: { anchor: 'textAuthor', align: VerticalAlign.Bottom },left: { anchor: '__container__', align: HorizontalAlign.Start }})//更新时间Text("时间：" + item.niceDate).fontColor('#666666').fontSize(14).id("textNiceDate").alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom },left: { anchor: '__container__', align: HorizontalAlign.Start }})//收藏状态Image(this.listCollectState[index] ? $r('app.media.ic_select_collect') : $r('app.media.ic_normal_collect')).width(26).height(26).id('imageCollect').alignRules({bottom: { anchor: '__container__', align: VerticalAlign.Bottom },right: { anchor: '__container__', align: HorizontalAlign.End }}).onClick(() => {this.setCollectData(item.id, index)})}.width('100%').height(120).padding(10).margin({ left: 10, right: 10, top: 6, bottom: 6 }).borderRadius(10).backgroundColor(Color.White)}build() {RefreshListView({list: this.homeListData,controller: this.controller,isEnableLog: true,refreshLayout: (item: HomeListItemBean, index: number): void => this.itemLayout(item, index),onItemClick: (item: HomeListItemBean, index: number) => {LogUtils.info(TAG, "点击了：index： " + index + " item: " + item)router.pushUrl({url: 'pages/WebPage',params: {title: item.title,uriLink: item.link,isShowCollect: true,isCollect: this.listCollectState[index]}}, router.RouterMode.Single)},onRefresh: () => {//下拉刷新this.isRefresh = truethis.pageNum = 0this.getHomeListData()},onLoadMore: () => {//上拉加载this.isRefresh = falsethis.pageNum++this.getHomeListData()}})}/*** 设置收藏和取消收藏状态* @param id  文章id* @param index  数据角标*/private setCollectData(id: number, index: number) {let collect = this.listCollectState[index]let urlLink = collect ? `https://www.wanandroid.com/lg/uncollect_originId/${id}/json` : `https://www.wanandroid.com/lg/collect/${id}/json` //取消收藏和收藏接口HttpManager.getInstance().request<BaseResponseBean>({method: RequestMethod.POST,header: {"Content-Type": "application/json","Cookie": `loginUserName=${this.userName}; token_pass=${this.token_pass}`},url: urlLink //wanAndroid的API：收藏和取消收藏}).then((result: BaseResponseBean) => {LogUtils.info(TAG, "收藏  result: " + JSON.stringify(result))if (result.errorCode == 0) {this.listCollectState[index] = !this.listCollectState[index]promptAction.showToast({ message: collect ? "取消收藏成功" : "收藏成功" })} else {promptAction.showToast({ message: result.errorMsg })}}).catch((error) => {LogUtils.info(TAG, "收藏  error: " + JSON.stringify(error))})}
}

注意点：就是在获取List数据时，通过WanAndroid的API知道要想获取收藏状态需要传入用户登录时的Cookie,但是鸿蒙没有像Android那样的Cookie处理，只能通过在登录的时候获取loginUserName和token_pass然后在请求时将这两个参数添加到请求头中，实现如下图：

这两个参数获取参考第一篇的文章。

3、将两个视图整合

详细代码：

import { Banner } from './widget/Banner';
import { HomeList } from './widget/HomeList';
import { LoadingDialog } from '@app/BaseLibrary';
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';@Component
export struct HomePage {@State bannerLoadDataStatus: boolean = false@State HomeListLoadDataStatus: boolean = falseaboutToAppear() {//弹窗控制器，显示this.dialogController.open()}private dialogController = new CustomDialogController({builder: LoadingDialog(),customStyle: true,alignment: DialogAlignment.Center, // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示})build() {Column() {Banner({ onDataFinish: () => {this.bannerLoadDataStatus = trueLogUtils.info("33333333333 Banner  bannerLoadDataStatus: " + this.bannerLoadDataStatus + "  HomeListLoadDataStatus: " + this.HomeListLoadDataStatus)if (this.bannerLoadDataStatus && this.HomeListLoadDataStatus) {this.dialogController.close()}} })HomeList({ onDataFinish: () => {this.HomeListLoadDataStatus = trueLogUtils.info("33333333333 HomeList  bannerLoadDataStatus: " + this.bannerLoadDataStatus + "  HomeListLoadDataStatus: " + this.HomeListLoadDataStatus)if (this.bannerLoadDataStatus && this.HomeListLoadDataStatus) {this.dialogController.close()}} }).flexShrink(1).margin({ top: 10 })}.visibility(this.bannerLoadDataStatus && this.HomeListLoadDataStatus ? Visibility.Visible : Visibility.Hidden).width('100%').height('100%')}
}

4、页面初始化获取Banner和首页列表数据

Banner：

aboutToAppear() {this.getBannerData()
}

首页列表：

aboutToAppear() {this.getHomeListData()
}

源代码地址：WanAndroid_Harmony: WanAndroid的鸿蒙版本

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

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

相关文章

【研发日记】Matlab/Simulink技能解锁(一)——在Simulink编辑窗口Debug

【研发日记】Matlab/Simulink技能解锁(一)——在Simulink编辑窗口Debug

文章目录 前言 时间阈值断点 信号阈值断点 周期步进 Signal Value Lable Data Inspector 分析和应用 总结 前言 近期在一些研发项目中使用Matlab/Simulink时&#xff0c;遇到了挺多费时费力的事情。所以利用晚上和周末时间&#xff0c;在这些方面深入研究了一下&#x…
阅读更多...
深入解析JVM加载机制

深入解析JVM加载机制

一、背景 Java代码被编译器变成生成Class字节码&#xff0c;但字节码仅是一个特殊的二进制文件&#xff0c;无法直接使用。因此&#xff0c;都需要放到JVM系统中执行&#xff0c;将Class字节码文件放入到JVM的过程&#xff0c;简称类加载。 二、整体流程 三、阶段逻辑分析 3…
阅读更多...
VS2022 配置QT5.9.9

VS2022 配置QT5.9.9

QT安装 下载地址&#xff1a;https://download.qt.io/archive/qt/ 下载安装后进行配置 无法运行 rc.exe 下载VS2022 官网下载 配置 1.扩展-管理扩展-下载Qt Visual Studio Tools 安装 2.安装完成后&#xff0c;打开vs2022,点击扩展&#xff0c;会发现多出了QT VS Tools,点…
阅读更多...
NeRF——基于神经辐射场的三维场景重建和理解

NeRF——基于神经辐射场的三维场景重建和理解

概述 三维重建是一种将物理世界中的实体转换为数字模型的计算机技术。其基本概念是通过对物理世界中的物体或场景进行扫描或拍摄&#xff0c;并使用计算机算法将其转换为三维数字模型。抽象意义上的三维模型指的是&#xff1a;形状和外观的组合&#xff0c;并且可以渲染成不同…
阅读更多...
unity3d Animal Controller的Animal组件中Speeds，States和modes基础部分理解

unity3d Animal Controller的Animal组件中Speeds，States和modes基础部分理解

Speeds 速度集是修改你可以做的原始动画,增加或减少运动,旋转,或动画速度。它们与 州 所以,当动物在运动状态下,在飞行或游泳时,你可以有不同的速度 如果你的性格动画是 (已到位), 你一定要调整速度 位置 和 旋转 每一种的价值观 速度装置 …否则,它们不会移动或旋转。 每个速…
阅读更多...
使用Docker在windows上安装IBM MQ

使用Docker在windows上安装IBM MQ

第一步、安装wsl 详见我另一篇安装wsl文章。 第二步、安装centos 这里推荐两种方式&#xff0c;一种是从微软商城安装&#xff0c;一种是使用提前准备好的镜像安装&#xff0c;详见我另一篇windos下安装centos教程。 第三步、安装windows下的Docker desktop 详见我另一篇wind…
阅读更多...
MATLAB的使用（二)

MATLAB的使用（二)

一&#xff0c;算法需求 算法五特性(1)有穷性。有穷性是指算法需在有穷步骤、有穷时间内结束。 (2)确定性。确定性是指每个步骤都有确切的意义&#xff0c;相同的输入有相同的输出。 (3)有效性。有效性是指可通过已实现的运算在有限次完成&#xff0c;或叫可行性。 (4)输入。…
阅读更多...
ttkbootstrap界面美化系列之主窗口(二)

ttkbootstrap界面美化系列之主窗口(二)

一&#xff1a;创建主窗口 在利用ttkbootstrap构建应用程序时&#xff0c;可以用tkinter传统的tk方法来创建主界面&#xff0c;也可以用ttkbootstrap中的window类来创建&#xff0c;下面我们来看看两者的区别 1&#xff0c;传统方法创建主界面 import tkinter as tk import …
阅读更多...
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Span）

鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Span）

作为Text组件的子组件&#xff0c;用于显示行内文本的组件。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 该组件从API Version 10开始支持继承父组件Text的属性&#xff0c;即如果子组件未设置…
阅读更多...
2.26OS分类，中断（内，外），系统调用，操作系统结构、引导，虚拟机（两类VMM)，进程

2.26OS分类，中断（内，外），系统调用，操作系统结构、引导，虚拟机（两类VMM)，进程

外核可以申请分配连续的磁盘块以支持频繁的随机访问&#xff0c;其它的方式是采用虚拟存储 分层结构
阅读更多...
代码随想录阅读笔记-哈希表【三数之和】

代码随想录阅读笔记-哈希表【三数之和】

题目 给你一个包含 n 个整数的数组 nums&#xff0c;判断 nums 中是否存在三个元素 a&#xff0c;b&#xff0c;c &#xff0c;使得 a b c 0 &#xff1f;请你找出所有满足条件且不重复的三元组。 注意&#xff1a; 答案中不可以包含重复的三元组。 示例&#xff1a; 给定数…
阅读更多...
OceanBase原理之内存管理

OceanBase原理之内存管理

第1章 前言 1.1 多租户管理简介 OceanBase数据库中&#xff0c;应用了单集群多租户的设计&#xff0c;使得一个集群内能够创建多个彼此独立的租户。在OceanBase数据库&#xff0c;租户成为了资源分配的单位&#xff0c;同时还是数据库对象管理和资源管理的基础。 在某种程度…
阅读更多...
力扣思路题：最长特殊序列1

力扣思路题：最长特殊序列1

int findLUSlength(char * a, char * b){int alenstrlen(a),blenstrlen(b);if (strcmp(a,b)0)return -1;return alen>blen?alen:blen; }
阅读更多...
2024蓝桥杯每日一题（DFS）

2024蓝桥杯每日一题（DFS）

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一&#xff1a;奶牛选美 试题二&#xff1a;树的重心 试题三&#xff1a;大臣的差旅费 试题四&#xff1a;扫雷 试题一&#xff1a;奶牛选美 【题目描述】 听说最近两斑点的奶牛最受欢迎&#xff0c;…
阅读更多...
【力扣精选算法100道】——带你了解(数组模拟栈)算法

【力扣精选算法100道】——带你了解(数组模拟栈)算法

目录 &#x1f4bb;比较含退格的字符串 &#x1f388;了解题意 &#x1f388;分析题意 &#x1f6a9;栈 &#x1f6a9;数组模拟栈 &#x1f388;实现代码 844. 比较含退格的字符串 - 力扣&#xff08;LeetCode&#xff09; &#x1f4bb;比较含退格的字符串 &#x1f3…
阅读更多...
从历年315曝光案例，看APP隐私合规安全

从历年315曝光案例，看APP隐私合规安全

更多网络安全干货内容&#xff1a;点此获取 ——————— 随着移动互联网新兴技术的发展与普及&#xff0c;移动APP的应用渗透到人们的衣食住行方方面面&#xff0c;衍生出各类消费场景的同时&#xff0c;也带来了无数的个人隐私数据泄露、网络诈骗事件。 历年来&#xff…
阅读更多...
PyTorch学习笔记之激活函数篇（二）

PyTorch学习笔记之激活函数篇（二）

文章目录 2、Tanh函数2.1 公式2.2 对应的图像2.3 对应生成图像代码2.4 优点与不足2.5 torch.tanh()函数 2、Tanh函数 2.1 公式 Tanh函数的公式&#xff1a; f ( x ) e x − e − x e x e − x f(x)\frac{e^x-e^{-x}}{e^xe^{-x}} f(x)exe−xex−e−x​ Tanh函数的导函数&am…
阅读更多...
【python】学习笔记04-函数

【python】学习笔记04-函数

4.1 函数介绍 1. 函数是&#xff1a; 组织好的、可重复使用的、用来实现特定功能的代码段 2. 使用函数的好处是&#xff1a; • 将功能封装在函数内&#xff0c;可供随时随地重复利用 • 提高代码的复用性&#xff0c;减少重复代码&#xff0c;提高开发效率 4.2 函数的定义 …
阅读更多...
数据库系统概念（第二周 第二堂）（关系模型）

数据库系统概念（第二周 第二堂）（关系模型）

目录 回顾 关系模型 历史与现状 组成成分 数据结构——关系 关系定义 关系性质 关系和关系模式 难点概念理解 关系属性的分类 一、超码&#xff08;superkey&#xff09; 二、候选码&#xff08;candidate key&#xff09; 三、主码&#xff08;primary key&#…
阅读更多...
智慧公厕对于智慧城市管理的意义

智慧公厕对于智慧城市管理的意义

近年来&#xff0c;智慧城市的概念不断被提及&#xff0c;而智慧公厕作为智慧城市管理的重要组成部分&#xff0c;其在监测、管理和养护方面发挥着重要的作用。智慧公厕不仅是城市市容提升的重要保障&#xff0c;还能提升城市环境卫生管理的质量&#xff0c;并有效助力创造清洁…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023