鸿蒙移动应用开发基础 课件 项目5 页面渲染与网络编程-实现主页面轮播及公告通知功能

项目5页面渲染与网络编程-实现主页面轮播及公告通知功能鸿蒙移动应用开发基础授课：沙雨彤学习网站/#/cn/home/consumer/cn/doc//mainPlay/course/246260023.html目

录01静态渲染和动态渲染02条件渲染和循环渲染页

面渲

染03Scroll组件04List组件页

面列

表05状态管理的概念06组件间的状态和状态的传递状

态管

理03HTTP通信基础04网络请求流程网

络编

程06跨层级组件状态管理项目目标知识目标理解静态与动态渲染的核心差异掌握ArkTS条件渲染（if/else）、循环渲染（ForEach）的语法规则熟悉Scroll、List、Grid组件的核心属性掌握@State、@Prop、@Link等状态装饰器的功能；了解HTTP通信原理，掌握鸿蒙网络请求流程与常见错误处理方式。0102能力目标能运用渲染技术与组件，实现主页面轮播图、公告列表的动态生成与适配展示。能通过状态管理机制实现交互状态同步。通过网络请求获取并渲染页面数据，妥善处理请求超时、失败等异常。03素质目标培养模块化与数据驱动思维，理解数据驱动UI的核心理念。提升问题解决能力与规范编码习惯。培养团队合作能力。01静态渲染和动态渲染1.1.1静态渲染vs动态渲染静态渲染定义UI结构在初始化时即完全确定，运行中不随数据变化。特点性能高，渲染快。示例固定的标题栏、静态文本。代码示例Text('HelloWorld')动态渲染定义UI随数据状态变化、条件判断或用户交互动态生成。特点灵活，交互性强，数据驱动。示例点击按钮更新计数、列表刷新。代码示例Text(`当前值：${this.count}`)条件渲染和循环渲染021.2.1条件渲染vs循环渲染循环渲染作用遍历可迭代对象（如数组），为每个元素生成对应的UI组件。语法ForEach(iterable,(item,index)=>{...},(item)=>item.id)参数说明•iterable:要遍历的数据。•回调函数:生成组件的逻辑。•keySelector:提供唯一键用于优化。使用示例数据输入(Iterable)[{id:1,name:'ItemA'},{id:2,name:'ItemB'},...]UI输出(Components)<Itemname="ItemA"/><Itemname="ItemB"/>...核心优势高效、简洁、易于维护Scroll组件和List组件031.3.1列表构建-Scroll&ListScroll组件作用为超出可视区域的内容提供滚动能力。适用场景长文本、大图浏览、不规则布局等通用滚动场景。关键属性`scrollDirection`：设置滚动方向（垂直/水平）。List组件作用高效展示海量同构数据，是构建列表的首选。适用场景联系人列表、商品列表、消息列表等结构化数据展示。核心特性内置性能优化、支持分组、下拉刷新与上拉加载。组件间的状态管理041.4.1状态管理S@State作用定义组件内部私有状态特点状态变化触发当前组件更新其他组件无法直接访问通过事件或属性传递影响其他组件@State

myData:

string

=

"初始数值"Button('Change

Data').onClick(()

=>

{

this.myData

=

"New

Data"//

UI自动更新})Text(this.myData)L@Link作用父子组件双向绑定特点子组件可修改父组件状态双方状态实时同步适用于深度交互场景//

父组件@State

sharedData:

number

=

0ChildComponent({

data:

$sharedData

})//

子组件@Link

data:

numberButton('Increment')

.onClick(()

=>

this.data++)P@Prop作用父组件向子组件单向传递特点子组件只读，不能修改父状态父组件变化，子组件同步更新子组件变化不影响父组件//

父组件@State

parentCount:

number

=

0ChildComponent({

childCount:

this.parentCount

})//

子组件@Prop

childCount:

number//

只能读取，不能直接修改@State组件内部状态管理@Link父子双向绑定@Prop父→子单向传递1.4.1状态管理跨层级状态管理问题多层嵌套组件如何共享状态？解决方案使用@Provide和@Consume装饰器@Provide：在组件树中提供共享状态@Consume：在任意层级消费共享状态//

祖先组件@Provide

themeColor:

string

=

"blue"//

任意后代组件@Consume

themeColor:

stringText(`Theme:

${this.themeColor}`)优势：避免逐层传递的繁琐HTTP通信基础HTTP请求方法GET获取数据POST提交数据PUT更新资源DELETE删除资源请求结构请求行：方法、URL、版本请求头：Content-Type等请求体：POST/PUT时使用响应结构状态码：200成功、404未找到、500错误响应头：元信息响应体：JSON/XML等数据网络编程051.5.1网络编程基础HTTP协议超文本传输协议(HyperTextTransferProtocol)，是用于分布式、协作式和超媒体信息系统的应用层协议，也是互联网数据交互的基础。

HTTP是客户端（如我们的App）和服务器之间进行数据交换的“语言”，它规定了数据如何被请求和响应。常用请求方法GET从服务器获取数据。

