鸿蒙系统应用开发项目化教程 课件 项目5、6 开发视频播放器、开发新闻客户端

鸿蒙应用开发在当前的移动互联网时代和流媒体时代，人们可以通过手机随时随地播放视频。本项目通过AVPlayer类和Video组件两种方式实现简单视频播放，让读者掌握基于HarmonyOS，用ArkTS语言实现视频播放的全流程鸿蒙应用开发项目五视频播放器用AVPlayer类实现视频播放

用Video组件实现视频播放目录CONTENTS掌握AVPlayer类和Video组件的使用；掌握播放器状态的变化；掌握资源文件的读取；掌握网络访问权限的设置；掌握视频播放的控制和切换；了解Swiper组件，List组件和Navigator组件的使用知识目标能用AVPlayer类和Video组件实现视频播放，能实现对视频播放器的控制能力目标培养文档阅读与理解能力培养代码编程规范意识的培养素养目标学习目标学习目标在当前的移动互联网时代和流媒体时代，人们可以通过手机随时随地播放视频。本项目通过AVPlayer类和Video组件两种方式实现简单视频播放器，让读者掌握基于HarmonyOS系统，用ArkTS语言实现视频播放的全流程。应用场景在HarmonyOS系统中，提供两种视频播放开发的方案：(1)AVPlayer：功能较完善的音视频播放ArkTS/JSAPI，集成了流媒体和本地资源解析，媒体资源解封装，视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可直接播放mp4、mkv等格式的视频文件。(2)Video组件：封装了视频播放的基础能力，需要设置数据源以及基础信息即可播放视频，但相对扩展能力较弱。Video组件由ArkUI提供。视频播放开发方案PART-01用AVPlayer类实现视频播放AVPlayer类：功能较完善的音视频播放ArkTS/JSAPI，集成了流媒体和本地资源解析、媒体资源解封装、视频解码和渲染功能，适用于对媒体资源进行端到端播放的场景，可直接播放mp4、mkv等格式的视频文件。应用通过调用JS接口层提供的AVPlayer接口（图中②的部分）实现相应功能时，框架层会通过播放服务（PlayerFramework）解析成单独的音频数据流和视频数据流。音频数据流经过软件解码后输出至音频服务（AudioFramework）(图中④的部分)，再至硬件接口层的音频HDI，实现音频播放功能。视频数据流经过硬件或者软件解码后输出至图形渲染服务（GraphicFramework）(图中⑤的部分)，再输出至硬件接口层的显示HDI，完成图形渲染。视频播放流程编写视频播放应用时，关键的步骤是从XComponent组件获取窗口SurfaceID，和媒体资源一道传递给AVPlayer接口(图中①的部分)。视频播放流程XComponent组件可用于媒体数据写入，并将其显示出来。XComponent组件XComponent(value:{id:string,type:string,libraryname?:string,controller?:XComponentController})参数名参数类型必填描述idstring是组件的唯一标识，支持最大的字符串长度128。typestring是用于指定XComponent组件类型，可选值：-surface：组件内容单独送显，直接合成到屏幕。-component：组件内容与其他组件合成后统一送显。librarynamestring否应用Native层编译输出动态库名称。controllerXComponentcontroller否给组件绑定一个控制器，通过控制器调用组件方法。使用本地资源播放，必须确认资源文件可用可以从Context（应用上下文）中获取相应路径本地资源文件HAP视频文件即存放在resources/rawfile目录下的视频文件。可以通过ResourceManager.getRawFd方法获取resources/rawfile目录下对应rawfile文件的描述符。HAP资源文件播放网络视频时，需要申请权限ohos.permission.INTERNET网络视频文件文件形式视频资源文件播放网络视频时，需要申请权限ohos.permission.INTERNET。具体设置是在entry/src/main中的config.json文件，在module字段下配置权限。申请网络访问权限1"module":{2"reqPermissions":[3{4"name":"ohos.permission.INTERNET"5}6]}1"deviceConfig":{"default":{2"network":{3"cleartextTraffic":true4}5}},如果要支持http，需要config.json文件中deviceConfig字段下配置。推荐使用主流的播放格式，音视频容器、音视频编码属于内容创作者所掌握的专业领域，不建议应用开发者自制码流进行测试，以免产生无法播放、卡顿、花屏等兼容性问题。H264是所有设备均支持的视频格式，对于MPEG2，MPEG4，H263，VP8格式，不同设备的实际实现不同。建议开发者做对应的兼容处理，保证应用功能全平台兼容。主流的视频播放格式mp4，mkv的视频格式是H264/MPEG2/MPEG4/H263。视频文件的格式AVPlayer是播放管理类，用于管理和播放媒体资源。在调用AVPlayer的方法前，需要先通过createAVPlayer()构建一个AVPlayer实例。创建AVPlayer类时，首先需要导入media模块，然后通过调用media.createAVPlayer9+方法，以异步方式创建AVPlayer实例AVPlayer类方式1：通过注册回调函数获取AVPlayer实例。创建AVPlayer实例createAVPlayer(callback:AsyncCallback<AVPlayer>):void1importmediafrom'@ohos.multimedia.media';2letavPlayer3media.createAVPlayer((error,video)=>{4if(video!=null){5avPlayer=video;6('createAVPlayersuccess');7}else{8(`createAVPlayerfail,error:${error}`);9}10});语法示例创建AVPlayer实例方式2：通过Promise返回值获取AVPlayer实例创建AVPlayer实例createAVPlayer():Promise<AVPlayer>1importmediafrom'@ohos.multimedia.media';2letavPlayer3media.createAVPlayer().then((video)=>{4if(video!=null){5avPlayer=video;6('createAVPlayersuccess');7}else{8('createAVPlayerfail');9}10}).catch((error)=>{11(`AVPlayercatchCallback,error:${error}`);12});语法示例创建AVPlayer实例AVPlayer的状态转换AVPlayer的状态转换名称类型说明idlestring闲置状态，AVPlayer刚被创建createAVPlayer()或者调用了reset()方法之后，进入Idle状态。initializedstring资源初始化，在Idle状态设置url9+

