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

鸿蒙App开发-网络请求-下拉刷新三方库-底部Tab栏-滚动组件(含源码）_鸿蒙app开发 harmonyos:网络请求+三

作者：weixin_40725706 | 2024-03-15 21:32:19

赞

踩

鸿蒙app开发 harmonyos:网络请求+三

本文介绍一个基于鸿蒙ArkTS开发的App，是一个包含轮播图、文章列表和 Web 页面等功能的多页面应用。

本文主要内容包括：

一、效果图

首页
详情页

  

二、内容简介

1.底部Tab栏和两个页面

        App底部是一个TabBar，点击TabBar可以切换上面的页面。共包含两个页面，一个是“首页” ,另一个是“空白页”。

2.顶部Banner

        App顶部是一个Banner，也叫轮播图，点击轮播图可以跳转到对应的详情页面。

3.List组件

        轮播图下方是一个List组件，点击其中某一项可以跳转详情页面。

4.WebView

使用系统组件@ohos.web.webview 显示网页。同时，此详情页面顶部有一个标题栏，用于显示返回键和标题。

三、实现说明

1.主界面

首先实现主界面，包含一个TabBar和上面的两个页面，以下是主界面代码：

  1. import Constants from '../Constants/Constants'
  2. import Home from './Home';
  3. import EmptyPage from './EmptyPage';
  4. @Entry
  5. @Component
  6. struct Index {
  7.   @State currentTabIndex: number = 0;
  8.   tabsController: TabsController;
  9.   aboutToAppear(){
  10.     this.tabsController = new TabsController();
  11.   }
  12.   @Builder TabBuilder(title: string, index: number, icon: Resource) {
  13.     Column() {
  14.       Image(icon)
  15.         .width($r('app.float.mainPage_baseTab_size'))
  16.         .height($r('app.float.mainPage_baseTab_size'))
  17.         .fillColor(this.getTabBarColor(index))
  18.       Text(title)
  19.         .margin({ top: $r('app.float.mainPage_baseTab_top') })
  20.         .fontSize($r('app.float.main_tab_fontSize'))
  21.         .fontColor(this.getTabBarColor(index))
  22.     }
  23.     .justifyContent(FlexAlign.Center)
  24.     .height($r('app.float.mainPage_barHeight'))
  25.     .width(Constants.FULL_PARENT)
  26.     .onClick(() => {
  27.       this.currentTabIndex = index;
  28.       this.tabsController.changeIndex(this.currentTabIndex)
  29.     })
  30.   }
  31.  
  32.   // 获取选项卡栏颜色
  33.   getTabBarColor(index: number){
  34.     if(index == this.currentTabIndex){
  35.       return Color.Blue;
  36.     }else{
  37.       return Color.Gray;
  38.     }
  39.   }
  40.  
  41.   build() {
  42.     Tabs({
  43.       barPosition: BarPosition.End,
  44.       controller: this.tabsController
  45.     }) {
  46.       // 首页
  47.       TabContent() {
  48.         Home()
  49.       }
  50.       .padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') })
  51.       .backgroundColor($r('app.color.mainPage_backgroundColor'))
  52.       .tabBar(this.TabBuilder(Constants.HOME_TITLE, Constants.HOME_TAB_INDEX
  53.         , $r('app.media.ic_bottom_home')))
  54.  
  55.       // 项目
  56.       TabContent() {
  57.         EmptyPage()
  58.       }
  59.       .padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') })
  60.       .backgroundColor($r('app.color.mainPage_backgroundColor'))
  61.       .tabBar(this.TabBuilder(Constants.EMPTY_TITLE, Constants.EMPTY_TAB_INDEX
  62.         , $r('app.media.ic_bottom_empty')))
  63.     }
  64.     .width(Constants.FULL_PARENT)
  65.     .backgroundColor(Color.White)
  66.     .barHeight($r('app.float.mainPage_barHeight'))
  67.     .barMode(BarMode.Fixed)
  68.     .onChange((index: number) => {
  69.       this.currentTabIndex = index;
  70.     })
  71.   }
  72. }
2.首页

本文主要实现的就是首页，用竖向列包含了Banner组件和ArticleList组件，代码如下：

  1. @Component
  2. export default struct Home {
  3.   build() {
  4.     Column() {
  5.       Banner();
  6.       ArticleList();
  7.     }
  8.   }
  9. }

其中Banner组件代码如下，代码中有具体实现的解释：

  1. // 标记为组件
  2. @Component
  3.   // 导出名为 Banner 的结构体
  4. export default struct Banner {
  5.   // Swiper 控制器
  6.   swiperController: SwiperController = new SwiperController();
  7.   // 轮播图数据
  8.   @State bannerData: HomeBannerItemBean[] = [];
  9.  
  10.   // 生命周期钩子，在即将显示时调用
  11.   aboutToAppear() {
  12.     // 获取轮播图数据
  13.     this.getData();
  14.   }
  15.  
  16.   // 异步获取轮播图数据
  17.   async getData(){
  18.     await HomeViewModel.getHomeBanner(Constants.GET_HOME_BANNER).then((data: HomeBannerItemBean[]) => {
  19.       // 将获取到的数据赋值给轮播图数据
  20.       this.bannerData = data;
  21.     }).catch((err: string | Resource) => {
  22.       // 如果发生错误，显示提示消息
  23.       promptAction.showToast({
  24.         message: err,
  25.         duration: Constants.ANIMATION_DURATION
  26.       });
  27.     });
  28.   }
  29.  
  30.   // 构建界面
  31.   build() {
  32.     // 垂直排列的列
  33.     Column() {
  34.       // 如果有轮播图数据且数据长度大于 0
  35.       if(this.bannerData && this.bannerData.length > 0){
  36.         // 使用 Swiper 组件创建轮播图
  37.         Swiper(this.swiperController) {
  38.           // 遍历轮播图数据
  39.           ForEach(this.bannerData, (banner: HomeBannerItemBean) => {
  40.             // 显示图片，并设置圆角和点击事件
  41.             Image(banner.imagePath).borderRadius($r('app.float.home_swiper_borderRadius')).onClick(() => {
  42.               // 点击事件：跳转到 Web 页面，并传递标题和链接参数
  43.               router.pushUrl({
  44.                 url: 'pages/WebPage',
  45.                 params: {
  46.                   title: banner.title,
  47.                   src: banner.url
  48.                 }
  49.               }, router.RouterMode.Single)
  50.             })
  51.           }, (img: Resource) => JSON.stringify(img.id))
  52.         }
  53.         // 设置轮播图的外边距、自动播放、宽度和高度
  54.         .margin({top: $r('app.float.home_swiper_margin')})
  55.         .autoPlay(true)
  56.         .width(Constants.FULL_PARENT)
  57.         .height(200)
  58.       }
  59.     }
  60.   }
  61. }

那么在Banner组件下方的ArticleList组件，代码如下：

  1. // 标记为组件
  2. @Component
  3. // 导出名为 ArticleList 的结构体
  4. export default struct ArticleList {
  5.   // 是否还有更多数据
  6.   hasMore: boolean = true;
  7.   // 当前页码
  8.   currentPage: number = 0;
  9.   // 每页数据量
  10.   pageSize: number = 30;
  11.   // 文章数据数组
  12.   @State articleData: ArticleItemData[] = [];
  13.   // 需绑定列表或宫格组件的滚动控制器
  14.   private scroller: Scroller = new Scroller();
  15.  
  16.   // 生命周期钩子，在即将显示时调用
  17.   aboutToAppear() {
  18.     // 获取文章列表数据，参数为 true 表示重置数据
  19.     this.getArticleList(true);
  20.   }
  21.  
  22.   // @Builder 修饰的私有方法，用于创建列表视图
  23.   @Builder
  24.   private getListView() {
  25.     // 使用 List 组件创建列表
  26.     List({ space: 10, scroller: this.scroller }) {
  27.       // 遍历文章数据
  28.       ForEach(this.articleData, (item: ArticleItemData) => {
  29.         // 使用 ListItem 创建列表项
  30.         ListItem() {
  31.           // 使用 Flex 创建布局
  32.           Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, }) {
  33.             // 作者和发布时间
  34.             Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, }) {
  35.               Text(item.author)
  36.                 .fontSize(13)
  37.               Text(Util.dateTime(item.publishTime))
  38.                 .fontSize(13)
  39.             }.margin({ top: 10, left: 30, right: 30 })
  40.  
  41.             // 文章标题
  42.             Text(item.title)
  43.               .width('100%')
  44.               .fontSize(20)
  45.               .textAlign(TextAlign.Center)
  46.               .fontWeight(FontWeight.Bold)
  47.               .maxLines(1)
  48.               .textOverflow({ overflow: TextOverflow.Ellipsis })
  49.               .margin({ left: 10, right: 10 })
  50.  
  51.             // 文章分类
  52.             Text(item.chapterName)
  53.               .fontSize(13)
  54.               .textAlign(TextAlign.Start)
  55.               .width('100%')
  56.               .margin({ left: 30, bottom: 10 })
  57.           }.borderRadius($r('app.float.home_list_borderRadius'))
  58.           .backgroundColor(Color.White)
  59.         }.onClick(() => {
  60.           // 点击列表项跳转到 Web 页面，传递标题和链接参数
  61.           router.pushUrl({
  62.             url: 'pages/WebPage',
  63.             params: {
  64.               title: item.title,
  65.               src: item.link
  66.             }
  67.           }, router.RouterMode.Single)
  68.         })
  69.       })
  70.     }
  71.     // 设置列表的圆角
  72.     .borderRadius($r('app.float.home_list_borderRadius'))
  73.     // .divider({ strokeWidth: 1, color: 0x222222 })
  74.     // 设置列表的边缘效果为无效果
  75.     .edgeEffect(EdgeEffect.None)
  76.     // 设置列表宽度和高度为100%
  77.     .width('100%')
  78.     .height('100%')
  79.   }
  80.  
  81.   // 异步获取文章列表数据
  82.   async getArticleList(reset: boolean) {
  83.     await HomeViewModel.getHomeArticleList(this.currentPage, this.pageSize, Constants.GET_HOME_ARTICLE_LIST)
  84.       .then((data: ArticleDataBean) => {
  85.         // 判断是否还有更多数据
  86.         if (data.curPage < data.pageCount) {
  87.           this.currentPage++;
  88.           this.hasMore = true;
  89.         } else {
  90.           this.hasMore = false;
  91.         }
  92.         // 根据参数判断是否重置数据
  93.         if (reset) {
  94.           this.articleData = data.datas;
  95.         } else {
  96.           this.articleData = this.articleData.concat(data.datas);
  97.         }
  98.       }).catch((err: string | Resource) => {
  99.         // 显示错误提示
  100.         promptAction.showToast({ message: err });
  101.       })
  102.   }
  103.  
  104.   // 构建界面
  105.   build() {
  106.     // 使用 Column 组件创建垂直布局
  107.     Column() {
  108.       // 使用 PullToRefresh 组件实现下拉刷新和上拉加载
  109.       PullToRefresh({
  110.         customRefresh: null,
  111.         customLoad: null,
  112.         data: $articleData, // 数据源数组
  113.         scroller: this.scroller, // 控制器，负责关闭下拉和上拉
  114.         customList: () => {
  115.           // 调用 getListView 方法创建列表视图
  116.           this.getListView();
  117.         },
  118.         onRefresh: () => {
  119.           return new Promise<string>((resolve, reject) => {
  120.             // 下拉刷新成功后解析数据，重新获取文章列表数据
  121.             resolve('下拉刷新成功')
  122.             this.getArticleList(true);
  123.           });
  124.         },
  125.         onLoadMore: () => {
  126.           // 上拉加载成功后解析数据，继续获取更多文章列表数据
  127.           return new Promise<string>((resolve, reject) => {
  128.             resolve('上拉加载成功')
  129.             this.getArticleList(false);
  130.           });
  131.         }
  132.       })
  133.     }.backgroundColor("#efefef") // 设置背景颜色
  134.   }
  135. }

