网站 建设运行情况报告,长春建站模板,免费微网站建设,网页制作与网站建设的发展趋势设想本文介绍一个基于鸿蒙ArkTS开发的App#xff0c;是一个包含轮播图、文章列表和 Web 页面等功能的多页面应用。
本文主要内容包括#xff1a; 一、效果图 首页 详情页 二、内容简介
1.底部Tab栏和两个页面 App底部是一个TabBar#xff0c;点击TabBar可以切换上面的页面。共…本文介绍一个基于鸿蒙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 Promisestring((resolve, reject) {// 下拉刷新成功后解析数据重新获取文章列表数据resolve(下拉刷新成功)this.getArticleList(true);});},onLoadMore: () {// 上拉加载成功后解析数据继续获取更多文章列表数据return new Promisestring((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?: Recordstring, any): PromiseResponseResult {// 创建 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 响应码是否为成功状态200if (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
如果觉得本文不错的话帮忙点个赞吧~感谢~
