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

前言

DevEco Studio版本:4.0.0.600

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

其他篇文章参考:

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

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

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

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

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

效果

   

搜索页面实现

从效果图上可以知道整体是竖直方向(Column),包括:搜索框、热搜、搜索历史三个模块

1、搜索框

代码实现:

 RelativeContainer() {Image($r('app.media.ic_back')).width(32).height(32).id('imageBack').margin({ left: 10, right: 10 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },left: { anchor: '__container__', align: HorizontalAlign.Start }}).onClick(() => {router.back()})Button('搜索').height(35).fontColor(Color.White).id('buttonSearch').margin({ left: 10, right: 10 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },right: { anchor: '__container__', align: HorizontalAlign.End }}).linearGradient({angle: 0,colors: [['#E4572F', 0], ['#D64025', 1]]}).onClick(() => {if (this.searchContent.trim().length > 0) {this.insertData(new SearchContentBean(this.searchContent.trim()))this.jumpToSearchDetails(this.searchContent)} else {promptAction.showToast({ message: '搜索内容为空' })}})Row() {Image($r('app.media.ic_search_8a8a8a')).width(20).height(20)TextInput({ placeholder: '发现更多干货', text: '鸿洋' }).fontSize(16).backgroundColor('#00000000').enterKeyType(EnterKeyType.Search).width('100%').height(45).flexShrink(1).onChange((value: string) => {this.searchContent = value})}.height(45).padding(5).borderWidth(1).borderColor('#ED7C12').borderRadius(10).id('rowSearch').alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },left: { anchor: 'imageBack', align: HorizontalAlign.End },right: { anchor: 'buttonSearch', align: HorizontalAlign.Start }})}.width('100%').height(70)

2、热搜

从UI效果上可以看出热搜内容是个流式布局,要实现流式布局可以通过

Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) 来实现

参考:OpenHarmony Flex

代码实现:

