鴻蒙系統(tǒng)應(yīng)用開發(fā)項(xiàng)目化教程 課件 項(xiàng)目6 開發(fā)新聞客戶端

鴻蒙應(yīng)用開發(fā)

本項(xiàng)目需要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的新聞客戶端。該應(yīng)用包含兩級(jí)界面，啟動(dòng)后顯示新聞列表主界面，單擊新聞列表中的某個(gè)新聞，會(huì)打開一個(gè)顯示該新聞的詳情界面。鴻蒙應(yīng)用開發(fā)項(xiàng)目6開發(fā)新聞客戶端教學(xué)目標(biāo)場(chǎng)景描述實(shí)現(xiàn)新聞列表實(shí)現(xiàn)新聞詳情目錄CONTENTS教學(xué)目標(biāo)6.1教學(xué)目標(biāo)123知識(shí)目標(biāo)能力目標(biāo)素質(zhì)目標(biāo)了解HTTP協(xié)議；掌握使用HTTP請(qǐng)求訪問(wèn)網(wǎng)絡(luò)數(shù)據(jù)的方法；掌握列表組件的數(shù)據(jù)展示能閱讀API文檔并進(jìn)行API接口測(cè)試能編程獲取網(wǎng)絡(luò)上的數(shù)據(jù)并進(jìn)行展示能根據(jù)需求完成業(yè)務(wù)邏輯編程和調(diào)試文檔閱讀與理解能力；良好的編碼習(xí)慣；嚴(yán)謹(jǐn)?shù)倪壿嬎季S場(chǎng)景描述6.2場(chǎng)景描述本任務(wù)需要實(shí)現(xiàn)一個(gè)簡(jiǎn)單的新聞客戶端。該應(yīng)用包含兩級(jí)頁(yè)面，啟動(dòng)后顯示新聞主界面，如圖6-1。新聞主界面分為3個(gè)部分：頂部為新聞的輪播圖，中間為新聞?lì)悇e導(dǎo)航，第三部分為某個(gè)類別的新聞列表，點(diǎn)某個(gè)新聞?lì)悇e，新聞列表中顯示該類別的新聞列表，點(diǎn)擊新聞列表中的某個(gè)新聞，會(huì)打開一個(gè)頁(yè)面顯示該新聞的詳情，如圖6-2。

圖6-1圖6-26.3實(shí)現(xiàn)新聞列表6.3.1任務(wù)工單任務(wù)名稱實(shí)現(xiàn)新聞列表學(xué)時(shí)4班級(jí)

組別

學(xué)號(hào)

姓名

任務(wù)環(huán)境安裝了鴻蒙開發(fā)環(huán)境且能訪問(wèn)互聯(lián)網(wǎng)的計(jì)算機(jī)實(shí)踐場(chǎng)地機(jī)房評(píng)價(jià)結(jié)果