这个文章列表组件，使用了 PullToRefresh 组件和 List 组件展示通过网络获取的文章列表数据，并且点击其中每一项都可以跳转详情页面，使用到的系统方法是router.pushUrl。

3.网络请求

其中网络请求代码如下：

  1. /**
  2.  * 发起 HTTP GET 请求的函数
  3.  * @param url 请求的 URL 地址
  4.  * @param extraData 额外的请求数据，可选参数
  5.  * @returns 返回 Promise 对象，包含 ResponseResult 数据
  6.  */
  7. export function httpRequestGet(url: string, extraData?: Record<string, any>): Promise<ResponseResult> {
  8.   // 创建 HTTP 请求实例
  9.   let httpRequest = http.createHttp();
  10.   
  11.   // 发起 HTTP GET 请求
  12.   let responseResult = httpRequest.request(url, {
  13.     method: http.RequestMethod.GET,
  14.     readTimeout: Constants.HTTP_READ_TIMEOUT,
  15.     header: {
  16.       'Content-Type': ContentType.JSON
  17.     },
  18.     connectTimeout: Constants.HTTP_READ_TIMEOUT,
  19.     extraData: extraData || {}  // 使用 extraData 参数，如果不存在则传递一个空对象
  20.   });
  21.  
  22.   // 创建用于存储响应数据的对象
  23.   let serverData: ResponseResult = new ResponseResult();
  24.  
  25.   // 处理返回的数据并返回结果
  26.   return responseResult.then((value: http.HttpResponse) => {
  27.     // 检查 HTTP 响应码是否为成功状态（200）
  28.     if (value.responseCode === Constants.HTTP_CODE_200) {
  29.       // 解析返回的数据
  30.       let result = `${value.result}`;
  31.       let resultJson: ResponseResult = JSON.parse(result);
  32.       
  33.       // 检查服务器返回的错误码是否为成功状态
  34.       if (resultJson.errorCode === Constants.SERVER_CODE_SUCCESS) {
  35.         // 将返回的数据赋值给 serverData 对象
  36.         serverData.data = resultJson.data;
  37.       }
  38.       // 将服务器返回的错误码和错误消息赋值给 serverData 对象
  39.       serverData.errorCode = resultJson.errorCode;
  40.       serverData.errorMsg = resultJson.errorMsg;
  41.     } else {
  42.       // 设置错误消息，包含 HTTP 错误码
  43.       serverData.errorMsg = `${$r('app.string.http_error_message')}&${value.responseCode}`;
  44.     }
  45.     // 返回处理后的 serverData 对象
  46.     return serverData;
  47.   }).catch((err) => {
  48.     // 捕获异常，打印错误信息，并设置错误消息
  49.     console.log("error:" + JSON.stringify(err));
  50.     serverData.errorMsg = $r('app.string.http_error_message');
  51.     // 返回处理后的 serverData 对象
  52.     return serverData;
  53.   });
  54. }