@Component
export struct FlowlayoutView {@Link flowlayoutArr: string[]private onItemClick: (item: string, index: number) => void = () => {}build() {// Flex布局, wrap为FlexWrap.Wrap为流式布局Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {if (this.flowlayoutArr.length > 0) {ForEach(this.flowlayoutArr,(item: string, index: number) => {Text(`${item}`).fontSize(18).fontColor(Color.White).borderStyle(BorderStyle.Solid).padding({ left: 10, right: 10, top: 6, bottom: 6 }).backgroundColor(Color.Pink).borderRadius(5).margin({ top: 10, right: 10 }).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2).onClick(() => {this.onItemClick(item, index)})},(item: string) => item.toString())}}}
}

3、搜索历史

每次点击搜索或点击热搜中的关键词时,将点击的内容保存到数据库中,在搜索页面显示时(onPageShow)去查询数据库。UI上通过List去加载查询的数据

数据库实现:

参考BaseLibrary 中database里面的代码

代码实现:

List() {ForEach(this.searchHistoryList, (item, index) => {ListItem() {Row() {Image($r('app.media.searchHistory')).width(24).height(24).margin({ left: 20 })Text(item).fontColor(this.getTextColor(index)).fontSize(20).margin({ right: 20 })}.width('100%').padding({ top: 15, bottom: 15 }).justifyContent(FlexAlign.SpaceBetween)}.swipeAction({ end: this.itemEnd(index) }).onClick(() => {this.jumpToSearchDetails(item)})})
}
.flexShrink(1)
.width('100%')
.height('100%')

4、详细代码

import router from '@ohos.router'
import promptAction from '@ohos.promptAction'
import { FlowlayoutView, HttpManager, RequestMethod, SearchContentBean, SQLManager } from '@app/BaseLibrary'
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils'
import { SearchHotKey } from '../../bean/search/SearchHotKeyBean'const TAG = 'SearchPage--- ';@Entry
@Component
struct SearchPage {private sqlManager = new SQLManager();@State searchContent: string = ''@State searchHotKeyArr: string[] = []@State searchHistoryList: string[] = []@State searchContentBeanList: SearchContentBean[] = []aboutToAppear() {this.getSearchHotKeyData()}onPageShow() {this.queryAllData()}private getSearchHotKeyData() {HttpManager.getInstance().request<SearchHotKey>({method: RequestMethod.GET,url: `https://www.wanandroid.com/hotkey/json`, //wanAndroid的API:搜索热词}).then((result: SearchHotKey) => {LogUtils.info(TAG, "result: " + JSON.stringify(result))if (result.errorCode == 0) {for (let i = 0; i < result.data.length; i++) {this.searchHotKeyArr = this.searchHotKeyArr.concat(result.data[i].name)}}LogUtils.info(TAG, "添加后的searchHotKeyArr: " + JSON.stringify(this.searchHotKeyArr))}).catch((error) => {LogUtils.info(TAG, "error: " + JSON.stringify(error))})}build() {Column() {RelativeContainer() {Image($r('app.media.ic_back')).width(32).height(32).id('imageBack').margin({ left: 10, right: 10 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },left: { anchor: '__container__', align: HorizontalAlign.Start }}).onClick(() => {router.back()})Button('搜索').height(35).fontColor(Color.White).id('buttonSearch').margin({ left: 10, right: 10 }).alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },right: { anchor: '__container__', align: HorizontalAlign.End }}).linearGradient({angle: 0,colors: [['#E4572F', 0], ['#D64025', 1]]}).onClick(() => {if (this.searchContent.trim().length > 0) {this.insertData(new SearchContentBean(this.searchContent.trim()))this.jumpToSearchDetails(this.searchContent)} else {promptAction.showToast({ message: '搜索内容为空' })}})Row() {Image($r('app.media.ic_search_8a8a8a')).width(20).height(20)TextInput({ placeholder: '发现更多干货', text: '鸿洋' }).fontSize(16).backgroundColor('#00000000').enterKeyType(EnterKeyType.Search).width('100%').height(45).flexShrink(1).onChange((value: string) => {this.searchContent = value})}.height(45).padding(5).borderWidth(1).borderColor('#ED7C12').borderRadius(10).id('rowSearch').alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },left: { anchor: 'imageBack', align: HorizontalAlign.End },right: { anchor: 'buttonSearch', align: HorizontalAlign.Start }})}.width('100%').height(70)Divider().strokeWidth(1).color('#F1F3F5')Text('热搜').fontSize(20).fontColor('#D64025').margin({ left: 15, right: 15, top: 10 }).alignSelf(ItemAlign.Start)//自定义流式布局FlowlayoutView({flowlayoutArr: this.searchHotKeyArr,onItemClick: (item, index) => {LogUtils.info(TAG, "Index------   点击了:index: " + index + " item: " + item)this.insertData(new SearchContentBean(item))this.jumpToSearchDetails(item)}}).margin({ left: 20, right: 20 })Row() {Text('搜索历史').fontSize(20).fontColor('#1296db').margin({ left: 15, right: 15, top: 15, bottom: 15 }).alignSelf(ItemAlign.Start)Row() {Image($r('app.media.deleteAll')).width(22).height(22)Text('清空').fontColor(Color.Black).margin({ left: 5 }).fontSize(20)}.margin({ left: 15, right: 15, top: 15, bottom: 15 }).onClick(() => {this.deleteAllData()})}.width('100%').justifyContent(FlexAlign.SpaceBetween)List() {ForEach(this.searchHistoryList, (item, index) => {ListItem() {Row() {Image($r('app.media.searchHistory')).width(24).height(24).margin({ left: 20 })Text(item).fontColor(this.getTextColor(index)).fontSize(20).margin({ right: 20 })}.width('100%').padding({ top: 15, bottom: 15 }).justifyContent(FlexAlign.SpaceBetween)}.swipeAction({ end: this.itemEnd(index) }).onClick(() => {this.jumpToSearchDetails(item)})})}.flexShrink(1).width('100%').height('100%')}.width('100%').height('100%').backgroundColor(Color.White)}@BuilderitemEnd(index: number) { // 侧滑后尾端出现的组件Image($r('app.media.deleteAll')).width(30).height(30).margin(10).onClick(() => {this.deleteData(this.searchContentBeanList[index])this.searchHistoryList.splice(index, 1);this.searchContentBeanList.splice(index, 1);})}/*** 跳转到搜索详情页*/private jumpToSearchDetails(content: string) {router.pushUrl({url: 'pages/search/SearchDetailsPage',params: {searchContent: content}}, router.RouterMode.Single)}private deleteData(searchContentBean: SearchContentBean) {LogUtils.info("Rdb-----   deleteData result: " + searchContentBean.id + "   searchContent: " + searchContentBean.searchContent)this.sqlManager.deleteData(searchContentBean, (result) => {LogUtils.info("Rdb-----   删除 result: " + result)})}/*** 删除所有数据*/private deleteAllData() {if (this.searchHistoryList.length <= 0) {promptAction.showToast({ message: '没有可清除的数据' })return}this.sqlManager.deleteDataAll((result) => {LogUtils.info(TAG, "Rdb-----   删除所有 result: " + result)if (result) {promptAction.showToast({ message: '清除完成' })this.searchHistoryList = []}})}/*** 查询所有数据*/private queryAllData() {this.sqlManager.getRdbStore(() => {this.sqlManager.query((result: Array<SearchContentBean>) => {LogUtils.info(TAG, "Rdb-----   查询 result: " + JSON.stringify(result))this.searchContentBeanList = resultthis.searchHistoryList = []for (let i = 0; i < result.length; i++) {this.searchHistoryList.push(result[i].searchContent)}})})}/*** 插入数据*/private insertData(searchContentBean: SearchContentBean) {this.sqlManager.insertData(searchContentBean, (id: number) => {LogUtils.info(TAG, "Rdb-----  result  插入 id: " + id)searchContentBean.id = idif (id >= 0) { //id < 0 表示插入数据失败}})}private getTextColor(index: number): ResourceColor {if (index % 3 == 0) {return Color.Orange} else if (index % 3 == 1) {return Color.Blue} else if (index % 3 == 2) {return Color.Pink}return Color.Black}
}

搜索详情页面实现

1、代码实现:

import router from '@ohos.router';
import {Constants,HtmlUtils,HttpManager,LoadingDialog,RefreshController,RefreshListView,RequestMethod
} from '@app/BaseLibrary';
import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';
import { SearchDetailsItemBean } from '../../bean/search/SearchDetailsItemBean';
import { SearchDetailsBean } from '../../bean/search/SearchDetailsBean';
import promptAction from '@ohos.promptAction';
import { AppTitleBar } from '../../widget/AppTitleBar';const TAG = 'SearchDetailsPage--- ';@Entry
@Component
struct SearchDetailsPage {@State searchContent: string = router.getParams()?.['searchContent'];@State controller: RefreshController = new RefreshController()@State searchDetailsListData: Array<SearchDetailsItemBean> = [];@State pageNum: number = 0@State isRefresh: boolean = true@State userName: string = ''@State token_pass: string = ''aboutToAppear() {LogUtils.info(TAG, " aboutToAppear: " + this.searchContent)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.dialogController.open()this.getSearchDetailsData()}private getSearchDetailsData() {HttpManager.getInstance().request<SearchDetailsBean>({method: RequestMethod.POST,header: {"Content-Type": "application/json","Cookie": `loginUserName=${this.userName}; token_pass=${this.token_pass}`},url: `https://www.wanandroid.com/article/query/${this.pageNum}/json/?k=${encodeURIComponent(this.searchContent)}`, //wanAndroid的API:搜索  ?k=${this.searchContent}}).then((result: SearchDetailsBean) => {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.searchDetailsListData = result.data.datas} else {if (result.data.datas.length > 0) {this.searchDetailsListData = this.searchDetailsListData.concat(result.data.datas)} else {promptAction.showToast({ message: '没有更多数据啦!' })}}}this.dialogController.close()}).catch((error) => {LogUtils.info(TAG, "error: " + JSON.stringify(error))if (this.isRefresh) {this.controller.finishRefresh()} else {this.controller.finishLoadMore()}this.dialogController.close()})}build() {Column() {AppTitleBar({ title: this.searchContent })RefreshListView({list: this.searchDetailsListData,controller: this.controller,isEnableLog: true,paddingRefresh: { left: 10, right: 10, top: 5, bottom: 5 },refreshLayout: (item: SearchDetailsItemBean, index: number): void => this.itemLayout(item, index),onItemClick: (item: SearchDetailsItemBean, index: number) => {LogUtils.info(TAG, "点击了:index: " + index + " item: " + item)router.pushUrl({url: 'pages/WebPage',params: {title: item.title,uriLink: item.link}}, router.RouterMode.Single)},onRefresh: () => {//下拉刷新this.isRefresh = truethis.pageNum = 0this.getSearchDetailsData()},onLoadMore: () => {//上拉加载this.isRefresh = falsethis.pageNum++this.getSearchDetailsData()}}).flexShrink(1)}.width('100%').height('100%').backgroundColor('#F1F3F5')}@BuilderitemLayout(item: SearchDetailsItemBean, 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 }})}.width('100%').height(120).padding(10).borderRadius(10).backgroundColor(Color.White)}private dialogController = new CustomDialogController({builder: LoadingDialog(),customStyle: true,alignment: DialogAlignment.Center, // 可设置dialog的对齐方式,设定显示在底部或中间等,默认为底部显示})
}

2、根据传入的搜索词获取数据

aboutToAppear() {this.getSearchDetailsData()
}

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

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

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

相关文章

2024年3月GESP认证Scratch图形化编程四级真题及答案

GESP 图形化四级试卷 &#xff08;满分&#xff1a;100 分 考试时间&#xff1a;120 分钟&#xff09; 学校&#xff1a; 姓名&#xff1a; ​ 一、单选题&#xff08;共 10 题&#xff0c;每题 2 分&#xff0c;共 30 分&#xff09; 题号 1 2 3 4 5 6 7 8 9 10 11 1…

【开源】SpringBoot框架开发学生综合素质评价系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 学生功能2.2 教师功能2.3 教务处功能 三、系统展示四、核心代码4.1 查询我的学科竞赛4.2 保存单个问卷4.3 根据类型查询学生问卷4.4 填写语数外评价4.5 填写品德自评问卷分 五、免责说明 一、摘要 1.1 项目介绍 基于J…

数字化转型导师坚鹏:人工智能在金融机构数字化转型中的应用

人工智能在金融机构数字化转型中的应用 课程背景&#xff1a; 金融机构数字化转型离不开人工智能&#xff0c;在金融机构数字化转型中&#xff0c;人工智能起到至关重要的作用&#xff0c;很多机构存在以下问题&#xff1a; 不清楚人工智能产业对我们有什么影响&#xff1f;…

考研数学|概率应该怎么学?

考研概率论老师很多&#xff0c;但是我最推荐两个老师&#xff0c;李良和方浩 我认为李良概率论基础讲解相比于其他老师最大的优点就是&#xff0c;每一步都会耐心解释其中的逻辑。很少会像方浩老师那样过于跳跃或者频繁串联&#xff0c;这点对于零基础思维转换慢的人来说&…

Transformer self-attention源码及原理理解

自注意力计算公式&#xff1a; 在公式(1)中Q(query)是输入一个序列中的一个token&#xff0c;K(key)代表序列中所有token的特征。 可以得到当前token与序列中其他token的相关性。在论文原文中512&#xff0c;表示每个token用512维特征表示&#xff08;序列符号的embedding长度…

C语言中大小写字母如何转化

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

Linux TCP参数——tcp_adv_win_scale

文章目录 tcp_adv_win_scaleip-sysctl.txt解释buffering overhead内核缓存和应用缓存示例计算深入理解从2到1(tcp_adv_win_scale的值)总结 tcp_adv_win_scale adv-advise&#xff1b;win-window; 用于指示TCP中接收缓存比例的值。 static inline int tcp_win_from_space(int …

SpringSecurity(SpringBoot2.X版本实现)

资料来源于 SpringSecurity框架教程-Spring SecurityJWT实现项目级前端分离认证授权 侵权删 目录 介绍 快速开始 认证 认证流程 登录校验流程 SpringSecurity完整流程 认证流程详解 代码实现 准备工作 mysql mybatis-plus redis 统一返回类 核心代码 密码加密存…

Mesh网格obj文件构成解析

众所周知&#xff0c;Mesh网格是三维重建的常用手法&#xff0c;通过顶点-三角面的形式来完成对三维物体的表达。其中&#xff0c;最常见的Mesh网格文件格式就是obj格式。看起来复杂的三维形状其实在数值表示上是很简单的&#xff0c;大家跟我一起来做个小实验就好&#xff1a;…

echarts散点图自定义tooltip,鼠标放上去展示多行数据

先放效果图 如图&#xff0c;就是鼠标悬停在散点上&#xff08;这里的散点我替换成了图片&#xff0c;具体做法参考这篇文章&#xff1a;echarts散点图的散点用自定义图片替代-CSDN博客&#xff09;时&#xff0c;可以展示多行数据。之前查找资料的时候&#xff0c;很多用字符串…

练习unittest+Fixture实现

练习01 创建⼀个⽬录 case, 作⽤就是⽤来存放⽤例脚本,在这个⽬录中创建 5 个⽤例代码⽂件 , test_case1.py使⽤ TestLoader 去执⾏⽤例 将来的代码 ⽤例都是单独的⽬录中存放的 test_项⽬_模块_功能.py test_case1.py # 1. 导包 unittest import unittest # 2. 定义测试类, 只…

面试经典150题(114-118)

leetcode 150道题 计划花两个月时候刷完之未完成后转&#xff0c;今天完成了5道(114-118)150 gap 了一周&#xff0c;以后就不记录时间了。。 114.(70. 爬楼梯) 题目描述&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不…

旅行社旅游线路预定管理系统asp.net

旅行社旅游线路预定管理系统 首页 国内游 境外游 旅游景点 新闻资讯 酒店信息―留言板 后台管理 后台管理导航菜单系统管理修改密码留言管理注册会员管理基础数据设置国别设置有份设地区设置 旅行社管理友情链接管理添加友情链接友情链接管理新闻资讯管理添加新闻资讯新闻资讯管…

LayerNormalization 和 RMSNormalization的计算方法和区别

目录 问题来源 Layer Normalization 与 RMSNormalization 的详细计算方法 Layer Normalization&#xff08;层归一化&#xff09; RMSNormalization&#xff08;均方根归一化&#xff09; Layer Normalization与RMSNormalization的异同 Layer Normalization RMSNormaliza…

24 OpenCV直方图反向投影

文章目录 参考反向投影作用calceackProject 反向投影mixchannels 通道图像分割示例 参考 直方图反向投影 反向投影 反向投影是反映直方图模型在目标图像中的分布情况简单点说就是用直方图模型去目标图像中寻找是否有相似的对象。通常用HSV色彩空间的HS两个通道直方图模型 作用…

基于时空上下文(STC)的运动目标跟踪算法,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

Midjourney 和 Dall-E 的优劣势比较

Midjourney 和 Dall-E 的优劣势比较 Midjourney 和 Dall-E 都是强大的 AI 绘画工具&#xff0c;可以根据文本描述生成图像。 它们都使用深度学习模型来理解文本并将其转换为图像。 但是&#xff0c;它们在功能、可用性和成本方面存在一些差异。 Midjourney 优势: 可以生成更…

js判断对象是否有某个属性

前端判断后端接口是否返回某个字段的时候 <script>var obj { name: "John", age: 30 };console.log(obj.hasOwnProperty("name")); // 输出 trueconsole.log(obj.hasOwnProperty("email")); // 输出 falselet obj11 { name: "Joh…

9. 编程常见错误归类

编程常见错误归类 9.1 编译型错误9.2 链接型错误9.3 运行时错误 9.1 编译型错误 编译型错误⼀般都是语法错误&#xff0c;这类错误⼀般看错误信息就能找到⼀些蛛丝马迹的&#xff0c;双击错误信息也能初步的跳转到代码错误的地方或者附近。编译错误&#xff0c;随着语言的熟练…

力扣栈题:删除最外层括号

char* removeOuterParentheses(char* s) {int stack 0;int num0;for(int i0;i<strlen(s);i){if(s[i](){stack;if(stack>1){s[num]s[i];}}else{--stack;if(stack>0){s[num]s[i];}}}s[num]\0;return s; } 思路&#xff1a;迭代加栈&#xff0c;如果不是第一个的左括号则…