devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：小蓝xlanll | 2024-03-14 12:50:04

赞

踩

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

前言

DevEco Studio版本：4.0.0.600

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

其他篇文章参考：

1、WanAndroid(鸿蒙版)开发的第一篇-CSDN博客

2、WanAndroid(鸿蒙版)开发的第二篇-CSDN博客

效果

   

搜索页面实现

从效果图上可以知道整体是竖直方向（Column），包括：搜索框、热搜、搜索历史三个模块

1、搜索框

代码实现：

  1.  RelativeContainer() {
  2.             Image($r('app.media.ic_back'))
  3.                .width(32)
  4.                .height(32)
  5.                .id('imageBack')
  6.                .margin({ left: 10, right: 10 })
  7.                .alignRules({
  8.                   center: { anchor: '__container__', align: VerticalAlign.Center },
  9.                   left: { anchor: '__container__', align: HorizontalAlign.Start }
  10.                })
  11.                .onClick(() => {
  12.                   router.back()
  13.                })
  14.  
  15.             Button('搜索')
  16.                .height(35)
  17.                .fontColor(Color.White)
  18.                .id('buttonSearch')
  19.                .margin({ left: 10, right: 10 })
  20.                .alignRules({
  21.                   center: { anchor: '__container__', align: VerticalAlign.Center },
  22.                   right: { anchor: '__container__', align: HorizontalAlign.End }
  23.                })
  24.                .linearGradient({
  25.                   angle: 0,
  26.                   colors: [['#E4572F', 0], ['#D64025', 1]]
  27.                })
  28.                .onClick(() => {
  29.                   if (this.searchContent.trim().length > 0) {
  30.                      this.insertData(new SearchContentBean(this.searchContent.trim()))
  31.                      this.jumpToSearchDetails(this.searchContent)
  32.                   } else {
  33.                      promptAction.showToast({ message: '搜索内容为空' })
  34.                   }
  35.                })
  36.  
  37.             Row() {
  38.                Image($r('app.media.ic_search_8a8a8a'))
  39.                   .width(20)
  40.                   .height(20)
  41.                TextInput({ placeholder: '发现更多干货', text: '鸿洋' })
  42.                   .fontSize(16)
  43.                   .backgroundColor('#00000000')
  44.                   .enterKeyType(EnterKeyType.Search)
  45.                   .width('100%')
  46.                   .height(45)
  47.                   .flexShrink(1)
  48.                   .onChange((value: string) => {
  49.                      this.searchContent = value
  50.                   })
  51.             }
  52.             .height(45)
  53.             .padding(5)
  54.             .borderWidth(1)
  55.             .borderColor('#ED7C12')
  56.             .borderRadius(10)
  57.             .id('rowSearch')
  58.             .alignRules({
  59.                center: { anchor: '__container__', align: VerticalAlign.Center },
  60.                left: { anchor: 'imageBack', align: HorizontalAlign.End },
  61.                right: { anchor: 'buttonSearch', align: HorizontalAlign.Start }
  62.             })
  63.          }
  64.          .width('100%')
  65.          .height(70)

2、热搜

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

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

参考：OpenHarmony Flex

代码实现：

  1. @Component
  2. export struct FlowlayoutView {
  3.    @Link flowlayoutArr: string[]
  4.    private onItemClick: (item: string, index: number) => void = () => {
  5.    }
  6.  
  7.    build() {
  8.       // Flex布局， wrap为FlexWrap.Wrap为流式布局
  9.       Flex({ justifyContent: FlexAlign.Start, wrap: FlexWrap.Wrap }) {
  10.          if (this.flowlayoutArr.length > 0) {
  11.             ForEach(this.flowlayoutArr,
  12.                (item: string, index: number) => {
  13.                   Text(`${item}`)
  14.                      .fontSize(18)
  15.                      .fontColor(Color.White)
  16.                      .borderStyle(BorderStyle.Solid)
  17.                      .padding({ left: 10, right: 10, top: 6, bottom: 6 })
  18.                      .backgroundColor(Color.Pink)
  19.                      .borderRadius(5)
  20.                      .margin({ top: 10, right: 10 })
  21.                      .textOverflow({ overflow: TextOverflow.Ellipsis })
  22.                      .maxLines(2)
  23.                      .onClick(() => {
  24.                         this.onItemClick(item, index)
  25.                      })
  26.                },
  27.                (item: string) => item.toString()
  28.             )
  29.          }
  30.       }
  31.    }
  32. }

