鴻蒙系統(tǒng)應(yīng)用開(kāi)發(fā)項(xiàng)目化教程 課件 項(xiàng)目3 創(chuàng)建通訊錄

長(zhǎng)沙民政職業(yè)技術(shù)學(xué)院鴻蒙應(yīng)用開(kāi)發(fā)

本任務(wù)需要實(shí)現(xiàn)一個(gè)聯(lián)系人的應(yīng)用。1.主界面能顯示目前用戶保存的所有聯(lián)系人信息（性別圖標(biāo)、姓名、電話）2.在通訊錄主界面點(diǎn)擊新增圖標(biāo)時(shí)，進(jìn)入新增聯(lián)系人界面。如果用戶按界面要求填入電話、聯(lián)系人名稱、性別等信息，點(diǎn)擊保存圖標(biāo)，則將在系統(tǒng)中保存聯(lián)系人信息，并自動(dòng)追加到主界面已有聯(lián)系人的最后；如果用戶點(diǎn)擊了對(duì)話框的取消圖標(biāo)，則不會(huì)保存新建聯(lián)系人對(duì)話框輸入的信息且自動(dòng)回到主界面。項(xiàng)目三創(chuàng)建通訊錄主界面新建聯(lián)系人界面聯(lián)系人詳情界面主界面學(xué)習(xí)目標(biāo)知識(shí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)教學(xué)目標(biāo)掌握常用UI組件TextInput、Search的常見(jiàn)方法。掌握線性界面布局。掌握關(guān)系型數(shù)據(jù)庫(kù)的使用方法。掌握使用列表List及ListItem顯示條目數(shù)據(jù)的方法。掌握頁(yè)面路由以及參數(shù)傳遞方法。熟練掌握鴻蒙移動(dòng)應(yīng)用開(kāi)發(fā)的基本流程。能熟練應(yīng)用線性布局編寫(xiě)界面。能熟練利用List及ListItem顯示列表。能熟練使用關(guān)系數(shù)據(jù)庫(kù)進(jìn)行插入、修改、刪除、查詢數(shù)據(jù)。能熟練掌握頁(yè)面路由及參數(shù)傳遞。培養(yǎng)并踐行編碼規(guī)范意識(shí)，變量命名可讀、格式規(guī)范，注釋清晰易讀。培養(yǎng)自主學(xué)習(xí)能力，通過(guò)閱讀文檔，學(xué)習(xí)新知并能在實(shí)際項(xiàng)目中運(yùn)用、解決問(wèn)題。任務(wù)一實(shí)現(xiàn)主界面和新增聯(lián)系人界面任務(wù)二向通訊錄增加聯(lián)系人任務(wù)三顯示通訊錄聯(lián)系人列表任務(wù)四查看聯(lián)系人詳情目錄CONTENTS實(shí)現(xiàn)主界面和新增聯(lián)系人界面任務(wù)描述

通訊錄的主界面需求如下面左圖所示，請(qǐng)實(shí)現(xiàn)主界面。當(dāng)用戶點(diǎn)擊了新增圖標(biāo)時(shí)，界面跳轉(zhuǎn)到新增界面，新增界面如右圖所示。在新增界面，點(diǎn)擊標(biāo)題欄的回退圖標(biāo)，將回到主界面。主界面聯(lián)系人詳情界面任務(wù)重點(diǎn)及難點(diǎn)任務(wù)目的1．知識(shí)目標(biāo)：（1）掌握常用UI組件Search、TextInput的常見(jiàn)方法；（2）掌握使用router進(jìn)行頁(yè)面跳轉(zhuǎn)的方法；2．能力目標(biāo)：（1）熟練掌握鴻蒙移動(dòng)開(kāi)發(fā)的基本流程中的創(chuàng)建項(xiàng)目、創(chuàng)建界面布局的過(guò)程；（2）能熟練應(yīng)用線性布局和層疊布局編寫(xiě)界面；（3）能熟練使用router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)3．素質(zhì)目標(biāo)：（1）通過(guò)界面布局培養(yǎng)從整體到局部的思維；（2）學(xué)習(xí)讀API文檔；重難點(diǎn)重點(diǎn)：（1）能熟練使用router實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)（2）能熟練應(yīng)用線性布局和層疊布局編寫(xiě)界面；難點(diǎn)：（1）能熟練應(yīng)用線性布局和層疊布局編寫(xiě)界面；1.1完成任務(wù)所需知識(shí)清單1Search2TextInput3router1.1完成任務(wù)所需知識(shí)清單-Search組件當(dāng)需要對(duì)所瀏覽內(nèi)容根據(jù)關(guān)鍵字搜索特定條目時(shí)就可以用到搜索框組件。接口定義如下：Search(options?:{value?:string;placeholder?:string;icon?:string;controller?:SearchController})1、Search組件--實(shí)現(xiàn)搜索框的組件接口參數(shù)說(shuō)明表參數(shù)名參數(shù)類型必填參數(shù)描述valuestring否設(shè)置當(dāng)前顯示的搜索文本內(nèi)容placeholderstring否設(shè)置無(wú)輸入時(shí)的提示文本iconstring否設(shè)置搜索圖標(biāo)路徑，默認(rèn)使用系統(tǒng)搜索圖標(biāo)，圖標(biāo)支持的圖源格式:svg、jpg和pngcontrollerSearchController否設(shè)置Search組件控制器1.1完成任務(wù)所需知識(shí)清單-Search組件除支持UI組件的通用屬性（比如Width，Height等），還支持其余屬性1、Search組件實(shí)現(xiàn)搜索框的組件名稱參數(shù)類型描述searchButtonstring搜索框末尾搜索按鈕文本內(nèi)容，默認(rèn)無(wú)搜索按鈕placeholderColorResourceColor設(shè)置placeholder文本顏色placeholderFontFont設(shè)置placeholder文本樣式textFontFont設(shè)置搜索框內(nèi)輸入文本樣式textAlignTextAlign設(shè)置文本在搜索框中的對(duì)齊方式。默認(rèn)值：TextAlign.StartcopyOption9+CopyOptions設(shè)置輸入的文本是否可復(fù)制1.1完成任務(wù)所需知識(shí)清單-Search組件除支持通用事件外，還支持其余事件1.Search組件實(shí)現(xiàn)搜索框的組件名稱功能描述onSubmit(callback:(value:string)=>void)點(diǎn)擊搜索圖標(biāo)、搜索按鈕或者按下軟鍵盤(pán)搜索按鈕時(shí)觸發(fā)該回調(diào)。-value:當(dāng)前搜索框中輸入的文本內(nèi)容onChange(callback:(value:string)=>void)輸入內(nèi)容發(fā)生變化時(shí)，觸發(fā)該回調(diào)。-value:當(dāng)前搜索框中輸入的文本內(nèi)容1.1完成任務(wù)所需知識(shí)清單-Search組件1、Search組件實(shí)現(xiàn)搜索框的組件示例：實(shí)現(xiàn)一個(gè)如圖的搜索框。1.1完成任務(wù)所需知識(shí)清單-Search組件1