请求的数据会附加在URL的后面，因此不太安全，且有长度限制。通常用于获取数据，不应该对服务器状态产生影响（即“幂等”操作）。POST向服务器提交数据。

请求的数据会放在请求体（Body）中，相对更安全，且没有长度限制。通常用于向服务器提交数据，可能会导致服务器状态的改变（如创建一个新用户）。1.5.1网络编程基础请求与响应结构请求(Request)请求行、请求头、请求体。

请求头(RequestHeader)：包含了请求的元信息，例如：

•`User-Agent`:告诉服务器客户端的类型（是浏览器还是App）。

•`Content-Type`:告诉服务器请求体中的数据格式是什么（如`application/json`）。响应(Response)

•`200OK`:请求成功。

•`404NotFound`:请求的资源不存在。

•`500InternalServerError`:服务器内部错误。鸿蒙网络模块主要通过@.http模块实现所有网络操作。响应行(状态码)、响应头、响应体。

响应行(ResponseLine)：最重要的是状态码，它告诉客户端请求是否成功。1.5.2网络请求流程1.配置权限在module.json5中显式声明网络权限，否则应用将无法正常发起网络请求，这是保障用户隐私和设备安全的重要机制。2.导入模块importhttpfrom'@.http'3.创建请求对象lethttpRequest=http.createHttp()4.发送请求options是可选配置对象，除method外，还可配置header（请求头）、extraData（请求体，用于POST等）、expectDataType（期望响应数据类型）等。5.处理响应服务器返回的response.result是ArrayBuffer类型，需根据实际转换为字符串，再用JSON.parse()解析成JavaScript对象。6.销毁请求对象使用完毕后必须调用destroy()销毁对象，这是避免内存泄漏、确保应用性能与稳定性的重要最佳实践，建议放在finally块中执行。遵循标准流程，确保网络请求高效、安全、无泄漏。任务1实施：主页面“轮播”区域功能的实现03任务一：目标与准备核心任务目标通过HTTP请求对接指定API接口，动态获取轮播图数据；利用Swiper组件实现轮播展示，并为每张轮播图配置点击跳转逻辑。同时，需完善异常处理机制，捕获并优雅展示图片加载失败的情况，在控制台输出详细的调试信息以辅助开发。开发环境与项目准备启动DevEcoStudio，打开第四章完成的JiuYe_Index项目，将其另存为JiuYe_Index_Banner以保留原始版本。随后定位到核心文件/main/ets/components/index/Banner.ets，在已完成的静态UI布局基础上，开始编写数据请求与组件交互的业务逻辑代码。提示：在开发过程中，请确保网络权限配置正确，并关注API接口的返回数据格式，这是实现动态轮播的关键前提。任务一：代码解析-模块导入与数据模型core_model.ts-核心数据层定义//导入鸿蒙系统核心能力模块importhttpfrom'@.http';importrouterfrom'@ohos.router';//可观察的UI渲染数据模型@ObservedclassCarouselData{id:number;image:string;url:string}//匹配后端接口的响应与数据项结构classApiResponse{code:number;msg:string;rows:CarouselItem[]}代码采用TypeScript强类型定义，通过类和装饰器规范数据结构，确保数据流转的类型安全与可维护性。核心模块能力引入引入@.http实现鸿蒙系统的网络请求能力，@ohos.router实现页面间的路由跳转。模块化导入让功能边界清晰，便于工程解耦与扩展。分层数据模型设计通过CarouselData承载UI状态，ApiResponse和CarouselItem解析接口原始数据，实现数据解析与UI渲染的分离，提升代码可读性与复用性。任务一：代码解析-组件状态与HTTP请求核心实现：Banner组件数据加载逻辑@ComponentexportstructBanner{@Statecarousels:CarouselData[]=[];@StateisLoading:boolean=true;//组件挂载时触发数据加载aboutToAppear():void{this.loadCarouselData();}//异步HTTP请求与资源管理asyncloadCarouselData():Promise<void>{lethttpRequest:http.HttpRequest|null=null;try{httpRequest=http.createHttp();constres=awaithttpRequest.request(API_URL);if(res.responseCode===200)this.parseAndProcessResponse(res.result);}catch(e){/*异常兜底*/}finally{httpRequest?.destroy();//确保资源释放this.isLoading=false;//重置加载状态}}}通过结构化的异步请求与严格的资源管理，保证了组件数据加载的稳定性与内存使用的安全性，同时利用状态变量提升用户交互体验。状态驱动视图(@State)使用`@State`装饰器定义`carousels`存储轮播数据，`isLoading`标记加载状态，实现数据与视图的自动响应式绑定。生命周期触发(aboutToAppear)在组件即将显示在界面上的生命周期阶段，自动调用数据加载方法，确保页面渲染时能及时获取并展示服务端数据。异步请求与资源闭环(async/await)利用`async/await`处理异步流程，配合`try/catch/finally`确保请求异常被捕获，且请求对象在完成后被正确销毁。任务一：代码解析-响应处理与图片加载核心实现逻辑(TypeScript)parseAndProcessResponse(res:string):void{constjson=JSON.parse(res)asApiResponse;json.rows?.forEach(item=>{letimg=item.image;//关键：补全相对路径为完整URLimg=img?.startsWith('http')?img:HOST+img;this.carousels.push(newCarouselData(item.id,img,item.url));});}异常处理逻辑：当图片加载失败时，通过handleImageError清空错误URL，防止页面出现破碎图片图标，保障用户体验。响应数据标准化解析使用JSON.parse()将字符串转换为强类型对象，并遍历数据行。核心在于对API返回的图片路径进行校验与补全，确保前端能正确请求到服务器资源，这是图片正常渲染的前提。资源加载的容错与兜底通过监听图片的onError事件，在资源加载失败时及时清空无效URL，避免页面出现视觉上的错误占位符。同时将处理后的数据挂载到响应式状态，驱动UI自动更新。任务一：效果展示与总结通过动态渲染技术，实现了轮播图组件与API数据的无缝对接，界面响应流畅，交互体验良好，展现了完整的移动端适配效果。核心功能实现实现了页面加载提示、Swiper组件自动播放、点击跳转指定页面的完整流程；并对网络请求异常、图片加载失败等边界情况做了妥善的兜底处理，保证了应用的健壮性。技术收获与总结掌握了从HTTP数据请求、JSON解析到数据模型转换的全链路开发；深入理解了状态管理机制，以及处理相对URL和资源加载异常在实际项目中的关键意义。任务2实施：主页面“公告通知”区域功能的实现03任务二：目标与准备核心任务目标通过HTTP请求对接API接口，动态获取公告通知列表数据；在UI层实现标题与发布时间的结构化列表展示。实现“更多”按钮的页面跳转逻辑，以及单条公告点击后的详情页路由传参。同时配置网络请求失败时的降级策略，自动展示预设的默认数据，保障用户体验。前期开发准备01将现有项目JiuYe_Index_Banner另存为新项目JiuYe_Index_Notice，确保开发环境独立。02定位并打开核心文件/main/ets/components/index/Notice.ets，基于已完成的静态布局结构，逐步完善数据请求与交互逻辑。提示：在实现网络请求时，建议封装统一的请求工具类，并在Notice组件中通过生命周期函数触发数据加载，确保代码可维护性。任务二：代码解析-数据模型与HTTP请求核心代码实现(TypeScript)asyncloadNoticeData():Promise<void>{consturl='...?pageNum=1&pageSize=3';//分页参数try{constresponse=awaithttp.createHttp().request(url);if(response.responseCode===200)this.parseData(...);elsethis.loadDefaultData();//响应异常降级}catch(error){this.loadDefaultData();}//网络异常降级}通过结构化的代码设计，将数据请求、解析与错误处理解耦，确保应用在各种网络环境下都能稳定运行。带分页参数的URL请求请求URL中包含pageNum=1和pageSize=3分页参数，指定获取第一页的3条公告数据。这种参数化的请求方式在列表类数据加载场景中极为常见，能有效控制数据传输量。健壮的降级处理策略无论HTTP响应码非200，还是网络请求抛出异常，都会统一调用loadDefaultData()加载本地默认数据。这一机制保障了UI不会出现空白，极大提升了用户体验的稳定性。任务二：代码解析-数据处理与降级策略▍核心实现代码片段(TypeScript)parseAndProcessResponse(res:string):void{try{constdata=JSON.parse(res);constnotices=[];if(data.rows?.length){data.rows.forEach(item=>{constdate=item.createTime?.split('')[0]||'';//提取日期notices.push(newNoticeData(item.id,item.title,date));});}this.list=notices.length?notices:this.loadDefaultData();}catch(e){this.loadDefaultData();}//异常降级}精准数据清洗与格式化利用`split('')[0]`对服务端返回的完整时间戳进行切割，仅保留日期部分展示在UI上，剔除冗余的时间信息，让界面更简洁，聚焦核心内容。鲁棒性保障：异常降级策略当网络失败、数据解析错误或返回空数据时，自动触发`loadDefaultData`加载预设静态内容，确保页面永不空白，极大提升用户体验的稳定性。核心价值：通过数据清洗提升信息可读性，通过降级兜底策略确保系统的高可用性，构建“优雅容错”的前端数据处理机制。任务二：代码解析-UI构建与交互逻辑//实现公告点击跳转与列表渲染核心逻辑viewNoticeDetail(notice:NoticeData):void{router.pushUrl({url:'pages/Notices/Detail',params:{id:notice.id}});}build(){Column(){Flex({justifyContent:FlexAlign.SpaceBetween}){/*标题与更多按钮*/}this.isLoading?LoadingProgress():ForEach(this.noticeList,(item)=>{Flex().onClick(()=>this.viewNoticeDetail(item));//列表项点击事件绑定});}}交互逻辑：路由跳转与参数传递通过router.pus