或fdSrc9+属性，AVPlayer会进入initialized状态，此时可以配置窗口、音频等静态属性。preparedstring已准备状态，在initialized状态调用prepare()方法，AVPlayer会进入prepared状态，此时播放引擎的资源已准备就绪。playingstring正在播放状态，在prepared/paused/completed状态调用play()方法，AVPlayer会进入playing状态。AVPlayer的状态机，可通过state属性主动获取当前状态，也可通过监听stateChange事件上报当前状态，各种状态的具体含义见表AVPlayer的状态转换名称类型说明pausedstring暂停状态，在playing状态调用pause方法，AVPlayer会进入paused状态。completedstring播放至结尾状态，当媒体资源播放至结尾时，如果用户未设置循环播放（loop=1），AVPlayer会进入completed状态，此时调用play()会进入playing状态和重播，调用stop()会进入stopped状态。stoppedstring停止状态，在prepared/playing/paused/completed状态调用stop()方法，AVPlayer会进入stopped状态，此时播放引擎只会保留属性，但会释放内存资源，可以调用prepare()重新准备，也可以调用reset()重置，或者调用release()彻底销毁。releasedstring销毁状态，销毁与当前AVPlayer关联的播放引擎，无法再进行状态转换，调用release()方法后，会进入released状态，结束流程。errorstring错误状态，当播放引擎发生不可逆的错误，则会转换至当前状态，可以调用reset()重置，也可以调用release()销毁重建。AVPlayer的属性AVPlayer类的常用属性见下表。属性名后面的数字上标表示是API的版本。名称类型可读可写说明url9+string是是媒体URL，只允许在idle状态下设置，静态属性。支持的视频格式(mp4、mpeg-ts、webm、mkv)。fdSrc9+AVFileDescriptor是是媒体文件描述，只允许在idle状态下设置，静态属性。使用场景：应用中的媒体资源被连续存储在同一个文件中。surfaceId9+string是是视频窗口ID，默认无窗口，只允许在initialized状态下设置，静态属性。使用场景：视频播放的窗口渲染，纯音频播放不用设置。loop9+boolean是是视频循环播放属性，默认'false'，设置为'true'表示循环播放，动态属性。videoScaleType9+VideoScaleType是是视频缩放模式，默认VIDEO_SCALE_TYPE_FIT_CROP，动态属性。audioInterruptMode9+audio.InterruptMode是是音频焦点模型，默认SHARE_MODE，动态属性。AVPlayer的属性AVPlayer类的常用属性见下表。属性名后面的数字上标表示是API的版本。名称类型可读可写说明state9+AVPlayerState是否音视频播放的状态，全状态有效，可查询参数。currentTime9+number是否视频的当前播放位置，单位为毫秒（ms），可查询参数。返回为(-1)表示无效值。duration9+number是否视频时长，单位为毫秒（ms），可查询参数。返回为(-1)表示无效值，直播场景默认返回(-1)。width9+number是否视频宽，单位为像素（px），可查询参数。返回为(0)表示无效值，height9+number是否视频高，单位为像素（px），可查询参数。返回为(0)表示无效值.AVPlayer的常用方法1和创建AVPlayer一样，AVPlayer类中的很多方法都有两种实现方式：注册回调函数的方式和返回Promise对象的方式。①prepare9+：准备播放视频。该方法必须在stateChange事件成功触发至initialized状态后，才能调用。②play9+：开始播放音视频资源，只能在prepared/paused/complete状态调用。1prepare(callback:AsyncCallback<void>):void//注册回调函数方式2prepare():Promise<void>//返回Promise对象方式1play(callback:AsyncCallback<void>):void//注册回调函数方式2play():Promise<void>//返回Promise对象方式AVPlayer的常用方法2③pause9+：暂停播放音视频资源，只能在playing状态调用。④stop9+：停止播放音视频资源，只能在prepared/playing/paused/complete状态调用。1pause(callback:AsyncCallback<void>):void//注册回调函数方式2pause():Promise<void>//返回Promise对象方式1stop(callback:AsyncCallback<void>):void//注册回调函数方式2stop():Promise<void>//返回Promise对象方式AVPlayer的常用方法3⑤reset9+：重置播放，只能在initialized/prepared/playing/paused/complete/stopped/error状态调用。⑥release9+：销毁播放资源，除released状态，都可以调用。1reset(callback:AsyncCallback<void>):void//注册回调函数方式2reset():Promise<void>//返回Promise对象方式1reset(callback:AsyncCallback<void>):void//注册回调函数方式2reset():Promise<void>//返回Promise对象方式AVPlayer的常用方法4⑦seek9+：跳转到指定播放位置，只能在prepared/playing/paused/complete状态调用。⑧setSpeed9+：设置倍速模式，只能在prepared/playing/paused/complete状态调用。seek(timeMs:number,mode?:SeekMode):voidsetSpeed(speed:PlaybackSpeed):void⑨setVolume9+：设置媒体播放音量，只能在prepared/playing/paused/complete状态调用。参数volume指定的相对音量大小，取值范围为[0.00-1.00]，1表示最大音量，即100%。setVolume(volume:number):voidAVPlayer类的监听事件1视频播放的全流程包含：创建AVPlayer，设置播放资源和窗口，设置播放参数（音量/倍速/缩放模式），播放控制（播放/暂停/跳转/停止），重置，销毁资源。基于全流程场景，需要的监听事件如表所示。事件类型说明stateChange必要事件，监听播放器的state属性改变。error必要事件，监听播放器的错误信息。durationUpdate用于进度条，监听进度条长度，刷新资源时长。timeUpdate用于进度条，监听进度条当前位置，刷新当前时间。seekDone响应API调用，监听seek()请求完成情况。当使用seek()跳转到指定播放位置后，如果seek操作成功，将上报该事件。AVPlayer类的监听事件2事件类型说明speedDone响应API调用，监听setSpeed()请求完成情况。当使用setSpeed()设置播放倍速后，如果setSpeed操作成功，将上报该事件。volumeChange响应API调用，监听setVolume()请求完成情况。当使用setVolume()调节播放音量后，如果setVolume操作成功，将上报该事件。bitrateDone响应API调用，用于HLS协议流，监听setBitrate()请求完成情况。当使用setBitrate()指定播放比特率后，如果setBitrate操作成功，将上报该事件。availableBitrates用于HLS协议流，监听HLS资源的可选bitrates，用于setBitrate()。bufferingUpdate用于网络播放，监听网络播放缓冲信息。startRenderFrame用于视频播放，监听视频播放首帧渲染时间。videoSizeChange用于视频播放，监听视频播放的宽高信息，可用于调整窗口大小、比例。audioInterrupt监听音频焦点切换信息，搭配属性audioInterruptMode使用。如果当前设备存在多个媒体正在播放，音频焦点被切换（即播放其他媒体如通话等）时将上报该事件，应用可以及时处理。请使用AVPlayer类实现简单视频播放器的开发。任务实施基本任务只能实现一个视频文件的播放，多个视频文件如何切换播放呢？请你实现多个视频文件的切换播放。任务拓展在ArkTsAPI的@ohos.multimedia.media(媒体服务)中视频播放有VideoPlayer8+和AVPlayer9+，AVPlayer9+实现了AudioPlayer6+和VideoPlayer8+整合，升级了状态机和错误码，因此在进行视频播放的应用开发时，推荐使用AVPlayer9+。常见问题本任务通用AVPlayer实现了一个简单视频播放器的开发，介绍了从创建AVPlayer，设置播放资源和窗口，设置播放参数（音量/倍速/缩放模式），播放控制（播放/暂停/跳转/停止），重置，销毁资源的播放的全流程。建议读者可进一步详细了解AVPlayer的状态机。任务小结PART-02用Video组件实现视频播放Video组件：封装了视频播放的基础能力，需要设置数据源以及基础信息才可以播放视频，但相对扩展能力较弱。Video组件由ArkUI提供。Video组件用于播放视频文件并控制其播放状态，常用于为短视频应用和应用内部视频的列表页面。当视频完整出现时会自动播放，用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。Video组件Video是用于播放视频文件并控制其播放状态的组件。其接口形式如下：Video组件Video(value:{src?:string|Resource,currentProgressRate?:number|string|PlaybackSpeed,previewUri?:string|PixelMap|Resource,controller?:VideoController})语法参数名参数类型参数描述srcstring|Resource视频播放源的路径，支持本地视频路径和网络路径。CurrentProgressRatenumber|PlaybackSpeed视频播放倍速。number取值仅支持：0.75，1.0，1.25，1.75，2.0。previewUristring|PixelMap8+