4.详情页面

详情页面是通过webview来展示网页实现的，代码如下：

  1. // 标记为入口
  2. @Entry
  3. // 标记为组件
  4. @Component
  5. // Web 页面结构体
  6. struct WebPage {
  7.   // 从路由获取参数中的 'src'，并存储到状态中
  8.   @State src: string = router.getParams()?.['src'];
  9.   // 从路由获取参数中的 'title'，并存储到状态中
  10.   @State title: string = router.getParams()?.['title'];
  11.  
  12.   // Web 页面控制器
  13.   controller: web_webview.WebviewController = new web_webview.WebviewController();
  14.  
  15.   // 构建界面
  16.   build() {
  17.     // 使用 Column 组件创建垂直布局
  18.     Column() {
  19.       // 页面标题组件
  20.       PageTitle({ titleName: this.title })
  21.  
  22.       // 分隔线
  23.       Divider()
  24.         .strokeWidth('1px')
  25.         .color($r('sys.color.ohos_id_color_list_separator'))
  26.  
  27.       // Web 组件，加载指定的网址，并使用控制器进行交互
  28.       Web({
  29.         src: this.src, controller: this.controller
  30.       }).javaScriptAccess(true)
  31.     }
  32.   }
  33. }
  34.  
  35. // 页面标题组件结构体
  36. @Component
  37. struct PageTitle {
  38.   // 标题名称
  39.   private titleName: string
  40.  
  41.   // 构建界面
  42.   build() {
  43.     // 使用 Row 组件创建水平布局
  44.     Row() {
  45.       // 返回按钮图标
  46.       Image($r('app.media.back'))
  47.         .width(20)
  48.         .height(20)
  49.         .onClick(() => {
  50.           // 点击返回按钮，触发路由返回操作
  51.           router.back()
  52.         })
  53.  
  54.       // 标题文本
  55.       Text(this.titleName)
  56.         .fontSize(Constants.PAGE_TITLE_TEXT_SIZE)
  57.         .width(Constants.PAGE_TITLE_TEXT_WIDTH)
  58.         .maxLines(Constants.PAGE_TITLE_TEXT_MAX_LINES)
  59.         .textOverflow({ overflow: TextOverflow.Ellipsis })
  60.         .margin({ left: 20 })
  61.     }
  62.     // 设置整体内边距
  63.     .padding(12)
  64.     // 设置整体宽度为100%
  65.     .width('100%')
  66.   }
  67. }

四、源码地址

WanAndroid: 基于鸿蒙ArkTS语言实现的WanAndroid App

如果觉得本文不错的话，帮忙点个赞吧~感谢~

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

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

  

闽ICP备14008679号