@Entry2

@Component3

structSearchExample{4

@StatechangeValue:string=''5

@StatesubmitValue:string=''6

controller:SearchController=newSearchController()78

build(){9

Column(){10

Text('onSubmit:'+this.submitValue).fontSize(18).margin(15)11

Text('onChange:'+this.changeValue).fontSize(18).margin(15)12

Search({value:this.changeValue,placeholder:'Typetosearch...',controller:this.controller})13

.searchButton('SEARCH')14

.width(400)15

.height(40)1.1完成任務(wù)所需知識(shí)清單-Search組件16

.placeholderColor(Color.Grey)17

.placeholderFont({size:14,weight:400})18

.textFont({size:14,weight:400})19

.onSubmit((value:string)=>{20

this.submitValue=value21

})22

.onChange((value:string)=>{23

this.changeValue=value24

})25

.margin(20)26

Button('SetcaretPosition1')27

.onClick(()=>{28

//設(shè)置光標(biāo)位置到輸入的第一個(gè)字符后29

this.controller.caretPosition(1)30

})31

}.width('100%')32

}33

}1.1完成任務(wù)所需知識(shí)清單-TextInput組件接口參數(shù)說(shuō)明表TextInput是單行文本輸入框組件，可以設(shè)置輸入文本的數(shù)據(jù)類型為字符或者數(shù)字或者密碼，可以設(shè)置輸入框的默認(rèn)輸入內(nèi)容等屬性。接口定義如下：TextInput(value?:{placeholder?:ResourceStr,text?:ResourceStr,controller?:TextInputController})參數(shù)名參數(shù)類型必填參數(shù)描述placeholderResourceStr否設(shè)置無(wú)輸入時(shí)的提示文本textResourceStr否設(shè)置輸入框當(dāng)前的文本內(nèi)容controller8+TextInputController否設(shè)置TextInput控制器1.1完成任務(wù)所需知識(shí)清單-TextInput組件

TextInput組件文本輸入框除支持通用屬性外，還支持其余屬性名稱參數(shù)類型描述typeInputType設(shè)置輸入框類型。默認(rèn)值：InputType.Normal；枚舉值可以選擇Normal,Password,Email,Number,PhoneNumberplaceholderColorResourceColor設(shè)置placeholder文本顏色placeholderFontFont設(shè)置placeholder文本樣式enterKeyTypeEnterKeyType設(shè)置輸入法回車鍵類型，目前僅支持默認(rèn)類型顯示。默認(rèn)值：EnterKeyType.DonemaxLengthnumber設(shè)置文本的最大輸入字符數(shù)copyOptionCopyOptions設(shè)置輸入的文本是否可復(fù)制。設(shè)置CopyOptions.None時(shí)，當(dāng)前TextArea中的文字無(wú)法被復(fù)制或剪切，僅支持粘貼showPasswordIconboolean密碼輸入模式時(shí)，輸入框末尾的圖標(biāo)是否顯示。默認(rèn)值：truestyleTextInputStyle設(shè)置輸入框?yàn)槟J(rèn)風(fēng)格或內(nèi)聯(lián)輸入風(fēng)格。默認(rèn)值：TextInputStyle.DefaulttextAlignTextAlign設(shè)置輸入文本在輸入框中的對(duì)齊方式。默認(rèn)值：TextAlign.Start

事件接口名稱功能描述onChange(callback:(value:string)=>void)輸入內(nèi)容發(fā)生變化時(shí)，觸發(fā)該回調(diào)。value：輸入的文本內(nèi)容。onSubmit(callback:(enterKey:EnterKeyType)=>void)按下輸入法回車鍵觸發(fā)該回調(diào)，返回值為當(dāng)前輸入法回車鍵的類型。enterKeyType：輸入法回車鍵類型。具體類型見(jiàn)EnterKeyType枚舉說(shuō)明。onEditChanged(callback:(isEditing:boolean)=>void)(deprecated)輸入狀態(tài)變化時(shí)，觸發(fā)該回調(diào)。從API8開(kāi)始，建議使用onEditChange。onEditChange(callback:(isEditing:boolean)=>void)8+輸入狀態(tài)變化時(shí)，觸發(fā)該回調(diào)。isEditing為true表示正在輸入。1.1完成任務(wù)所需知識(shí)清單-TextInput組件