|Resource预览图片的路径controllerVideoController控制器Video组件的主要属性如下：Video组件的属性名称参数类型默认值描述mutedbooleanfalse是否静音。autoPlaybooleanfalse是否自动播放。controlsbooleantrue控制视频播放的控制栏是否显示。objectFitImageFitCover设置视频显示模式。loopbooleanfalse是否单个视频循环播放。Video组件的主要事件如下：Video组件的事件名称功能描述onStart(event:()=>void)播放时触发该事件。onPause(event:()=>void)暂停时触发该事件。onFinish(event:()=>void)播放结束时触发该事件。onError(event:()=>void)播放失败时触发该事件。onPrepared(callback:(event?:{duration:number})=>void)视频准备完成时触发该事件，通过duration可以获取视频时长，单位为s。-duration:视频的时长。onSeeking(callback:(event?:{time:number})=>void)操作进度条过程时上报时间信息，单位为s。onSeeked(callback:(event?:{time:number})=>void)操作进度条完成后，上报播放时间信息，单位为s。onUpdate(callback:(event?:{time:number})=>void)播放进度变化时触发该事件，单位为s，更新时间间隔为250ms。VideoController是Video控制器，主要用于控制视频的状态，包括播放、暂停、停止以及设置进度等。VideoController对象VideoController对象的创建：controller:VideoController=newVideoController();语法VideoController常用方法方法功能start():void开始播放pause():void暂停播放stop():void停止播放setCurrentTime(value:number)指定视频播放的进度位置。其中参数value的类型是number，是必填项，说明视频播放进度位置。requestFullscreen(value:boolean)请求全屏播放。其中参数value的类型是boolean，是必填项，表示是否全屏播放，默认值是false。exitFullscreen()退出全屏播放VideoController常用方法方法功能