3、搜索历史

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

数据库实现：

参考BaseLibrary 中database里面的代码

代码实现：

  1. List() {
  2.    ForEach(this.searchHistoryList, (item, index) => {
  3.       ListItem() {
  4.          Row() {
  5.             Image($r('app.media.searchHistory'))
  6.                .width(24)
  7.                .height(24)
  8.                .margin({ left: 20 })
  9.             Text(item)
  10.                .fontColor(this.getTextColor(index))
  11.                .fontSize(20)
  12.                .margin({ right: 20 })
  13.          }.width('100%')
  14.          .padding({ top: 15, bottom: 15 })
  15.          .justifyContent(FlexAlign.SpaceBetween)
  16.       }.swipeAction({ end: this.itemEnd(index) })
  17.       .onClick(() => {
  18.          this.jumpToSearchDetails(item)
  19.       })
  20.    })
  21. }
  22. .flexShrink(1)
  23. .width('100%')
  24. .height('100%')

4、详细代码

  1. import router from '@ohos.router'
  2. import promptAction from '@ohos.promptAction'
  3. import { FlowlayoutView, HttpManager, RequestMethod, SearchContentBean, SQLManager } from '@app/BaseLibrary'
  4. import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils'
  5. import { SearchHotKey } from '../../bean/search/SearchHotKeyBean'
  6.  
  7. const TAG = 'SearchPage--- ';
  8.  
  9. @Entry
  10. @Component
  11. struct SearchPage {
  12.   private sqlManager = new SQLManager();
  13.   @State searchContent: string = ''
  14.   @State searchHotKeyArr: string[] = []
  15.   @State searchHistoryList: string[] = []
  16.   @State searchContentBeanList: SearchContentBean[] = []
  17.  
  18.   aboutToAppear() {
  19.     this.getSearchHotKeyData()
  20.   }
  21.  
  22.   onPageShow() {
  23.     this.queryAllData()
  24.   }
  25.  
  26.   private getSearchHotKeyData() {
  27.     HttpManager.getInstance()
  28.       .request<SearchHotKey>({
  29.         method: RequestMethod.GET,
  30.         url: `https://www.wanandroid.com/hotkey/json`, //wanAndroid的API：搜索热词
  31.       })
  32.       .then((result: SearchHotKey) => {
  33.         LogUtils.info(TAG, "result: " + JSON.stringify(result))
  34.         if (result.errorCode == 0) {
  35.           for (let i = 0; i < result.data.length; i++) {
  36.             this.searchHotKeyArr = this.searchHotKeyArr.concat(result.data[i].name)
  37.           }
  38.         }
  39.         LogUtils.info(TAG, "添加后的searchHotKeyArr: " + JSON.stringify(this.searchHotKeyArr))
  40.       })
  41.       .catch((error) => {
  42.         LogUtils.info(TAG, "error: " + JSON.stringify(error))
  43.       })
  44.   }
  45.  
  46.   build() {
  47.     Column() {
  48.       RelativeContainer() {
  49.         Image($r('app.media.ic_back'))
  50.           .width(32)
  51.           .height(32)
  52.           .id('imageBack')
  53.           .margin({ left: 10, right: 10 })
  54.           .alignRules({
  55.             center: { anchor: '__container__', align: VerticalAlign.Center },
  56.             left: { anchor: '__container__', align: HorizontalAlign.Start }
  57.           })
  58.           .onClick(() => {
  59.             router.back()
  60.           })
  61.  
  62.         Button('搜索')
  63.           .height(35)
  64.           .fontColor(Color.White)
  65.           .id('buttonSearch')
  66.           .margin({ left: 10, right: 10 })
  67.           .alignRules({
  68.             center: { anchor: '__container__', align: VerticalAlign.Center },
  69.             right: { anchor: '__container__', align: HorizontalAlign.End }
  70.           })
  71.           .linearGradient({
  72.             angle: 0,
  73.             colors: [['#E4572F', 0], ['#D64025', 1]]
  74.           })
  75.           .onClick(() => {
  76.             if (this.searchContent.trim().length > 0) {
  77.               this.insertData(new SearchContentBean(this.searchContent.trim()))
  78.               this.jumpToSearchDetails(this.searchContent)
  79.             } else {
  80.               promptAction.showToast({ message: '搜索内容为空' })
  81.             }
  82.           })
  83.  
  84.         Row() {
  85.           Image($r('app.media.ic_search_8a8a8a'))
  86.             .width(20)
  87.             .height(20)
  88.           TextInput({ placeholder: '发现更多干货', text: '鸿洋' })
  89.             .fontSize(16)
  90.             .backgroundColor('#00000000')
  91.             .enterKeyType(EnterKeyType.Search)
  92.             .width('100%')
  93.             .height(45)
  94.             .flexShrink(1)
  95.             .onChange((value: string) => {
  96.               this.searchContent = value
  97.             })
  98.         }
  99.         .height(45)
  100.         .padding(5)
  101.         .borderWidth(1)
  102.         .borderColor('#ED7C12')
  103.         .borderRadius(10)
  104.         .id('rowSearch')
  105.         .alignRules({
  106.           center: { anchor: '__container__', align: VerticalAlign.Center },
  107.           left: { anchor: 'imageBack', align: HorizontalAlign.End },
  108.           right: { anchor: 'buttonSearch', align: HorizontalAlign.Start }
  109.         })
  110.       }
  111.       .width('100%')
  112.       .height(70)
  113.  
  114.       Divider().strokeWidth(1).color('#F1F3F5')
  115.  
  116.       Text('热搜')
  117.         .fontSize(20)
  118.         .fontColor('#D64025')
  119.         .margin({ left: 15, right: 15, top: 10 })
  120.         .alignSelf(ItemAlign.Start)
  121.  
  122.       //自定义流式布局
  123.       FlowlayoutView({
  124.         flowlayoutArr: this.searchHotKeyArr,
  125.         onItemClick: (item, index) => {
  126.           LogUtils.info(TAG, "Index------   点击了：index： " + index + " item: " + item)
  127.           this.insertData(new SearchContentBean(item))
  128.           this.jumpToSearchDetails(item)
  129.         }
  130.       }).margin({ left: 20, right: 20 })
  131.  
  132.       Row() {
  133.         Text('搜索历史')
  134.           .fontSize(20)
  135.           .fontColor('#1296db')
  136.           .margin({ left: 15, right: 15, top: 15, bottom: 15 })
  137.           .alignSelf(ItemAlign.Start)
  138.  
  139.         Row() {
  140.           Image($r('app.media.deleteAll'))
  141.             .width(22)
  142.             .height(22)
  143.           Text('清空')
  144.             .fontColor(Color.Black)
  145.             .margin({ left: 5 })
  146.             .fontSize(20)
  147.         }.margin({ left: 15, right: 15, top: 15, bottom: 15 })
  148.         .onClick(() => {
  149.           this.deleteAllData()
  150.         })
  151.       }
  152.       .width('100%')
  153.       .justifyContent(FlexAlign.SpaceBetween)
  154.  
  155.       List() {
  156.         ForEach(this.searchHistoryList, (item, index) => {
  157.           ListItem() {
  158.             Row() {
  159.               Image($r('app.media.searchHistory'))
  160.                 .width(24)
  161.                 .height(24)
  162.                 .margin({ left: 20 })
  163.               Text(item)
  164.                 .fontColor(this.getTextColor(index))
  165.                 .fontSize(20)
  166.                 .margin({ right: 20 })
  167.             }.width('100%')
  168.             .padding({ top: 15, bottom: 15 })
  169.             .justifyContent(FlexAlign.SpaceBetween)
  170.           }.swipeAction({ end: this.itemEnd(index) })
  171.           .onClick(() => {
  172.             this.jumpToSearchDetails(item)
  173.           })
  174.         })
  175.       }
  176.       .flexShrink(1)
  177.       .width('100%')
  178.       .height('100%')
  179.     }
  180.     .width('100%')
  181.     .height('100%')
  182.     .backgroundColor(Color.White)
  183.   }
  184.  
  185.   @Builder
  186.   itemEnd(index: number) { // 侧滑后尾端出现的组件
  187.     Image($r('app.media.deleteAll'))
  188.       .width(30)
  189.       .height(30)
  190.       .margin(10)
  191.       .onClick(() => {
  192.         this.deleteData(this.searchContentBeanList[index])
  193.         this.searchHistoryList.splice(index, 1);
  194.         this.searchContentBeanList.splice(index, 1);
  195.       })
  196.   }
  197.  
  198.   /**
  199.    * 跳转到搜索详情页
  200.    */
  201.   private jumpToSearchDetails(content: string) {
  202.     router.pushUrl({
  203.       url: 'pages/search/SearchDetailsPage',
  204.       params: {
  205.         searchContent: content
  206.       }
  207.     }, router.RouterMode.Single)
  208.   }
  209.  
  210.   private deleteData(searchContentBean: SearchContentBean) {
  211.     LogUtils.info("Rdb-----   deleteData result: " + searchContentBean.id + "   searchContent: " + searchContentBean.searchContent)
  212.     this.sqlManager.deleteData(searchContentBean, (result) => {
  213.       LogUtils.info("Rdb-----   删除 result: " + result)
  214.     })
  215.   }
  216.  
  217.   /**
  218.    * 删除所有数据
  219.    */
  220.   private deleteAllData() {
  221.     if (this.searchHistoryList.length <= 0) {
  222.       promptAction.showToast({ message: '没有可清除的数据' })
  223.       return
  224.     }
  225.     this.sqlManager.deleteDataAll((result) => {
  226.       LogUtils.info(TAG, "Rdb-----   删除所有 result: " + result)
  227.       if (result) {
  228.         promptAction.showToast({ message: '清除完成' })
  229.         this.searchHistoryList = []
  230.       }
  231.     })
  232.   }
  233.  
  234.   /**
  235.    * 查询所有数据
  236.    */
  237.   private queryAllData() {
  238.     this.sqlManager.getRdbStore(() => {
  239.       this.sqlManager.query((result: Array<SearchContentBean>) => {
  240.         LogUtils.info(TAG, "Rdb-----   查询 result: " + JSON.stringify(result))
  241.         this.searchContentBeanList = result
  242.         this.searchHistoryList = []
  243.         for (let i = 0; i < result.length; i++) {
  244.           this.searchHistoryList.push(result[i].searchContent)
  245.         }
  246.       })
  247.     })
  248.   }
  249.  
  250.   /**
  251.    * 插入数据
  252.    */
  253.   private insertData(searchContentBean: SearchContentBean) {
  254.     this.sqlManager.insertData(searchContentBean, (id: number) => {
  255.       LogUtils.info(TAG, "Rdb-----  result  插入 id: " + id)
  256.       searchContentBean.id = id
  257.       if (id >= 0) { //id < 0 表示插入数据失败
  258.       }
  259.     })
  260.   }
  261.  
  262.   private getTextColor(index: number): ResourceColor {
  263.     if (index % 3 == 0) {
  264.       return Color.Orange
  265.     } else if (index % 3 == 1) {
  266.       return Color.Blue
  267.     } else if (index % 3 == 2) {
  268.       return Color.Pink
  269.     }
  270.     return Color.Black
  271.   }
  272. }