任務(wù)描述根據(jù)新聞列表接口獲取新聞列表數(shù)據(jù)并顯示新聞列表任務(wù)目的1、知識(shí)目標(biāo)：（1）理解http協(xié)議編程方法（2）掌握List組件2、能力目標(biāo)：（1）能使用HTTP請(qǐng)求獲取網(wǎng)絡(luò)數(shù)據(jù)（2）能使用List組件展示數(shù)據(jù)3、素質(zhì)目標(biāo)：（1）能閱讀API接口文檔,規(guī)范編碼重難點(diǎn)1、重點(diǎn)：（1）HTTP網(wǎng)絡(luò)編程（2）列表數(shù)據(jù)展示2、難點(diǎn)：（1）HTTP網(wǎng)絡(luò)編程（2）列表數(shù)據(jù)展示知識(shí)鏈接（1）HTTP協(xié)議簡(jiǎn)介（2）使用GET請(qǐng)求獲取數(shù)據(jù)（3）使用POST請(qǐng)求獲取數(shù)據(jù)（4）List組件（5）JSON數(shù)據(jù)格式任務(wù)完成步驟：（1）理解新聞列表數(shù)據(jù)接口（2）創(chuàng)建項(xiàng)目，封裝網(wǎng)絡(luò)請(qǐng)求工具類（3）獲取新聞列表數(shù)據(jù)（4）創(chuàng)建新聞列表項(xiàng)的數(shù)據(jù)模型（5）設(shè)計(jì)新聞列表界面（6）實(shí)現(xiàn)新聞列表數(shù)據(jù)展示（7）測(cè)試新聞列表評(píng)價(jià)標(biāo)準(zhǔn)等級(jí)指標(biāo)A1、能理解HTTP協(xié)議、JSON數(shù)據(jù)格式轉(zhuǎn)換2、能獨(dú)立完成新聞列表數(shù)據(jù)獲取及文本和圖片顯示3、能獨(dú)立實(shí)現(xiàn)新聞?lì)悇e導(dǎo)航與列表數(shù)據(jù)聯(lián)動(dòng)B1、能理解HTTP協(xié)議、JSON數(shù)據(jù)格式轉(zhuǎn)換2、能較好的理解并成新聞列表數(shù)據(jù)獲取及內(nèi)容顯示C1、能基本理解HTTP協(xié)議、JSON數(shù)據(jù)格式2、能基本理解并老師幫助下完成新聞列表數(shù)據(jù)獲取及內(nèi)容顯示問(wèn)題及解決描述任務(wù)完成過(guò)程中遇到的問(wèn)題和解決方法：任務(wù)總結(jié)描述本次完成的任務(wù)過(guò)程中，你的收獲和感想：6.3.2知識(shí)清單HTTP協(xié)議簡(jiǎn)介1使用GET請(qǐng)求獲取數(shù)據(jù)2使用POST請(qǐng)求提交數(shù)據(jù)3List組件4JSON數(shù)據(jù)格式51.HTTP協(xié)議HTTP協(xié)議是超文本傳輸協(xié)議（HyperTextTransferProtocol）的縮寫，是萬(wàn)維網(wǎng)（WorldWideWeb，WWW）的數(shù)據(jù)通信的基礎(chǔ)。HTTP是一個(gè)簡(jiǎn)單的請(qǐng)求—響應(yīng)協(xié)議，有GET、POST、HEAD、PUT、DELETE、OPTIONS等多種請(qǐng)求方式，其中最常用的是GET和POST兩種。GET用于向服務(wù)器指定的資源發(fā)出“顯示”請(qǐng)求，而POST用于向服務(wù)器指定的資源提交數(shù)據(jù)，請(qǐng)求服務(wù)器進(jìn)行處理。使用HarmonyOS進(jìn)行的移動(dòng)互聯(lián)網(wǎng)應(yīng)開發(fā)時(shí)，HTTP數(shù)據(jù)請(qǐng)求功能主要由http模塊提供，包括發(fā)起請(qǐng)求、中斷請(qǐng)求、訂閱/取消訂閱HTTPResponseHeader事件等。2.使用GET請(qǐng)求數(shù)據(jù)importhttpfrom'@.http';1lethttpRequest=http.createHttp();2letresponseResult=httpRequest.request(3//請(qǐng)求url地址4url,5{6//請(qǐng)求方式7method:http.RequestMethod.GET,8//可選，默認(rèn)為60s9connectTimeout:60000,10//可選，默認(rèn)為60s11readTimeout:60000,12//開發(fā)者根據(jù)自身業(yè)務(wù)需要添加header字段13header:{14'Content-Type':'application/json'15}16});1responseResult.then((value)=>{2if(value.responseCode===200){3//請(qǐng)求成功4letresult=`${value.result}`;5letresultJson=JSON.parse(result);6}else{7//請(qǐng)求失敗8}9returnserverData;10}).catch(()=>{11//請(qǐng)求異常12})3.使用POST提交數(shù)據(jù)1leturl="https://EXAMPLE_URL";2letresponseResult=httpRequest.request(3//請(qǐng)求url地址4url,5{6//請(qǐng)求方式7method:http.RequestMethod.POST,8//請(qǐng)求的額外數(shù)據(jù)。9extraData:{10"param1":"value1",11"param2":"value2",12},13//可選，默認(rèn)為60s14connectTimeout:60000,15//可選，默認(rèn)為60s16readTimeout:60000,17//開發(fā)者根據(jù)自身業(yè)務(wù)需要添加header字段18header:{19'Content-Type':'application/json'20}21}22);4.List組件List是用來(lái)顯示列表的組件，包含一系列相同寬度的列表項(xiàng)，適合連續(xù)、多行地呈現(xiàn)同類數(shù)據(jù)。包含ListItem子組件。接口：List(value?:{space?:number|string,initialIndex?:number,scroller?:Scroller})常見屬性：listDirection:Axis.Vertical|Horizontal，用來(lái)指定列表項(xiàng)的排列方式，分別指定垂直或水平方向排列，默認(rèn)為垂直排列。divider:{strokeWidth:Length,color?:ResourceColor,startMargin?:Length,endMargin?:Length}|null，用來(lái)指定列表的分割線。5.JSON數(shù)據(jù)格式JSON(JavaScriptObjectNotation)是一種輕量級(jí)的數(shù)據(jù)交換格式。易于人閱讀和編寫。同時(shí)也易于機(jī)器解析和生成。它基于JavaScriptProgrammingLanguage,StandardECMA-2623rdEdition-December1999的一個(gè)子集。JSON常用于移動(dòng)端設(shè)備與服務(wù)器間數(shù)據(jù)的傳輸。JSON數(shù)據(jù)有兩種結(jié)構(gòu)：對(duì)象和數(shù)組。JSON對(duì)象以“｛”開始，以“｝”結(jié)束，中間部分的屬性用“,”分割，屬性為鍵值對(duì)（key:value）構(gòu)成，如：{"id":25,"status":"1","sort":2,"advTitle":"首頁(yè)輪播"}JSON數(shù)組以“[”開始，以“]”結(jié)束，中間有0個(gè)或多個(gè)對(duì)象或數(shù)組構(gòu)成。比如下列代碼的rows就是一個(gè)數(shù)組對(duì)象。{"total":3,"rows":[{"id":25,"status":"1","sort":2,"advTitle":"首頁(yè)輪播","type":"2"},{"id":26,"status":"1","sort":3,"advTitle":"首頁(yè)輪播","type":"2"}],"code":200,"msg":"查詢成功"}6.3.3實(shí)施步驟步驟1理解新聞列表數(shù)據(jù)接口步驟2創(chuàng)建項(xiàng)目，封裝網(wǎng)絡(luò)請(qǐng)求工具類2176543步驟3獲取新聞列表數(shù)據(jù)步驟4創(chuàng)建新聞列表項(xiàng)的數(shù)據(jù)模型步驟5設(shè)計(jì)新聞列表界面步驟6實(shí)現(xiàn)新聞列表數(shù)據(jù)的展示步驟7測(cè)試新聞列表1.理解新聞列表數(shù)據(jù)接口本項(xiàng)目的新聞數(shù)據(jù)接口來(lái)源于聚合數(shù)據(jù)網(wǎng)站，網(wǎng)址為：/。新聞客戶端的學(xué)習(xí)者需要在該網(wǎng)站注冊(cè)，并進(jìn)行實(shí)名認(rèn)證，然后申請(qǐng)免費(fèi)的【新聞?lì)^條】數(shù)據(jù)接口，該接口包含新聞數(shù)據(jù)列表查詢和新聞數(shù)據(jù)詳情兩個(gè)接口。獲取新聞列表接口：接口地址：/toutiao/index返回格式：json請(qǐng)求方式：get/post請(qǐng)求示例：/toutiao/index?type=top&key=APPKEY接口備注：返回頭條(推薦)、國(guó)內(nèi)，娛樂，體育，軍事，科技，財(cái)經(jīng)，時(shí)尚等新聞信息;2.新建項(xiàng)目，封裝網(wǎng)絡(luò)請(qǐng)求工具類打開DevEcoStudio，新建HarmonyOS的EmptyAbility工程，ProjectName為NewsClient在項(xiàng)目中entry/src/main/ets下新建bean、utils和view共3個(gè)文件夾在utils目錄下創(chuàng)建HttpUtils工具類，封裝HTTP的GET、POST請(qǐng)求以及新聞?lì)悇e和新聞詳情的獲取方法3.獲取新聞列表數(shù)據(jù)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.創(chuàng)建新聞列表項(xiàng)的數(shù)據(jù)模型根據(jù)新聞列表接口返回的數(shù)據(jù)，在bean文件夾下創(chuàng)建新聞列表項(xiàng)數(shù)據(jù)模型NewsInfo.ets1/*2新聞列表項(xiàng)數(shù)據(jù)模型3*/4exportclassNewsInfo{5uniquekey:string6title:string7date:string8category:string9author_name:string10url:string11thumbnail_pic_s:string12is_content:number。。。。。5.設(shè)計(jì)實(shí)現(xiàn)新聞列表界面根據(jù)圖6-1所示，設(shè)計(jì)新聞列表界面（暫不考慮輪播圖和類別導(dǎo)航），使用列表組件List和ListItem組件實(shí)現(xiàn)新聞列表數(shù)據(jù)的展示。(1)在view文件夾中新建NewsList.ets和NewsListItem組件(2)實(shí)現(xiàn)NewsList和NewsListItem子組件之間參數(shù)傳遞。5.設(shè)計(jì)實(shí)現(xiàn)新聞列表界面根據(jù)圖6-1所示，設(shè)計(jì)新聞列表界面（暫不考慮輪播圖和類別導(dǎo)航），使用列表組件List和ListItem組件實(shí)現(xiàn)新聞列表數(shù)據(jù)的展示。(1)在view文件夾中新建NewsList.ets和NewsListItem組件(2)實(shí)現(xiàn)NewsList和NewsListItem子組件之間參數(shù)傳遞。圖6-7新聞列表項(xiàng)布局6.實(shí)現(xiàn)新聞列表數(shù)據(jù)展示在Index.ets文件中添加代碼，調(diào)用NewList，實(shí)現(xiàn)新聞列表數(shù)據(jù)的顯示功能。7.測(cè)試新聞列表在遠(yuǎn)程模擬器中啟動(dòng)API9的P50模擬器，運(yùn)行項(xiàng)目，顯示TOP類別的新聞列表,效果如圖6-8。6.3.4任務(wù)拓展:實(shí)現(xiàn)新聞?lì)悇e導(dǎo)航從新聞列表接口可知，新聞包括：top(推薦,默認(rèn))、guonei(國(guó)內(nèi))、guoji(國(guó)際)、yule(娛樂)、tiyu(體育)、junshi(軍事)、keji(科技)、caijing(財(cái)經(jīng))、youxi(游戲)、qiche(汽車)、jiankang(健康)等多個(gè)類別。前面的新聞列表任務(wù)只能顯示默認(rèn)top類別的新聞列表，而無(wú)法查看其他類別的新聞列表?，F(xiàn)在請(qǐng)你在新聞列表頁(yè)面的頂部增加一個(gè)新聞?lì)悇e導(dǎo)航，點(diǎn)擊不同的新聞?lì)悇e名稱，顯示不同類別的新聞列表，如圖。6.3.5常見問(wèn)題及解決1.無(wú)法獲取新聞列表數(shù)據(jù)

首先檢查網(wǎng)絡(luò)請(qǐng)求的權(quán)限配置，然后檢測(cè)API接口的調(diào)用次數(shù)是否達(dá)到限制次數(shù)，最后檢查JSON返回的數(shù)據(jù)格式是否正確處理。2.新聞?lì)悇e變化沒有引起新聞列表數(shù)據(jù)變化