TextInput樣例1.1完成任務(wù)所需知識(shí)清單-TextInput組件1@Entry2@Component3structTextInputExample{4@Statetext:string=''5controller:TextInputController=newTextInputController()67build(){8Column(){9TextInput({placeholder:'inputyourword...',controller:this.controller})10.placeholderColor(Color.Grey)11.placeholderFont({size:14,weight:400})12.caretColor(Color.Blue)13.width(400)14.height(40)15.margin(20)16.fontSize(14)17.fontColor(Color.Black)18.onChange((value:string)=>{19this.text=value20})

TextInput樣例1.1完成任務(wù)所需知識(shí)清單-TextInput組件21Text(this.text)22Button('SetcaretPosition1')23.margin(15)24.onClick(()=>{25//將光標(biāo)移動(dòng)至第一個(gè)字符后26this.controller.caretPosition(1)27})28//密碼輸入框29TextInput({placeholder:'inputyourpassword...'})30.width(400)31.height(40)32.margin(20)33.type(InputType.Password)34.maxLength(9)35.showPasswordIcon(true)36//內(nèi)聯(lián)風(fēng)格輸入框37TextInput({placeholder:'inlinestyle'})38.width(400)39.height(50)40.margin(20)41.borderRadius(0)42.style(TextInputStyle.Inline)43}.width('100%')44}

頁(yè)面路由指在應(yīng)用程序中實(shí)現(xiàn)不同頁(yè)面之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞。HarmonyOS提供了Router模塊，通過(guò)不同的url地址，可以方便地進(jìn)行頁(yè)面路由，訪問(wèn)不同的頁(yè)面。兩種跳轉(zhuǎn)模式，決定了目標(biāo)頁(yè)是否會(huì)替換當(dāng)前頁(yè)：●

router.pushUrl()：目標(biāo)頁(yè)不會(huì)替換當(dāng)前頁(yè)，而是壓入頁(yè)面棧。這樣可以保留當(dāng)前頁(yè)的狀態(tài)，并且可以通過(guò)返回鍵或者調(diào)用router.back()方法返回到當(dāng)前頁(yè)?！?/p>

router.replaceUrl()：目標(biāo)頁(yè)會(huì)替換當(dāng)前頁(yè)，并銷毀當(dāng)前頁(yè)。這樣可以釋放當(dāng)前頁(yè)的資源，并且無(wú)法返回到當(dāng)前頁(yè)。1.1完成任務(wù)所需知識(shí)清單-router頁(yè)面路由

兩種實(shí)例模式，分別是Standard和Single。這兩種模式?jīng)Q定了目標(biāo)url是否會(huì)對(duì)應(yīng)多個(gè)實(shí)例?！?/p>

Standard：標(biāo)準(zhǔn)實(shí)例模式，也是默認(rèn)情況下的實(shí)例模式。每次調(diào)用該方法都會(huì)新建一個(gè)目標(biāo)頁(yè)，并壓入棧頂?！?/p>

Single：?jiǎn)螌?shí)例模式。即如果目標(biāo)頁(yè)的url在頁(yè)面棧中已經(jīng)存在同url頁(yè)面，則離棧頂最近的同url頁(yè)面會(huì)被移動(dòng)到棧頂，并重新加載；如果目標(biāo)頁(yè)的url在頁(yè)面棧中不存在同url頁(yè)面，則按照標(biāo)準(zhǔn)模式跳轉(zhuǎn)。1.1完成任務(wù)所需知識(shí)清單-router頁(yè)面路由

場(chǎng)景一：有一個(gè)主頁(yè)（Home）和一個(gè)詳情頁(yè)（Detail），希望從主頁(yè)點(diǎn)擊一個(gè)商品，跳轉(zhuǎn)到詳情頁(yè)。同時(shí)，需要保留主頁(yè)在頁(yè)面棧中，以便返回時(shí)恢復(fù)狀態(tài)。這種場(chǎng)景下，可以使用pushUrl()方法，并且使用Standard實(shí)例模式（標(biāo)準(zhǔn)實(shí)例模式下，router.RouterMode.Standard參數(shù)可以省略）。1//在Home頁(yè)面中2functiononJumpClick():void{3router.pushUrl({4url:'pages/Detail'//目標(biāo)url5},router.RouterMode.Standard,(err)=>{6if(err){7console.error(`InvokepushUrlfailed,codeis${err.code},messageis${err.message}`);8return;9}10('InvokepushUrlsucceeded.');11});12}1.1完成任務(wù)所需知識(shí)清單-router頁(yè)面路由

場(chǎng)景二：有一個(gè)登錄頁(yè)（Login）和一個(gè)個(gè)人中心頁(yè)（Profile），希望從登錄頁(yè)成功登錄后，跳轉(zhuǎn)到個(gè)人中心頁(yè)。同時(shí)，銷毀登錄頁(yè)，在返回時(shí)直接退出應(yīng)用。這種場(chǎng)景下，可以使用replaceUrl()方法，并且使用Standard實(shí)例模式（或者省略）。場(chǎng)景三：有一個(gè)設(shè)置頁(yè)（Setting）和一個(gè)主題切換頁(yè)（Theme），希望從設(shè)置頁(yè)點(diǎn)擊主題選項(xiàng)，跳轉(zhuǎn)到主題切換頁(yè)。同時(shí)，需要保證每次只有一個(gè)主題切換頁(yè)存在于頁(yè)面棧中，在返回時(shí)直接回到設(shè)置頁(yè)。這種場(chǎng)景下，可以使用pushUrl()方法，并且使用Single實(shí)例模式。1.1完成任務(wù)所需知識(shí)清單-router頁(yè)面路由

場(chǎng)景四：有一個(gè)搜索結(jié)果列表頁(yè)（SearchResult）和一個(gè)搜索結(jié)果詳情頁(yè)（SearchDetail），希望從搜索結(jié)果列表頁(yè)點(diǎn)擊某一項(xiàng)結(jié)果，跳轉(zhuǎn)到搜索結(jié)果詳情頁(yè)。同時(shí)，如果該結(jié)果已經(jīng)被查看過(guò)，則不需要再新建一個(gè)詳情頁(yè)，而是直接跳轉(zhuǎn)到已經(jīng)存在的詳情頁(yè)。這種場(chǎng)景下，可以使用replaceUrl()方法，并且使用Single實(shí)例模式。1.3完成任務(wù)所需知識(shí)清單-router頁(yè)面路由

當(dāng)用戶在一個(gè)頁(yè)面完成操作后，通常需要返回到上一個(gè)頁(yè)面或者指定頁(yè)面，這就需要用到頁(yè)面返回功能。方式一：返回到上一個(gè)頁(yè)面。1router.back();方式二：返回到指定頁(yè)面。1router.back({2url:'pages/Home'3});1.3完成任務(wù)所需知識(shí)清單-router頁(yè)面路由輸入主題完成應(yīng)用的主界面UI框架設(shè)計(jì)1.2任務(wù)1的實(shí)施任務(wù)目標(biāo)創(chuàng)建主界面

（1）創(chuàng)建項(xiàng)目啟動(dòng)開(kāi)發(fā)工具DevEcoStudio，創(chuàng)建一個(gè)新項(xiàng)目，選擇“EmptyAbility”。在項(xiàng)目配置對(duì)話框中設(shè)置項(xiàng)目名為MyContacts，項(xiàng)目類型為Application，其他相關(guān)設(shè)置參見(jiàn)下圖中的設(shè)置。完成這些選項(xiàng)設(shè)置后按“Finish”按鈕創(chuàng)建項(xiàng)目。1.2任務(wù)1的實(shí)施

（2）主界面UI設(shè)計(jì)實(shí)現(xiàn)主界面頁(yè)面效果，頁(yè)面的最外層用Stack布局，里面包裹一個(gè)Column(其中一行包含一個(gè)文本，另一行包含一個(gè)搜索框)和一個(gè)新增按鈕。新增按鈕位置用絕對(duì)定位；聯(lián)系人文本處于本行的正中間，可以用到行的justifyContent(FlexAlign.Center)屬性。1.2任務(wù)1的實(shí)施

（3）新建聯(lián)系人界面UI設(shè)計(jì)新建聯(lián)系人界面由5行垂直排列組成，在最外層用一個(gè)Column，包裹5行Row,每行Row內(nèi)部呈橫排線性排列。標(biāo)題欄要求取消和保存圖標(biāo)在兩邊，標(biāo)題“新建聯(lián)系人”居中。1.2任務(wù)1的實(shí)施

（4）頁(yè)面路由設(shè)置當(dāng)用戶點(diǎn)擊新增按鈕后，跳轉(zhuǎn)到新增頁(yè)面；在新增頁(yè)面點(diǎn)擊左上角的取消圖標(biāo)后跳回到主界面；1.2任務(wù)1的實(shí)施完成了項(xiàng)目主要的界面設(shè)計(jì)和新建聯(lián)系人界面及兩個(gè)頁(yè)面之間的相互跳轉(zhuǎn)完成的編碼Search組件TextInput組件router頁(yè)面跳轉(zhuǎn)學(xué)到的知識(shí)任務(wù)小結(jié)任務(wù)小結(jié)任務(wù)2向通訊錄增加聯(lián)系人02任務(wù)目標(biāo)及重點(diǎn)難點(diǎn)任務(wù)描述在本任務(wù)中，要求當(dāng)用戶用戶輸入聯(lián)系人信息以后，將聯(lián)系人信息保存到數(shù)據(jù)庫(kù)，并在后臺(tái)打印輸出數(shù)據(jù)庫(kù)中所有用戶信息。如果用戶選擇不保存，即取消，則新錄入的聯(lián)系人信息不會(huì)保存到數(shù)據(jù)庫(kù)。任務(wù)目的1、知識(shí)目標(biāo)：掌握關(guān)系型數(shù)據(jù)庫(kù)的使用方法；2、能力目標(biāo)：能熟練使用關(guān)系數(shù)據(jù)庫(kù)進(jìn)行插入、修改、刪除、查詢數(shù)據(jù)；3、素質(zhì)目標(biāo)：（1）培養(yǎng)良好的編程習(xí)慣重難點(diǎn)1、重點(diǎn)：關(guān)系數(shù)據(jù)庫(kù)操作2、難點(diǎn)：關(guān)系數(shù)據(jù)庫(kù)操作0201關(guān)系型數(shù)據(jù)庫(kù)數(shù)據(jù)庫(kù)接口2.1完成任務(wù)所需知識(shí)清單

關(guān)系型數(shù)據(jù)庫(kù)對(duì)應(yīng)用提供通用的操作接口，底層使用SQLite作為持久化存儲(chǔ)引擎，支持SQLite具有的數(shù)據(jù)庫(kù)特性，包括但不限于事務(wù)、索引、視圖、觸發(fā)器、外鍵、參數(shù)化查詢和預(yù)編譯SQL語(yǔ)句。2.1完成任務(wù)所需知識(shí)清單——關(guān)系型數(shù)據(jù)庫(kù)

接口名稱描述getRdbStore(context:Context,config:StoreConfig,callback:AsyncCallback<RdbStore>):void獲得一個(gè)相關(guān)的RdbStore，操作關(guān)系型數(shù)據(jù)庫(kù)，用戶可以根據(jù)自己的需求配置RdbStore的參數(shù)，然后通過(guò)RdbStore調(diào)用相關(guān)接口可以執(zhí)行相關(guān)的數(shù)據(jù)操作。executeSql(sql:string,bindArgs:Array<ValueType>,callback:AsyncCallback<void>):void執(zhí)行包含指定參數(shù)但不返回值的SQL語(yǔ)句。insert(table:string,values:ValuesBucket,callback:AsyncCallback<number>):void向目標(biāo)表中插入一行數(shù)據(jù)。update(values:ValuesBucket,predicates:RdbPredicates,callback:AsyncCallback<number>):void根據(jù)RdbPredicates的指定實(shí)例對(duì)象更新數(shù)據(jù)庫(kù)中的數(shù)據(jù)。delete(predicates:RdbPredicates,callback:AsyncCallback<number>):void根據(jù)RdbPredicates的指定實(shí)例對(duì)象從數(shù)據(jù)庫(kù)中刪除數(shù)據(jù)。query(predicates:RdbPredicates,columns:Array<string>,callback:AsyncCallback<ResultSet>):void根據(jù)指定條件查詢數(shù)據(jù)庫(kù)中的數(shù)據(jù)。deleteRdbStore(context:Context,name:string,callback:AsyncCallback<void>):void刪除數(shù)據(jù)庫(kù)。2.1完成任務(wù)所需知識(shí)清單——數(shù)據(jù)庫(kù)接口數(shù)據(jù)庫(kù)使用示例

letcontext=featureAbility.getContext();constSTORE_CONFIG={name:'RdbTest.db',//數(shù)據(jù)庫(kù)文件名//@ts-ignoresecurityLevel:relationalStore.SecurityLevel.S1//數(shù)據(jù)庫(kù)安全級(jí)別};exportdefaultclassApplicationdbAbilityextendsUIAbility{onCreate(want,launchParam){(0x0000,'testTag','%{public}s','AbilityonCreate');}

onWindowStageCreate(windowStage:window.WindowStage){2.1完成任務(wù)所需知識(shí)清單——數(shù)據(jù)庫(kù)接口數(shù)據(jù)庫(kù)使用示例

2.1完成任務(wù)所需知識(shí)清單——數(shù)據(jù)庫(kù)接口relationalStore.getRdbStore(this.context,STORE_CONFIG,(err,store)=>{if(err){console.error(`FailedtogetRdbStore.Code:${err.code},message:${err.message}`);return;}(`SucceededingettingRdbStore.`);store.executeSql(SQL_CREATE_TABLE);//創(chuàng)建數(shù)據(jù)表//這里執(zhí)行數(shù)據(jù)庫(kù)的增、刪、改、查等操作constvalueBucket={'NAME':'Lisa','AGE':18,'SALARY':100.5,'CODES':newUint8Array([1,2,3,4,5])};數(shù)據(jù)庫(kù)使用示例

2.1完成任務(wù)所需知識(shí)清單——數(shù)據(jù)庫(kù)接口letpredicates=newrelationalStore.RdbPredicates("EMPLOYEE");//@ts-ignorepredicates.equalTo('NAME','Rose');store.query(predicates,['ID','NAME','AGE','SALARY','CODES'],(err,resultSet)=>{if(err){console.error(`Failedtoquerydata.Code:${err.code},message:${err.message}`);return;}(`ResultSetcolumnnames:${resultSet.columnNames}`);(`ResultSetcolumncount:${resultSet.columnCount}`);})

數(shù)據(jù)庫(kù)使用示例

2.1完成任務(wù)所需知識(shí)清單——數(shù)據(jù)庫(kù)接口store.insert('EMPLOYEE',valueBucket,(err,rowId)=>{if(err){console.error(`Failedtoinsertdata.Code:${err.code},message:${err.message}`);return;}(`Succeededininsertingdata.rowId:${rowId}`);})});}}}第一步：搭建聯(lián)系人模型第二步：初始化數(shù)據(jù)庫(kù)，創(chuàng)建聯(lián)系人表第三步：編寫(xiě)數(shù)據(jù)庫(kù)的新增、查詢接口第四步：在新增界面為確認(rèn)圖標(biāo)添加單擊事件響應(yīng)任務(wù)1實(shí)現(xiàn)了主界面和新建聯(lián)系人見(jiàn)面；該任務(wù)需完成：在新增聯(lián)系人界面，當(dāng)用戶點(diǎn)擊確認(rèn)圖標(biāo)時(shí)，保存用戶輸入的聯(lián)系人信息。任務(wù)目標(biāo)實(shí)施步驟2.2任務(wù)2的實(shí)施

(1)搭建聯(lián)系人模型在src->main->ets->common下新建文件夾bean，創(chuàng)建ets文件ContactData.ets，文件結(jié)構(gòu)如圖所示1exportdefaultclassContactData{2id:number;3accountType:number;4name:string;5phoneNumber:string;6beizhu:string;78constructor(id:number,accountType:number,name:string,phoneNumber:string,beizhu:string){9this.id=id;10this.accountType=accountType;11=name;12this.phoneNumber=phoneNumber;13this.beizhu=beizhu;14}16}2.2任務(wù)2的實(shí)施

1.初始化數(shù)據(jù)庫(kù)，創(chuàng)建聯(lián)系人表1exportdefaultclassCommonConstants{2staticreadonlySEARCH_TEXT='搜索';3staticreadonlyFULL_WIDTH='100%';4staticreadonlyFULL_HEIGHT='100%';5staticreadonlyFULL_SIZE=1;6staticreadonlyPOSITION_X='80%';7staticreadonlyPOSITION_Y='85%';89staticreadonlySTORE_CONFIG={10name:'database.db',11//@ts-ignore12securityLevel:relationalStore.SecurityLevel.S113};14/**15*Accounttableconfig.16*/17staticreadonlyCONTACT_TABLE={18tableName:'accountTable',sqlCreate:'CREATETABLEIFNOTEXISTSaccountTable(idINTEGERPRIMARYKEYAUTOINCREMENT,accountTypeINTEGER,'+'nameTEXT,phoneNumber1TEXT,beizhuTEXT)',columns:['id','accountType','name','phoneNumber1','beizhu']20};19}20exportconstImageList={21222.2任務(wù)2的實(shí)施

(2)創(chuàng)建Rdb.ets文件，實(shí)現(xiàn)數(shù)據(jù)庫(kù)創(chuàng)建、查詢、插入等最基本的操作2.2任務(wù)2的實(shí)施

2.創(chuàng)建Rdb.ets文件，實(shí)現(xiàn)數(shù)據(jù)庫(kù)創(chuàng)建、查詢、插入等最基本的操作2.2任務(wù)2的實(shí)施

(2)創(chuàng)建Rdb.ets文件，實(shí)現(xiàn)數(shù)據(jù)庫(kù)創(chuàng)建、查詢、插入等最基本的操作2.2任務(wù)2的實(shí)施

(3)創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的增、刪、改、查操作。2.2任務(wù)2的實(shí)施

(3)創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的查詢操作。2.2任務(wù)2的實(shí)施

（3）創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的增、刪、改、查操作。2.2任務(wù)2的實(shí)施

(3)創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實(shí)現(xiàn)業(yè)務(wù)數(shù)據(jù)的查詢操作。2.2任務(wù)2的實(shí)施

（4）在新增界面為確認(rèn)圖標(biāo)添加單擊事件響應(yīng)當(dāng)用戶在新增界面中輸入姓名、電話等信息時(shí)，需要將用戶輸入的值保存到一個(gè)ContactData類型的變量（此處命名為newAccount）對(duì)應(yīng)字段中，在用戶點(diǎn)擊確認(rèn)按鈕時(shí)，將這個(gè)newAccount插入到數(shù)據(jù)庫(kù)中。1

TextInput({placeholder:'姓名'})2.width(380)3.height(40)4.margin($r('app.float.edge_size_MM'))5.fontSize($r('app.float.font_size_M'))6.fontColor(Color.Black)7.onChange((value:string)=>{8this.newA=value9})獲取輸入文本值的方法如表所示，為TextInput增加onChange()方法的調(diào)用，將value的值賦值給對(duì)應(yīng)字段。2.2任務(wù)2的實(shí)施

在新增界面為確認(rèn)圖標(biāo)添加單擊事件響應(yīng)當(dāng)用戶在新增界面中輸入姓名、電話等信息時(shí)，需要將用戶輸入的值保存到一個(gè)ContactData類型的變量（此處命名為newAccount）對(duì)應(yīng)字段中，在用戶點(diǎn)擊確認(rèn)按鈕時(shí)，將這個(gè)newAccount插入到數(shù)據(jù)庫(kù)中。使用onClick()方法為確認(rèn)圖標(biāo)增加單擊事件響應(yīng)，在響應(yīng)中，調(diào)用ContactTable的insertData()方法，將這個(gè)ContactData類型的數(shù)據(jù)插入到數(shù)據(jù)庫(kù)29Image($r('app.media.ok'))30.width($r('ponent_size_M'))31.aspectRatio(CommonConstants.FULL_SIZE)32.margin({right:$r('app.float.font_size_L')})33.onClick(()=>{34this.ContactTable.insertData(this.newAccount,(id)=>{35this.newAccount.id=id;36this.accounts.push(this.newAccount);3738router.back();39this.ContactTable.query(0,(result)=>{40this.accounts=result;41for(leti=0;i<(this.accounts.length);i++){42console.log('querysucess:'+this.accounts[i].name);43console.log('querysucess:'+this.accounts[i].phoneNumber);44}4546},true)47})2.2任務(wù)2的實(shí)施通過(guò)本任務(wù)，完成了數(shù)據(jù)模型的創(chuàng)建、數(shù)據(jù)庫(kù)的搭建以及查詢、新增方法的封裝。完成的編碼數(shù)據(jù)庫(kù)創(chuàng)建數(shù)據(jù)查詢數(shù)據(jù)新增學(xué)到的知識(shí)任務(wù)小結(jié)任務(wù)小結(jié)任務(wù)3顯示通訊錄聯(lián)系人列表03任務(wù)描述在本任務(wù)中，通訊錄聯(lián)系人主界面需要展示已經(jīng)保存的聯(lián)系人列表信息（性別圖標(biāo)、姓名、電話）。當(dāng)用戶在新建聯(lián)系人界面輸入新的聯(lián)系人信息，確認(rèn)保存以后，能將新聯(lián)系人追加到主頁(yè)聯(lián)系人列表的最后面。任務(wù)目的知識(shí)目標(biāo)：（1）熟悉UI組件列表的使用（2）掌握列表?xiàng)l目布局以及數(shù)據(jù)渲染的方法能力目標(biāo)：（1）能熟練運(yùn)用列表和列表?xiàng)l目展示列表素質(zhì)目標(biāo)：（1）培養(yǎng)并踐行編碼規(guī)范意識(shí)，變量命名可讀、格式規(guī)范，注釋清晰易讀。（2）培養(yǎng)自主學(xué)習(xí)能力，通過(guò)閱讀文檔，學(xué)習(xí)新知并能在實(shí)際項(xiàng)目中運(yùn)用、解決問(wèn)題。重難點(diǎn)重點(diǎn)：（1）列表與列表?xiàng)l目布局（2）行項(xiàng)目數(shù)據(jù)渲染的方法難點(diǎn)：列表行項(xiàng)目數(shù)據(jù)渲染的方法任務(wù)目標(biāo)及重點(diǎn)難點(diǎn)1、列表組件

List是用來(lái)呈現(xiàn)連續(xù)、多行相同類型的數(shù)據(jù)項(xiàng)。多行數(shù)據(jù)的樣式往往相同（也可以不同），每一行稱為一個(gè)條目。3.1完成任務(wù)所需知識(shí)清單——列表2、列表布局

（1）設(shè)置主軸方向List組件主軸默認(rèn)是垂直方向，即默認(rèn)情況下不需要手動(dòng)設(shè)置List方向，就可以構(gòu)建一個(gè)垂直滾動(dòng)列表。若是水平滾動(dòng)列表場(chǎng)景，將List的listDirection屬性設(shè)置為Axis.Horizontal即可實(shí)現(xiàn)。listDirection默認(rèn)為Axis.Vertical，即主軸默認(rèn)是垂直方向。List(){...}.listDirection(Axis.Horizontal)3.1完成任務(wù)所需知識(shí)清單——列表

（2）設(shè)置交叉軸布局List組件的交叉軸布局可以通過(guò)lanes和alignListItem屬性進(jìn)行設(shè)置，lanes屬性用于確定交叉軸排列的列表項(xiàng)數(shù)量，alignListItem用于設(shè)置子組件在交叉軸方向的對(duì)齊方式。List(){...}.lanes(2)以垂直列表為例，如果將lanes屬性設(shè)為2，表示構(gòu)建的是一個(gè)兩列的垂直列表。lanes的默認(rèn)值為1，即默認(rèn)情況下，垂直列表的列數(shù)是1。3.1完成任務(wù)所需知識(shí)清單——列表2、列表布局3、在列表中顯示數(shù)據(jù)

最簡(jiǎn)單的列表形式中，List靜態(tài)地創(chuàng)建其列表項(xiàng)ListItem的內(nèi)容。若列表項(xiàng)是由多個(gè)組件元素組成的，則需要將這多個(gè)元素組合到一個(gè)容器組件內(nèi)或組成一個(gè)自定義組件。1List(){2ListItem(){3Row(){4Image($r('app.media.iconE'))5.width(40)6.height(40)7.margin(10)89Text('小明')10.fontSize(20)11}12}1314ListItem(){15Row(){16Image($r('app.media.iconF'))17.width(40)18.height(40)19.margin(10)2021Text('小紅')22.fontSize(20)23}24}25}3.1完成任務(wù)所需知識(shí)清單——列表迭代列表內(nèi)容

應(yīng)用通過(guò)數(shù)據(jù)集合動(dòng)態(tài)地創(chuàng)建列表，使用循環(huán)渲染可從數(shù)據(jù)源中迭代獲取數(shù)據(jù)，并在每次迭代過(guò)程中創(chuàng)建相應(yīng)的組件，降低代碼復(fù)雜度。1importutilfrom'@ohos.util';23classContact{4key:string=util.generateRandomUUID(true);5name:string;6icon:Resource;78constructor(name:string,icon:Resource){9=name;10this.icon=icon;11}12}3.1完成任務(wù)所需知識(shí)清單——列表迭代列表內(nèi)容

ArkTS通過(guò)ForEach提供了組件的循環(huán)渲染能力。以簡(jiǎn)單形式的聯(lián)系人列表為例，將聯(lián)系人名稱和頭像數(shù)據(jù)以Contact類結(jié)構(gòu)存儲(chǔ)到contacts數(shù)組，使用ForEach中嵌套ListItem的形式來(lái)代替多個(gè)平鋪的、內(nèi)容相似的ListItem，從而減少重復(fù)代碼。15@Component16structSimpleContacts{17privatecontacts=[18newContact('小明',$r("app.media.iconA")),19newContact('小紅',$r("app.media.iconB")),20...21]2223build(){24List(){25ForEach(this.contacts,(item:Contact)=>{26ListItem(){27Row(){28Image(item.icon)29.width(40)30.height(40)31.margin(10)32Text().fontSize(20)33}34.width('100%')35.justifyContent(FlexAlign.Start)36}37},item=>item.key)38}39.width('100%')40}3.1完成任務(wù)所需知識(shí)清單——列表

3.1完成任務(wù)所需知識(shí)清單——狀態(tài)存儲(chǔ)1、狀態(tài)管理機(jī)制當(dāng)參數(shù)改變時(shí)，UI作為返回結(jié)果，也將進(jìn)行對(duì)應(yīng)的改變。這些運(yùn)行時(shí)的狀態(tài)變化所帶來(lái)的UI的重新渲染，在ArkUI中統(tǒng)稱為狀態(tài)管理機(jī)制例如，一段文本默認(rèn)顯示為“HelloWorld”，當(dāng)用戶點(diǎn)擊按鈕文本變?yōu)椤癏elloArkUI”，也即當(dāng)用戶與應(yīng)用程序的交互觸發(fā)了文本狀態(tài)變更，狀態(tài)變更引起了UI渲染，UI從“HelloWorld”變更為“HelloArkUI”。

變量必須被裝飾器裝飾才可以成為狀態(tài)變量，狀態(tài)變量的改變會(huì)引起UI的渲染刷新。如果不使用狀態(tài)變量，UI只能在初始化時(shí)渲染，后續(xù)將不會(huì)再刷新。

3.1完成任務(wù)所需知識(shí)清單——狀態(tài)存儲(chǔ)2、裝飾器的兩種分類根據(jù)狀態(tài)變量的影響范圍，將裝飾器可以大致分為：●管理組件擁有狀態(tài)的裝飾器：組件級(jí)別的狀態(tài)管理，可以觀察組件內(nèi)變化，和不同組件層級(jí)的變化，但需要唯一觀察同一個(gè)組件樹(shù)上，即同一個(gè)頁(yè)面內(nèi)?！窆芾響?yīng)用擁有狀態(tài)的裝飾器：應(yīng)用級(jí)別的狀態(tài)管理，可以觀察不同頁(yè)面，甚至不同UIAbility的狀態(tài)變化，是應(yīng)用內(nèi)全局的狀態(tài)管理。從數(shù)據(jù)的傳遞形式和同步類型層面看，裝飾器也可分為：●只讀的單向傳遞●可變更的雙向傳遞

3.1完成任務(wù)所需知識(shí)清單——狀態(tài)存儲(chǔ)3、管理應(yīng)用擁有狀態(tài)的裝飾器

AppStorage由UI框架在應(yīng)用程序啟動(dòng)時(shí)創(chuàng)建，為應(yīng)用程序UI狀態(tài)屬性提供中央存儲(chǔ)，是應(yīng)用級(jí)的全局狀態(tài)共享。當(dāng)要在頁(yè)面之間共享數(shù)據(jù)時(shí)，也即當(dāng)A頁(yè)面顯示的數(shù)據(jù)，在B面修改后，A頁(yè)面能自動(dòng)更新修改后的數(shù)據(jù)的場(chǎng)景下就可以采用這種解決方案。（1）觀察變化當(dāng)裝飾的數(shù)據(jù)類型為boolean、string、number類型時(shí)，可以觀察到數(shù)值的變化。當(dāng)裝飾的數(shù)據(jù)類型為class或者Object時(shí)，可以觀察到賦值和屬性賦值的變化，即Object.keys(observedObject)返回的所有屬性。當(dāng)裝飾的對(duì)象是array時(shí)，可以觀察到數(shù)組添加、刪除、更新數(shù)組單元的變化。

3.1完成任務(wù)所需知識(shí)清單——狀態(tài)存儲(chǔ)3、管理應(yīng)用擁有狀態(tài)的裝飾器

（2）框架行為

當(dāng)@StorageLink(key)裝飾的數(shù)值改變被觀察到時(shí)，修改將被同步回AppStorage對(duì)應(yīng)屬性鍵值key的屬性中。

AppStorage中屬性鍵值key對(duì)應(yīng)的數(shù)據(jù)一旦改變，屬性鍵值key綁定的所有的數(shù)據(jù)（包括雙向@StorageLink和單向@StorageProp）都將同步修改；

當(dāng)@StorageLink(key)裝飾的數(shù)據(jù)本身是狀態(tài)變量，它的改變不僅僅會(huì)同步回AppStorage中，還會(huì)引起所屬的自定義組件的重新渲染。

3.1完成任務(wù)所需知識(shí)清單——狀態(tài)存儲(chǔ)3、管理應(yīng)用擁有狀態(tài)的裝飾器

3、管理應(yīng)用擁有狀態(tài)的裝飾器

第一步：新增聯(lián)系人列表第二步：列表展示第三步：新建頁(yè)面數(shù)據(jù)通步到主頁(yè)面本任務(wù)要在主界面實(shí)現(xiàn)聯(lián)系人列表展示,在新建聯(lián)系人界面新增的數(shù)據(jù)在返回主界面時(shí)主動(dòng)追加到列表最后面任務(wù)目標(biāo)實(shí)施步驟3.2任務(wù)3的實(shí)施

1、主頁(yè)新增聯(lián)系人列表增加主頁(yè)面頁(yè)需要顯示的聯(lián)系人列表accounts，類型為Array<ContactData>；新增ContactTable，以使用其對(duì)數(shù)據(jù)庫(kù)進(jìn)行查詢操作。在頁(yè)面顯示前，即在aboutToAppear()方法中，從數(shù)據(jù)庫(kù)查詢所有聯(lián)系人信息保存到accounts中1import{ImageList}from'../common/CommonConstants';2importContactTablefrom'../common/bean/ContactTable';3importContactDatafrom'../common/bean/ContactData';4importrouterfrom'@ohos.router';5importCommonConstantsfrom'../common/CommonConstants';6@Entry7@Component8structIndex{9@StatesearchText:string='';10@Stateaccounts:Array<ContactData>=[];11privateContactTable=newContactTable();1213searchController:SearchController=newSearchController();1415aboutToAppear(){16this.ContactTable.getRdbStore(()=>{17this.ContactTable.query(0,(result)=>{18this.accounts=result;19},true);20});21}2223build(){24Stack(){25

26

}27}28}3.2任務(wù)3的實(shí)施

2.列表展示12@Entry3@Component4structIndex{567build(){8Stack(){9Column(){1011

Search({value:this.searchText,placeholder:'要查詢的姓名',controller:this.searchController})12.searchButton(CommonConstants.SEARCH_TEXT)13.width('90%')14.borderRadius($r('app.float.radius_size_M'))15.borderWidth($r('app.float.border_size_S'))16.borderColor('#33182431')17.placeholderFont({size:$r('app.float.font_size_M')})18.textFont({size:$r('app.float.font_size_M')})19.backgroundColor(Color.White)20.onChange((searchValue:string)=>{21this.searchText=searchValue;22})23.onSubmit((searchValue:string)=>{24})25}3.2任務(wù)3的實(shí)施

2、主頁(yè)顯示聯(lián)系人列表

2.列表展示26Row(){27List({space:CommonConstants.FULL_SIZE}){28ForEach(this.accounts,(item:ContactData)=>{29ListItem(){30Row(){31Image(ImageList[item.accountType])32.width($r('ponent_size_M'))33.aspectRatio(CommonConstants.FULL_SIZE)34.margin({right:$r('app.float.edge_size_MP')})35Text()36.height($r('ponent_size_SM'))37.fontSize($r('app.float.font_size_M'))38.margin({right:$r('app.float.edge_size_MP')})39.width('20%')40Text(item.phoneNumber)41.height($r('ponent_size_SM'))42.fontSize($r('app.float.font_size_M'))43.margin({left:'50'})44}45.width(CommonConstants.FULL_WIDTH)46.padding({left:$r('app.float.edge_size_M'),right:$r('app.float.edge_size_M')})47}3.2任務(wù)3的實(shí)施

2.列表展示48.width(CommonConstants.FULL_WIDTH)49.height($r('ponent_size_LM'))50.onClick(()=>{5152})53})54}55.width(CommonConstants.FULL_WIDTH)56.borderRadius($r('app.float.radius_size_L'))57.backgroundColor(Color.White)58}59.width(CommonConstants.FULL_WIDTH)60.padding({left:$r('app.float.edge_size_M'),right:$r('app.float.edge_size_M')})61.margin({top:$r('app.float.edge_size_SM')})3.2任務(wù)3的實(shí)施

3、修改Accounts數(shù)據(jù)狀態(tài)類型

（1）

在新建頁(yè)面新增了一條記錄以后，不僅要把新聯(lián)系人插入到數(shù)據(jù)庫(kù)，也需要將這條聯(lián)系人信息增加到主頁(yè)的accounts；

（2）

在頁(yè)面第一次讀取數(shù)據(jù)庫(kù)所有聯(lián)系人信息時(shí)，將這個(gè)結(jié)果accounts保存為應(yīng)用級(jí)數(shù)據(jù)共享，這樣從新增頁(yè)面保存完回到主頁(yè)面時(shí)，主頁(yè)面就能實(shí)時(shí)顯示最新加入的聯(lián)系人了。12structIndex{3@StorageLink('varA')accounts:Array<AccountData>=[];4修改Index.ets修改AddPage.ets1structAddPage{2@StorageLink('varA')accounts:Array<AccountData>=[];34build(){5Column(){6Row(){7Image($r('app.media.cancel'))3.2任務(wù)3的實(shí)施修改Index.ets通過(guò)本任務(wù)，完成了從數(shù)據(jù)庫(kù)讀取聯(lián)系人信息，再主頁(yè)面數(shù)據(jù)列表的展示。完成的編碼List布局循環(huán)渲染學(xué)到的知識(shí)任務(wù)小結(jié)任務(wù)小結(jié)任務(wù)4查看聯(lián)系人詳情04任務(wù)描述當(dāng)用戶在在聯(lián)系人主界面的列表中點(diǎn)擊任意一聯(lián)系人條目，將跳轉(zhuǎn)到聯(lián)系人詳情界面。當(dāng)點(diǎn)擊詳情界面的返回箭頭圖標(biāo)時(shí)，將返回到聯(lián)系人主頁(yè)面。任務(wù)目的知識(shí)目標(biāo)：（1）掌握跳轉(zhuǎn)時(shí)參數(shù)的傳遞與解析能力目標(biāo)：（1）能熟練傳遞參數(shù)與解析參數(shù)素質(zhì)目標(biāo)：（1）培養(yǎng)并踐行編碼規(guī)范意識(shí)，變量命名可讀、格式規(guī)范，注釋清晰易讀。（2）培養(yǎng)自主學(xué)習(xí)能力，通過(guò)閱讀文檔，學(xué)習(xí)新知并能在實(shí)際項(xiàng)目中運(yùn)用、解決問(wèn)題。重難點(diǎn)重點(diǎn)：掌握頁(yè)面跳轉(zhuǎn)時(shí)參數(shù)的傳遞與解析難點(diǎn)：掌握頁(yè)面跳轉(zhuǎn)時(shí)參數(shù)的傳遞與解析

任務(wù)目標(biāo)及重點(diǎn)難點(diǎn)任務(wù)目標(biāo)及重點(diǎn)難點(diǎn)路由參數(shù)的傳遞與解析4.1知識(shí)清單

如果在跳轉(zhuǎn)時(shí)需要傳遞一些數(shù)據(jù)給目標(biāo)頁(yè)，則可以在調(diào)用Router模塊的方法時(shí)，添加一個(gè)params屬性，并指定一個(gè)對(duì)象