搜索详情页面实现

代码实现：

  1. import router from '@ohos.router';
  2. import {
  3.    Constants,
  4.    HtmlUtils,
  5.    HttpManager,
  6.    LoadingDialog,
  7.    RefreshController,
  8.    RefreshListView,
  9.    RequestMethod
  10. } from '@app/BaseLibrary';
  11. import LogUtils from '@app/BaseLibrary/src/main/ets/utils/LogUtils';
  12. import { SearchDetailsItemBean } from '../../bean/search/SearchDetailsItemBean';
  13. import { SearchDetailsBean } from '../../bean/search/SearchDetailsBean';
  14. import promptAction from '@ohos.promptAction';
  15. import { AppTitleBar } from '../../widget/AppTitleBar';
  16.  
  17. const TAG = 'SearchDetailsPage--- ';
  18.  
  19. @Entry
  20. @Component
  21. struct SearchDetailsPage {
  22.    @State searchContent: string = router.getParams()?.['searchContent'];
  23.    @State controller: RefreshController = new RefreshController()
  24.    @State searchDetailsListData: Array<SearchDetailsItemBean> = [];
  25.    @State pageNum: number = 0
  26.    @State isRefresh: boolean = true
  27.    @State userName: string = ''
  28.    @State token_pass: string = ''
  29.  
  30.    aboutToAppear() {
  31.       LogUtils.info(TAG, " aboutToAppear: " + this.searchContent)
  32.       if (AppStorage.Has(Constants.APPSTORAGE_USERNAME)) {
  33.          this.userName = AppStorage.Get(Constants.APPSTORAGE_USERNAME) as string
  34.       }
  35.       if (AppStorage.Has(Constants.APPSTORAGE_TOKEN_PASS)) {
  36.          this.token_pass = AppStorage.Get(Constants.APPSTORAGE_TOKEN_PASS) as string
  37.       }
  38.       this.dialogController.open()
  39.       this.getSearchDetailsData()
  40.    }
  41.  
  42.    private getSearchDetailsData() {
  43.       HttpManager.getInstance()
  44.          .request<SearchDetailsBean>({
  45.             method: RequestMethod.POST,
  46.             header: {
  47.                "Content-Type": "application/json",
  48.                "Cookie": `loginUserName=${this.userName}; token_pass=${this.token_pass}`
  49.             },
  50.             url: `https://www.wanandroid.com/article/query/${this.pageNum}/json/?k=${encodeURIComponent(this.searchContent)}`, //wanAndroid的API：搜索  ?k=${this.searchContent}
  51.          })
  52.          .then((result: SearchDetailsBean) => {
  53.             LogUtils.info(TAG, "result: " + JSON.stringify(result))
  54.             if (this.isRefresh) {
  55.                this.controller.finishRefresh()
  56.             } else {
  57.                this.controller.finishLoadMore()
  58.             }
  59.             if (result.errorCode == 0) {
  60.                if (this.isRefresh) {
  61.                   this.searchDetailsListData = result.data.datas
  62.                } else {
  63.                   if (result.data.datas.length > 0) {
  64.                      this.searchDetailsListData = this.searchDetailsListData.concat(result.data.datas)
  65.                   } else {
  66.                      promptAction.showToast({ message: '没有更多数据啦！' })
  67.                   }
  68.                }
  69.             }
  70.             this.dialogController.close()
  71.          })
  72.          .catch((error) => {
  73.             LogUtils.info(TAG, "error: " + JSON.stringify(error))
  74.             if (this.isRefresh) {
  75.                this.controller.finishRefresh()
  76.             } else {
  77.                this.controller.finishLoadMore()
  78.             }
  79.             this.dialogController.close()
  80.          })
  81.    }
  82.  
  83.    build() {
  84.       Column() {
  85.          AppTitleBar({ title: this.searchContent })
  86.  
  87.          RefreshListView({
  88.             list: this.searchDetailsListData,
  89.             controller: this.controller,
  90.             isEnableLog: true,
  91.             paddingRefresh: { left: 10, right: 10, top: 5, bottom: 5 },
  92.             refreshLayout: (item: SearchDetailsItemBean, index: number): void => this.itemLayout(item, index),
  93.             onItemClick: (item: SearchDetailsItemBean, index: number) => {
  94.                LogUtils.info(TAG, "点击了：index： " + index + " item: " + item)
  95.                router.pushUrl({
  96.                   url: 'pages/WebPage',
  97.                   params: {
  98.                      title: item.title,
  99.                      uriLink: item.link
  100.                   }
  101.                }, router.RouterMode.Single)
  102.             },
  103.             onRefresh: () => {
  104.                //下拉刷新
  105.                this.isRefresh = true
  106.                this.pageNum = 0
  107.                this.getSearchDetailsData()
  108.             },
  109.             onLoadMore: () => {
  110.                //上拉加载
  111.                this.isRefresh = false
  112.                this.pageNum++
  113.                this.getSearchDetailsData()
  114.             }
  115.          }).flexShrink(1)
  116.  
  117.       }
  118.       .width('100%')
  119.       .height('100%')
  120.       .backgroundColor('#F1F3F5')
  121.    }
  122.  
  123.    @Builder
  124.    itemLayout(item: SearchDetailsItemBean, index: number) {
  125.       RelativeContainer() {
  126.          //作者或分享人
  127.          Text(item.author.length > 0 ? "作者：" + item.author : "分享人：" + item.shareUser)
  128.             .fontColor('#666666')
  129.             .fontSize(14)
  130.             .id("textAuthor")
  131.             .alignRules({
  132.                top: { anchor: '__container__', align: VerticalAlign.Top },
  133.                left: { anchor: '__container__', align: HorizontalAlign.Start }
  134.             })
  135.  
  136.          Text(item.superChapterName + '/' + item.chapterName)
  137.             .fontColor('#1296db')
  138.             .fontSize(14)
  139.             .id("textChapterName")
  140.             .alignRules({
  141.                top: { anchor: '__container__', align: VerticalAlign.Top },
  142.                right: { anchor: '__container__', align: HorizontalAlign.End }
  143.             })
  144.  
  145.          //标题
  146.          Text(HtmlUtils.formatStr(item.title))
  147.             .fontColor('#333333')
  148.             .fontWeight(FontWeight.Bold)
  149.             .maxLines(2)
  150.             .textOverflow({
  151.                overflow: TextOverflow.Ellipsis
  152.             })
  153.             .fontSize(20)
  154.             .margin({ top: 10 })
  155.             .id("textTitle")
  156.             .alignRules({
  157.                top: { anchor: 'textAuthor', align: VerticalAlign.Bottom },
  158.                left: { anchor: '__container__', align: HorizontalAlign.Start }
  159.             })
  160.  
  161.          //更新时间
  162.          Text("时间：" + item.niceDate)
  163.             .fontColor('#666666')
  164.             .fontSize(14)
  165.             .id("textNiceDate")
  166.             .alignRules({
  167.                bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
  168.                left: { anchor: '__container__', align: HorizontalAlign.Start }
  169.             })
  170.       }
  171.       .width('100%')
  172.       .height(120)
  173.       .padding(10)
  174.       .borderRadius(10)
  175.       .backgroundColor(Color.White)
  176.    }
  177.  
  178.    private dialogController = new CustomDialogController({
  179.       builder: LoadingDialog(),
  180.       customStyle: true,
  181.       alignment: DialogAlignment.Center, // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示
  182.    })
  183. }

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/234555
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号