鸿蒙系统应用开发项目化教程 课件 项目6 开发新闻客户端

鸿蒙应用开发

本项目需要实现一个简单的新闻客户端。该应用包含两级界面，启动后显示新闻列表主界面，单击新闻列表中的某个新闻，会打开一个显示该新闻的详情界面。鸿蒙应用开发项目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。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。4.设计新闻详情界面根据图6-10和图6-11，在pages目录下创建新闻详情界面NewsDetails.ets，实现新闻详情界面名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。5.跳转到新闻详情界面在新闻列表组件NewsList.ets中，为每个ListItem项添加onClick事件，点击某个新闻项，跳转到新闻详情界面。名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。6.测试查看新闻详情在远程API9的模拟器P50中运行项目，效果如同图6-12。点击某个新闻项，则会跳转到新闻详情界面显示新闻的详细信息。名称类型默认值必填描述indexnumber0否当前在容器中显示的子组件的索引值。autoplaybooleanfalse否子组件是否自动播放，自动播放状态下，导航点不可操作5+。intervalnumber3000否使用自动播放时播放的时间间隔，单位为ms。indicatorbooleantrue否是否启用导航点指示器，默认true。digital5+booleanfalse否是否启用数字导航点，默认为false。必须设置indicator时才能生效数字导航点。6.4.4任务拓展--实现新闻图片的轮播从当前类别的新闻列表中选择5