setCurrentTime(value:number,seekMode:SeekMode)指定视频播放的进度位置，并指定跳转模式。value：视频播放进度位置seekMode：跳转模式SeekMode8+类型接口说明：PreviousKeyframe 跳转到前一个最近的关键帧。NextKeyframe 跳转到后一个最近的关键帧。ClosestKeyframe 跳转到最近的关键帧。Accurate 精准跳转，不论是否为关键帧。请使用Video组件实现简单视频播放器的开发。任务实施请在已完成功能的基础上，实现在视频轮播图和多个视频列表上点击时，播放相应的视频。效果如图所示。任务拓展一个VideoController对象可以控制一个或多个video。默认的控制器只支持视频的开始、暂停、进度调整、全屏显示四项基本功能。如果需要使用自定义的控制器，需要先将默认控制器关闭掉，再使用button以及slider等组件进行自定义的控制与显示。常见问题本任务完成了用Video组件播放视频文件，用VideoController对象控制其播放状态，如用户点击视频区域则会暂停播放，同时显示播放进度条，通过拖动播放进度条指定视频播放到具体位置。任务小结你学会了吗？鸿蒙应用开发项目教程鸿蒙应用开发

本项目需要实现一个简单的新闻客户端。该应用包含两级界面，启动后显示新闻列表主界面，单击新闻列表中的某个新闻，会打开一个显示该新闻的详情界面。鸿蒙应用开发项目6开发新闻客户端教学目标场景描述实现新闻列表实现新闻详情目录CONTENTS教学目标6.1教学目标123知识目标能力目标素质目标了解HTTP协议；掌握使用HTTP请求访问网络数据的方法；掌握列表组件的数据展示能阅读API文档并进行API接口测试能编程获取网络上的数据并进行展示能根据需求完成业务逻辑编程和调试文档阅读与理解能力；良好的编码习惯；严谨的逻辑思维场景描述6.2场景描述本任务需要实现一个简单的新闻客户端。该应用包含两级页面，启动后显示新闻主界面，如图6-1。新闻主界面分为3个部分：顶部为新闻的轮播图，中间为新闻类别导航，第三部分为某个类别的新闻列表，点某个新闻类别，新闻列表中显示该类别的新闻列表，点击新闻列表中的某个新闻，会打开一个页面显示该新闻的详情，如图6-2。

