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

本文主要内容包括：

一、效果图

  

二、内容简介

1.底部Tab栏和两个页面

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

2.顶部Banner

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

3.List组件

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

4.WebView

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

三、实现说明

1.主界面

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

import Constants from '../Constants/Constants'
import Home from './Home';
import EmptyPage from './EmptyPage';
@Entry
@Component
struct Index {@State currentTabIndex: number = 0;tabsController: TabsController;aboutToAppear(){this.tabsController = new TabsController();}@Builder TabBuilder(title: string, index: number, icon: Resource) {Column() {Image(icon).width($r('app.float.mainPage_baseTab_size')).height($r('app.float.mainPage_baseTab_size')).fillColor(this.getTabBarColor(index))Text(title).margin({ top: $r('app.float.mainPage_baseTab_top') }).fontSize($r('app.float.main_tab_fontSize')).fontColor(this.getTabBarColor(index))}.justifyContent(FlexAlign.Center).height($r('app.float.mainPage_barHeight')).width(Constants.FULL_PARENT).onClick(() => {this.currentTabIndex = index;this.tabsController.changeIndex(this.currentTabIndex)})}// 获取选项卡栏颜色getTabBarColor(index: number){if(index == this.currentTabIndex){return Color.Blue;}else{return Color.Gray;}}build() {Tabs({barPosition: BarPosition.End,controller: this.tabsController}) {// 首页TabContent() {Home()}.padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') }).backgroundColor($r('app.color.mainPage_backgroundColor')).tabBar(this.TabBuilder(Constants.HOME_TITLE, Constants.HOME_TAB_INDEX, $r('app.media.ic_bottom_home')))// 项目TabContent() {EmptyPage()}.padding({ left: $r('app.float.mainPage_padding'), right: $r('app.float.mainPage_padding') }).backgroundColor($r('app.color.mainPage_backgroundColor')).tabBar(this.TabBuilder(Constants.EMPTY_TITLE, Constants.EMPTY_TAB_INDEX, $r('app.media.ic_bottom_empty')))}.width(Constants.FULL_PARENT).backgroundColor(Color.White).barHeight($r('app.float.mainPage_barHeight')).barMode(BarMode.Fixed).onChange((index: number) => {this.currentTabIndex = index;})}
}

2.首页

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

@Component
export default struct Home {build() {Column() {Banner();ArticleList();}}
}

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

// 标记为组件
@Component// 导出名为 Banner 的结构体
export default struct Banner {// Swiper 控制器swiperController: SwiperController = new SwiperController();// 轮播图数据@State bannerData: HomeBannerItemBean[] = [];// 生命周期钩子，在即将显示时调用aboutToAppear() {// 获取轮播图数据this.getData();}// 异步获取轮播图数据async getData(){await HomeViewModel.getHomeBanner(Constants.GET_HOME_BANNER).then((data: HomeBannerItemBean[]) => {// 将获取到的数据赋值给轮播图数据this.bannerData = data;}).catch((err: string | Resource) => {// 如果发生错误，显示提示消息promptAction.showToast({message: err,duration: Constants.ANIMATION_DURATION});});}// 构建界面build() {// 垂直排列的列Column() {// 如果有轮播图数据且数据长度大于 0if(this.bannerData && this.bannerData.length > 0){// 使用 Swiper 组件创建轮播图Swiper(this.swiperController) {// 遍历轮播图数据ForEach(this.bannerData, (banner: HomeBannerItemBean) => {// 显示图片，并设置圆角和点击事件Image(banner.imagePath).borderRadius($r('app.float.home_swiper_borderRadius')).onClick(() => {// 点击事件：跳转到 Web 页面，并传递标题和链接参数router.pushUrl({url: 'pages/WebPage',params: {title: banner.title,src: banner.url}}, router.RouterMode.Single)})}, (img: Resource) => JSON.stringify(img.id))}// 设置轮播图的外边距、自动播放、宽度和高度.margin({top: $r('app.float.home_swiper_margin')}).autoPlay(true).width(Constants.FULL_PARENT).height(200)}}}
}

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