檢測(cè)通信變量categoryId的設(shè)置是否正確。NewsList與CategoryList兩個(gè)組件都是Index的子組件，三者是通過(guò)categoryId變量通信的，Index與CategoryList時(shí)雙向通信，CategoryList中類別的變化通過(guò)雙向變量反饋給Index，然后Index的categroyId的變化同步到NewsList。6.3.6任務(wù)小結(jié)通過(guò)完成本任務(wù)，我們學(xué)會(huì)了使用HTTP協(xié)議進(jìn)行網(wǎng)絡(luò)新聞列表數(shù)據(jù)的獲取，學(xué)會(huì)了使用List和ListItem組件進(jìn)行新聞列表數(shù)據(jù)的展示以及新聞?lì)悇e列表的點(diǎn)擊事件處理，在進(jìn)行網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求時(shí)，需要在module.json5配置文件中進(jìn)行網(wǎng)絡(luò)訪問(wèn)授權(quán)，網(wǎng)絡(luò)請(qǐng)求的功能代碼需要使用異步請(qǐng)求進(jìn)行處理，通過(guò)回調(diào)接口處理網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)。名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。6.4實(shí)現(xiàn)新聞詳情6.4.1任務(wù)工單任務(wù)名稱實(shí)現(xiàn)新聞詳情學(xué)時(shí)4班級(jí)

