鴻蒙應用開發

本項目需要實現一個簡單的新聞客戶端。該應用包含兩級界面，啟動后顯示新聞列表主界面，單擊新聞列表中的某個新聞，會打開一個顯示該新聞的詳情界面。鴻蒙應用開發項目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類別的新聞列表，而無法查看其他類別的新聞列表?，F在請你在新聞列表頁面的頂部增加一個新聞類別導航，點擊不同的新聞類別名稱，顯示不同類別的新聞列表，如圖。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