// 标记为组件
@Component
// 导出名为 ArticleList 的结构体
export default struct ArticleList {// 是否还有更多数据hasMore: boolean = true;// 当前页码currentPage: number = 0;// 每页数据量pageSize: number = 30;// 文章数据数组@State articleData: ArticleItemData[] = [];// 需绑定列表或宫格组件的滚动控制器private scroller: Scroller = new Scroller();// 生命周期钩子，在即将显示时调用aboutToAppear() {// 获取文章列表数据，参数为 true 表示重置数据this.getArticleList(true);}// @Builder 修饰的私有方法，用于创建列表视图@Builderprivate getListView() {// 使用 List 组件创建列表List({ space: 10, scroller: this.scroller }) {// 遍历文章数据ForEach(this.articleData, (item: ArticleItemData) => {// 使用 ListItem 创建列表项ListItem() {// 使用 Flex 创建布局Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween, }) {// 作者和发布时间Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween, }) {Text(item.author).fontSize(13)Text(Util.dateTime(item.publishTime)).fontSize(13)}.margin({ top: 10, left: 30, right: 30 })// 文章标题Text(item.title).width('100%').fontSize(20).textAlign(TextAlign.Center).fontWeight(FontWeight.Bold).maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis }).margin({ left: 10, right: 10 })// 文章分类Text(item.chapterName).fontSize(13).textAlign(TextAlign.Start).width('100%').margin({ left: 30, bottom: 10 })}.borderRadius($r('app.float.home_list_borderRadius')).backgroundColor(Color.White)}.onClick(() => {// 点击列表项跳转到 Web 页面，传递标题和链接参数router.pushUrl({url: 'pages/WebPage',params: {title: item.title,src: item.link}}, router.RouterMode.Single)})})}// 设置列表的圆角.borderRadius($r('app.float.home_list_borderRadius'))// .divider({ strokeWidth: 1, color: 0x222222 })// 设置列表的边缘效果为无效果.edgeEffect(EdgeEffect.None)// 设置列表宽度和高度为100%.width('100%').height('100%')}// 异步获取文章列表数据async getArticleList(reset: boolean) {await HomeViewModel.getHomeArticleList(this.currentPage, this.pageSize, Constants.GET_HOME_ARTICLE_LIST).then((data: ArticleDataBean) => {// 判断是否还有更多数据if (data.curPage < data.pageCount) {this.currentPage++;this.hasMore = true;} else {this.hasMore = false;}// 根据参数判断是否重置数据if (reset) {this.articleData = data.datas;} else {this.articleData = this.articleData.concat(data.datas);}}).catch((err: string | Resource) => {// 显示错误提示promptAction.showToast({ message: err });})}// 构建界面build() {// 使用 Column 组件创建垂直布局Column() {// 使用 PullToRefresh 组件实现下拉刷新和上拉加载PullToRefresh({customRefresh: null,customLoad: null,data: $articleData, // 数据源数组scroller: this.scroller, // 控制器，负责关闭下拉和上拉customList: () => {// 调用 getListView 方法创建列表视图this.getListView();},onRefresh: () => {return new Promise<string>((resolve, reject) => {// 下拉刷新成功后解析数据，重新获取文章列表数据resolve('下拉刷新成功')this.getArticleList(true);});},onLoadMore: () => {// 上拉加载成功后解析数据，继续获取更多文章列表数据return new Promise<string>((resolve, reject) => {resolve('上拉加载成功')this.getArticleList(false);});}})}.backgroundColor("#efefef") // 设置背景颜色}
}

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

3.网络请求

其中网络请求代码如下：

/*** 发起 HTTP GET 请求的函数* @param url 请求的 URL 地址* @param extraData 额外的请求数据，可选参数* @returns 返回 Promise 对象，包含 ResponseResult 数据*/
export function httpRequestGet(url: string, extraData?: Record<string, any>): Promise<ResponseResult> {// 创建 HTTP 请求实例let httpRequest = http.createHttp();// 发起 HTTP GET 请求let responseResult = httpRequest.request(url, {method: http.RequestMethod.GET,readTimeout: Constants.HTTP_READ_TIMEOUT,header: {'Content-Type': ContentType.JSON},connectTimeout: Constants.HTTP_READ_TIMEOUT,extraData: extraData || {}  // 使用 extraData 参数，如果不存在则传递一个空对象});// 创建用于存储响应数据的对象let serverData: ResponseResult = new ResponseResult();// 处理返回的数据并返回结果return responseResult.then((value: http.HttpResponse) => {// 检查 HTTP 响应码是否为成功状态（200）if (value.responseCode === Constants.HTTP_CODE_200) {// 解析返回的数据let result = `${value.result}`;let resultJson: ResponseResult = JSON.parse(result);// 检查服务器返回的错误码是否为成功状态if (resultJson.errorCode === Constants.SERVER_CODE_SUCCESS) {// 将返回的数据赋值给 serverData 对象serverData.data = resultJson.data;}// 将服务器返回的错误码和错误消息赋值给 serverData 对象serverData.errorCode = resultJson.errorCode;serverData.errorMsg = resultJson.errorMsg;} else {// 设置错误消息，包含 HTTP 错误码serverData.errorMsg = `${$r('app.string.http_error_message')}&${value.responseCode}`;}// 返回处理后的 serverData 对象return serverData;}).catch((err) => {// 捕获异常，打印错误信息，并设置错误消息console.log("error:" + JSON.stringify(err));serverData.errorMsg = $r('app.string.http_error_message');// 返回处理后的 serverData 对象return serverData;});
}

4.详情页面

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

// 标记为入口
@Entry
// 标记为组件
@Component
// Web 页面结构体
struct WebPage {// 从路由获取参数中的 'src'，并存储到状态中@State src: string = router.getParams()?.['src'];// 从路由获取参数中的 'title'，并存储到状态中@State title: string = router.getParams()?.['title'];// Web 页面控制器controller: web_webview.WebviewController = new web_webview.WebviewController();// 构建界面build() {// 使用 Column 组件创建垂直布局Column() {// 页面标题组件PageTitle({ titleName: this.title })// 分隔线Divider().strokeWidth('1px').color($r('sys.color.ohos_id_color_list_separator'))// Web 组件，加载指定的网址，并使用控制器进行交互Web({src: this.src, controller: this.controller}).javaScriptAccess(true)}}
}// 页面标题组件结构体
@Component
struct PageTitle {// 标题名称private titleName: string// 构建界面build() {// 使用 Row 组件创建水平布局Row() {// 返回按钮图标Image($r('app.media.back')).width(20).height(20).onClick(() => {// 点击返回按钮，触发路由返回操作router.back()})// 标题文本Text(this.titleName).fontSize(Constants.PAGE_TITLE_TEXT_SIZE).width(Constants.PAGE_TITLE_TEXT_WIDTH).maxLines(Constants.PAGE_TITLE_TEXT_MAX_LINES).textOverflow({ overflow: TextOverflow.Ellipsis }).margin({ left: 20 })}// 设置整体内边距.padding(12)// 设置整体宽度为100%.width('100%')}
}

四、源码地址

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

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