組別

學(xué)號(hào)

姓名

任務(wù)環(huán)境安裝了鴻蒙開發(fā)環(huán)境且能訪問(wèn)互聯(lián)網(wǎng)的計(jì)算機(jī)實(shí)踐場(chǎng)地機(jī)房評(píng)價(jià)結(jié)果

任務(wù)描述根據(jù)新聞詳情接口獲取新聞詳情數(shù)據(jù)并顯示任務(wù)目的1、知識(shí)目標(biāo)：（1）掌握Web、Swiper等組件使用方法（2）掌握頁(yè)面間跳轉(zhuǎn)與參數(shù)傳遞2、能力目標(biāo)：（1）能實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與參數(shù)傳遞（2）能使用Web顯示網(wǎng)頁(yè)內(nèi)容，（3）能設(shè)計(jì)輪播圖。3、素質(zhì)目標(biāo)：（1）能閱讀API接口文檔,（2）邏輯嚴(yán)密，編碼規(guī)范重難點(diǎn)1、重點(diǎn)：（1）Web與Swiper組件使用、2、難點(diǎn)：（1）Web與Swiper組件使用知識(shí)鏈接（1）Web組件（2）Swiper組件任務(wù)完成步驟：（1）理解新聞詳情數(shù)據(jù)接口（2）創(chuàng)建新聞詳情數(shù)據(jù)模型（3）設(shè)計(jì)獲取新聞詳情數(shù)據(jù)的方法（4）設(shè)計(jì)新聞詳情界面（5）跳轉(zhuǎn)到新聞詳情界面（6）測(cè)試查看新聞詳情評(píng)價(jià)標(biāo)準(zhǔn)等級(jí)指標(biāo)A1、能熟練使用HTTP組件獲取網(wǎng)絡(luò)數(shù)據(jù)2、能熟練實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與參數(shù)傳遞3、能熟練使用Web組件顯示網(wǎng)頁(yè)內(nèi)容4、能獨(dú)立完成新聞詳情和新聞?shì)啿D顯示B1、能熟練使用HTTP組件獲取網(wǎng)絡(luò)數(shù)據(jù)2、能熟練實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)與參數(shù)傳遞3、能熟練使用Web組件顯示網(wǎng)頁(yè)內(nèi)容4、能較好的完成新聞詳情顯示C1、能基本理解HTTP組件的使用2、能基本理解頁(yè)面跳轉(zhuǎn)與參數(shù)傳遞3、能基本理解Web組件4、能在老師指導(dǎo)下完成新聞詳情顯示問(wèn)題及解決描述任務(wù)完成過(guò)程中遇到的問(wèn)題和解決方法：任務(wù)總結(jié)描述本次完成的任務(wù)過(guò)程中，你的收獲和感想：6.4.2知識(shí)清單1.Web組件12.Swiper21.Web組件Web其實(shí)就是一個(gè)內(nèi)置的瀏覽器組件，既可以用來(lái)加載顯示一個(gè)網(wǎng)址的網(wǎng)頁(yè)內(nèi)容，也可以加載顯示一段HTML文本內(nèi)容，還可以用來(lái)播放音樂和視頻。使用Web時(shí)需要配置應(yīng)用的網(wǎng)絡(luò)權(quán)限ohos.permission.INTERNET。Web組件的API接口為：

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