图6-1图6-26.3实现新闻列表6.3.1任务工单任务名称实现新闻列表学时4班级

组别

学号

姓名

任务环境安装了鸿蒙开发环境且能访问互联网的计算机实践场地机房评价结果

任务描述根据新闻列表接口获取新闻列表数据并显示新闻列表任务目的1、知识目标：（1）理解http协议编程方法（2）掌握List组件2、能力目标：（1）能使用HTTP请求获取网络数据（2）能使用List组件展示数据3、素质目标：（1）能阅读API接口文档,规范编码重难点1、重点：（1）HTTP网络编程（2）列表数据展示2、难点：（1）HTTP网络编程（2）列表数据展示知识链接（1）HTTP协议简介（2）使用GET请求获取数据（3）使用POST请求获取数据（4）List组件（5）JSON数据格式任务完成步骤：（1）理解新闻列表数据接口（2）创建项目，封装网络请求工具类（3）获取新闻列表数据（4）创建新闻列表项的数据模型（5）设计新闻列表界面（6）实现新闻列表数据展示（7）测试新闻列表评价标准等级指标A1、能理解HTTP协议、JSON数据格式转换2、能独立完成新闻列表数据获取及文本和图片显示3、能独立实现新闻类别导航与列表数据联动B1、能理解HTTP协议、JSON数据格式转换2、能较好的理解并成新闻列表数据获取及内容显示C1、能基本理解HTTP协议、JSON数据格式2、能基本理解并老师帮助下完成新闻列表数据获取及内容显示问题及解决描述任务完成过程中遇到的问题和解决方法：任务总结描述本次完成的任务过程中，你的收获和感想：6.3.2知识清单HTTP协议简介1使用GET请求获取数据2使用POST请求提交数据3List组件4JSON数据格式51.HTTP协议HTTP协议是超文本传输协议（HyperTextTransferProtocol）的缩写，是万维网（WorldWideWeb，WWW）的数据通信的基础。HTTP是一个简单的请求—响应协议，有GET、POST、HEAD、PUT、DELETE、OPTIONS等多种请求方式，其中最常用的是GET和POST两种。GET用于向服务器指定的资源发出“显示”请求，而POST用于向服务器指定的资源提交数据，请求服务器进行处理。使用HarmonyOS进行的移动互联网应开发时，HTTP数据请求功能主要由http模块提供，包括发起请求、中断请求、订阅/取消订阅HTTPResponseHeader事件等。2.使用GET请求数据importhttpfrom'@.http';1lethttpRequest=http.createHttp();2letresponseResult=httpRequest.request(3//请求url地址4url,5{6//请求方式7method:http.RequestMethod.GET,8//可选，默认为60s9connectTimeout:60000,10//可选，默认为60s11readTimeout:60000,12//开发者根据自身业务需要添加header字段13header:{14'Content-Type':'application/json'15}16});1responseResult.then((value)=>{2if(value.responseCode===200){3//请求成功4letresult=`${value.result}`;5letresultJson=JSON.parse(result);6}else{7//请求失败8}9returnserverData;10}).catch(()=>{11//请求异常12})3.使用POST提交数据1leturl="https://EXAMPLE_URL";2letresponseResult=httpRequest.request(3//请求url地址4url,5{6//请求方式7method:http.RequestMethod.POST,8//请求的额外数据。9extraData:{10"param1":"value1",11"param2":"value2",12},13//可选，默认为60s14connectTimeout:60000,15//可选，默认为60s16readTimeout:60000,17//开发者根据自身业务需要添加header字段18header:{19'Content-Type':'application/json'20}21}22);4.List组件List是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。包含ListItem子组件。接口：List(value?:{space?:number|string,initialIndex?:number,scroller?:Scroller})常见属性：listDirection:Axis.Vertical|Horizontal，用来指定列表项的排列方式，分别指定垂直或水平方向排列，默认为垂直排列。divider:{strokeWidth:Length,color?:ResourceColor,startMargin?:Length,endMargin?:Length}|null，用来指定列表的分割线。5.JSON数据格式JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLanguage,StandardECMA-2623rdEdition-December1999的一个子集。JSON常用于移动端设备与服务器间数据的传输。JSON数据有两种结构：对象和数组。JSON对象以“｛”开始，以“｝”结束，中间部分的属性用“,”分割，属性为键值对（key:value）构成，如：{"id":25,"status":"1","sort":2,"advTitle":"首页轮播"}JSON数组以“[”开始，以“]”结束，中间有0个或多个对象或数组构成。比如下列代码的rows就是一个数组对象。{"total":3,"rows":[{"id":25,"status":"1","sort":2,"advTitle":"首页轮播","type":"2"},{"id":26,"status":"1","sort":3,"advTitle":"首页轮播","type":"2"}],"code":200,"msg":"查询成功"}6.3.3实施步骤步骤1理解新闻列表数据接口步骤2创建项目，封装网络请求工具类2176543步骤3获取新闻列表数据步骤4创建新闻列表项的数据模型步骤5设计新闻列表界面步骤6实现新闻列表数据的展示步骤7测试新闻列表1.理解新闻列表数据接口本项目的新闻数据接口来源于聚合数据网站，网址为：/。新闻客户端的学习者需要在该网站注册，并进行实名认证，然后申请免费的【新闻头条】数据接口，该接口包含新闻数据列表查询和新闻数据详情两个接口。获取新闻列表接口：接口地址：/toutiao/index返回格式：json请求方式：get/post请求示例：/toutiao/index?type=top&key=APPKEY接口备注：返回头条(推荐)、国内，娱乐，体育，军事，科技，财经，时尚等新闻信息;2.新建项目，封装网络请求工具类打开DevEcoStudio，新建HarmonyOS的EmptyAbility工程，ProjectName为NewsClient在项目中entry/src/main/ets下新建bean、utils和view共3个文件夹在utils目录下创建HttpUtils工具类，封装HTTP的GET、POST请求以及新闻类别和新闻详情的获取方法3.获取新闻列表数据1import{loadNewsList}from'../utils/HttpUtil'2@Entry3@Component4structIndex{5@Statemessage:string='HelloWorld'6aboutToAppear(){7loadNewsList('top',10,1,{onReceive:(data)=>{8this.message=JSON.stringify(data);9}})10}11build(){12Row(){13Column(){14Text(this.message)1.fontSize(50)16.fontWeight(FontWeight.Bold)17}18.width('100%')19}20.height('100%')21}22}4.创建新闻列表项的数据模型根据新闻列表接口返回的数据，在bean文件夹下创建新闻列表项数据模型NewsInfo.ets1/*2新闻列表项数据模型3*/4exportclassNewsInfo{5uniquekey:string6title:string7date:string8category:string9author_name:string10url:string11thumbnail_pic_s:string12is_content:number。。。。。5.设计实现新闻列表界面根据图6-1所示，设计新闻列表界面（暂不考虑轮播图和类别导航），使用列表组件List和ListItem组件实现新闻列表数据的展示。(1)在view文件夹中新建NewsList.ets和NewsListItem组件(2)实现NewsList和NewsListItem子组件之间参数传递。5.设计实现新闻列表界面根据图6-1所示，设计新闻列表界面（暂不考虑轮播图和类别导航），使用列表组件List和ListItem组件实现新闻列表数据的展示。(1)在view文件夹中新建NewsList.ets和NewsListItem组件(2)实现NewsList和NewsListItem子组件之间参数传递。图6-7新闻列表项布局6.实现新闻列表数据展示在Index.ets文件中添加代码，调用NewList，实现新闻列表数据的显示功能。7.测试新闻列表在远程模拟器中启动API9的P50模拟器，运行项目，显示TOP类别的新闻列表,效果如图6-8。6.3.4任务拓展:实现新闻类别导航从新闻列表接口可知，新闻包括：top(推荐,默认)、guonei(国内)、guoji(国际)、yule(娱乐)、tiyu(体育)、junshi(军事)、keji(科技)、caijing(财经)、youxi(游戏)、qiche(汽车)、jiankang(健康)等多个类别。前面的新闻列表任务只能显示默认top类别的新闻列表，而无法查看其他类别的新闻列表。现在请你在新闻列表页面的顶部增加一个新闻类别导航，点击不同的新闻类别名称，显示不同类别的新闻列表，如图。6.3.5常见问题及解决1.无法获取新闻列表数据

首先检查网络请求的权限配置，然后检测API接口的调用次数是否达到限制次数，最后检查JSON返回的数据格式是否正确处理。2.新闻类别变化没有引起新闻列表数据变化

检测通信变量categoryId的设置是否正确。NewsList与CategoryList两个组件都是Index的子组件，三者是通过categoryId变量通信的，Index与CategoryList时双向通信，CategoryList中类别的变化通过双向变量反馈给Index，然后Index的categroyId的变化同步到NewsList。6.3.6任务小结通过完成本任务，我们学会了使用HTTP协议进行网络新闻列表数据的获取，学会了使用List和ListItem组件进行新闻列表数据的展示以及新闻类别列表的点击事件处理，在进行网络数据请求时，需要在module.json5配置文件中进行网络访问授权，网络请求的功能代码需要使用异步请求进行处理，通过回调接口处理网络请求的数据。名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。6.4实现新闻详情6.4.1任务工单任务名称实现新闻详情学时4班级

组别

学号

姓名

任务环境安装了鸿蒙开发环境且能访问互联网的计算机实践场地机房评价结果

任务描述根据新闻详情接口获取新闻详情数据并显示任务目的1、知识目标：（1）掌握Web、Swiper等组件使用方法（2）掌握页面间跳转与参数传递2、能力目标：（1）能实现页面跳转与参数传递（2）能使用Web显示网页内容，（3）能设计轮播图。3、素质目标：（1）能阅读API接口文档,（2）逻辑严密，编码规范重难点1、重点：（1）Web与Swiper组件使用、2、难点：（1）Web与Swiper组件使用知识链接（1）Web组件（2）Swiper组件任务完成步骤：（1）理解新闻详情数据接口（2）创建新闻详情数据模型（3）设计获取新闻详情数据的方法（4）设计新闻详情界面（5）跳转到新闻详情界面（6）测试查看新闻详情评价标准等级指标A1、能熟练使用HTTP组件获取网络数据2、能熟练实现页面跳转与参数传递3、能熟练使用Web组件显示网页内容4、能独立完成新闻详情和新闻轮播图显示B1、能熟练使用HTTP组件获取网络数据2、能熟练实现页面跳转与参数传递3、能熟练使用Web组件显示网页内容4、能较好的完成新闻详情显示C1、能基本理解HTTP组件的使用2、能基本理解页面跳转与参数传递3、能基本理解Web组件4、能在老师指导下完成新闻详情显示问题及解决描述任务完成过程中遇到的问题和解决方法：任务总结描述本次完成的任务过程中，你的收获和感想：6.4.2知识清单1.Web组件12.Swiper21.Web组件Web其实就是一个内置的浏览器组件，既可以用来加载显示一个网址的网页内容，也可以加载显示一段HTML文本内容，还可以用来播放音乐和视频。使用Web时需要配置应用的网络权限ohos.permission.INTERNET。Web组件的API接口为：

Web(options:{src:ResourceStr,controller:WebController|WebviewController})

其中src和controller为必填项，src指定网页资源的地址，controller用于控制Web组件各种行为。从API9开始，建议使用WebviewController。一个WebviewController对象只能控制一个Web组件，且必须在Web组件和WebviewController绑定后，才能调用WebviewController上的方法。1.Web组件WebviewController中的主要方法如下：（1）loadUrl(url:string|Resource,headers?:Array<HeaderV9>):voidloadUrl用于加载制度的url资源。（2）loadData(data:string,mimeType:string,encoding:string,baseUrl?:string,historyUrl?:string):voidloadData用于加载指定的html格式的data内容。（3）runJavaScript(script:string):Promise<string>异步执行JavaScript脚本，并通过Promise方式返回脚本执行的结果。runJavaScript需要在loadUrl完成后，比如onPageEnd中调用。（4）zoom(factor:number):void调整当前网页的缩放比例。1.Web组件1//xxx.ets2importweb_webviewfrom'@ohos.web.webview'34@Entry5@Component6structWebComponent{7controller:web_webview.WebviewController=newweb_webview.WebviewController();89build(){10Column(){11Web({src:'',controller:this.controller})12}13}14}2.Swiper组件滑块视图容器，提供子组件滑动轮播显示的能力,用来制作轮播广告图。接口：Swiper(controller?:SwiperController)controller给组件绑定一个控制器，用来控制组件翻页。当前显示的组件索引index变化时触发onChange(index)事件。名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。2.Swiper组件Swiper组件的常见属性名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。6.4.3实施步骤步骤1理解新闻详情数据接口步骤2创建新闻详情数据模型216543步骤3设计获取新闻详情数据的方法步骤4设计新闻详情界面步骤5跳转到新闻详情界面步骤6测试查看新闻详情1.理解新闻详情数据接口接口地址：/toutiao/content返回格式：json请求方式：httpget/post请求示例：/toutiao/content?key=&uniquekey=b*******7b接口备注：新闻详情查询;名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。2.创建新闻详情数据模型对比新闻详情与新闻列表项，发现新闻详情只比新闻列表项NewsInfo多了一个新闻内容属性，因此新闻详情可在NewsInfo中增加一个属性content实现。名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。3.设计获取新闻详情数据的方法在HttpUtil.ets中增加loadNewsDetail方法，根据新闻Id获取新闻详情数据名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true