其中src和controller為必填項(xiàng)，src指定網(wǎng)頁(yè)資源的地址，controller用于控制Web組件各種行為。從API9開始，建議使用WebviewController。一個(gè)WebviewController對(duì)象只能控制一個(gè)Web組件，且必須在Web組件和WebviewController綁定后，才能調(diào)用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內(nèi)容。（3）runJavaScript(script:string):Promise<string>異步執(zhí)行JavaScript腳本，并通過(guò)Promise方式返回腳本執(zhí)行的結(jié)果。runJavaScript需要在loadUrl完成后，比如onPageEnd中調(diào)用。（4）zoom(factor:number):void調(diào)整當(dāng)前網(wǎng)頁(yè)的縮放比例。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組件滑塊視圖容器，提供子組件滑動(dòng)輪播顯示的能力,用來(lái)制作輪播廣告圖。接口：Swiper(controller?:SwiperController)controller給組件綁定一個(gè)控制器，用來(lái)控制組件翻頁(yè)。當(dāng)前顯示的組件索引index變化時(shí)觸發(fā)onChange(index)事件。名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。2.Swiper組件Swiper組件的常見屬性名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。6.4.3實(shí)施步驟步驟1理解新聞詳情數(shù)據(jù)接口步驟2創(chuàng)建新聞詳情數(shù)據(jù)模型216543步驟3設(shè)計(jì)獲取新聞詳情數(shù)據(jù)的方法步驟4設(shè)計(jì)新聞詳情界面步驟5跳轉(zhuǎn)到新聞詳情界面步驟6測(cè)試查看新聞詳情1.理解新聞詳情數(shù)據(jù)接口接口地址：/toutiao/content返回格式：json請(qǐng)求方式：httpget/post請(qǐng)求示例：/toutiao/content?key=&uniquekey=b*******7b接口備注：新聞詳情查詢;名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。2.創(chuàng)建新聞詳情數(shù)據(jù)模型對(duì)比新聞詳情與新聞列表項(xiàng)，發(fā)現(xiàn)新聞詳情只比新聞列表項(xiàng)NewsInfo多了一個(gè)新聞內(nèi)容屬性，因此新聞詳情可在NewsInfo中增加一個(gè)屬性content實(shí)現(xiàn)。名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。3.設(shè)計(jì)獲取新聞詳情數(shù)據(jù)的方法在HttpUtil.ets中增加loadNewsDetail方法，根據(jù)新聞Id獲取新聞詳情數(shù)據(jù)名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。4.設(shè)計(jì)新聞詳情界面根據(jù)圖6-10和圖6-11，在pages目錄下創(chuàng)建新聞詳情界面NewsDetails.ets，實(shí)現(xiàn)新聞詳情界面名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。5.跳轉(zhuǎn)到新聞詳情界面在新聞列表組件NewsList.ets中，為每個(gè)ListItem項(xiàng)添加onClick事件，點(diǎn)擊某個(gè)新聞項(xiàng)，跳轉(zhuǎn)到新聞詳情界面。名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。6.測(cè)試查看新聞詳情在遠(yuǎn)程API9的模擬器P50中運(yùn)行項(xiàng)目，效果如同圖6-12。點(diǎn)擊某個(gè)新聞項(xiàng)，則會(huì)跳轉(zhuǎn)到新聞詳情界面顯示新聞的詳細(xì)信息。名稱類型默認(rèn)值必填描述indexnumber0否當(dāng)前在容器中顯示的子組件的索引值。autoplaybooleanfalse否子組件是否自動(dòng)播放，自動(dòng)播放狀態(tài)下，導(dǎo)航點(diǎn)不可操作5+。intervalnumber3000否使用自動(dòng)播放時(shí)播放的時(shí)間間隔，單位為ms。indicatorbooleantrue否是否啟用導(dǎo)航點(diǎn)指示器，默認(rèn)true。digital5+booleanfalse否是否啟用數(shù)字導(dǎo)航點(diǎn)，默認(rèn)為false。必須設(shè)置indicator時(shí)才能生效數(shù)字導(dǎo)航點(diǎn)。6.4.4任務(wù)拓展--實(shí)現(xiàn)新聞圖片的輪播從當(dāng)前類別的新聞列表中選擇5