鴻蒙開(kāi)發(fā)-UI-組件

鴻蒙開(kāi)發(fā)-UI-組件2

鴻蒙開(kāi)發(fā)-UI-組件3

鴻蒙開(kāi)發(fā)-UI-氣泡/菜單

一、基本概念

二、頁(yè)面跳轉(zhuǎn)

1.router基本概念

2.使用場(chǎng)景

3.頁(yè)面跳轉(zhuǎn)參數(shù)傳遞

三、頁(yè)面返回

1.普通頁(yè)面返回

2.頁(yè)面返回前增加一個(gè)詢問(wèn)框

1.系統(tǒng)默認(rèn)詢問(wèn)框

2.自定義詢問(wèn)框

總結(jié)

---

前言

前面系列文章，我們?cè)敿?xì)學(xué)習(xí)了鴻蒙開(kāi)發(fā)UI組件相關(guān)知識(shí)，學(xué)習(xí)了組件基本使用方法、自定義樣式以及各種組件的使用場(chǎng)景，本文將學(xué)習(xí)鴻蒙開(kāi)發(fā)UI頁(yè)面路由

一、基本概念

頁(yè)面路由指在應(yīng)用程序中實(shí)現(xiàn)不同頁(yè)面之間的跳轉(zhuǎn)和數(shù)據(jù)傳遞。HarmonyOS提供了Router模塊，通過(guò)不同的url地址，可以方便地進(jìn)行頁(yè)面路由，輕松地訪問(wèn)不同的頁(yè)面

二、頁(yè)面跳轉(zhuǎn)

1.router基本概念

2.使用場(chǎng)景

場(chǎng)景一：一個(gè)主頁(yè)Home.ets和一個(gè)詳情頁(yè)Detail.ets，主頁(yè)點(diǎn)擊一個(gè)商品跳轉(zhuǎn)到詳情頁(yè)，詳情頁(yè)點(diǎn)擊返回回到主頁(yè)

實(shí)現(xiàn)：pushUrl() +?Standard

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在Home.ets頁(yè)面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用pushUrl，
// 1.定義跳轉(zhuǎn)到目標(biāo)url，
// 2.設(shè)置實(shí)例模式（默認(rèn)standard，可以省略）
// 3.定義跳轉(zhuǎn)狀態(tài)的回調(diào)函數(shù)，如果成功打印成功信息，如果失敗打印失敗信息router.pushUrl({url: 'pages/Detail' }, router.RouterMode.Standard, (err) => {if (err) {console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke pushUrl succeeded.');});
}

場(chǎng)景二：一個(gè)登錄頁(yè)Login.ets和一個(gè)個(gè)人中心頁(yè)P(yáng)rofile.ets，登錄頁(yè)成功登錄后跳轉(zhuǎn)到個(gè)人中心頁(yè)，同時(shí)銷毀登錄頁(yè)，在返回時(shí)直接退出應(yīng)用

實(shí)現(xiàn)：replaceUrl() +?Standard

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在Login.ets頁(yè)面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用replaceUrl，
// 1.定義跳轉(zhuǎn)到目標(biāo)url，
// 2.設(shè)置實(shí)例模式（默認(rèn)standard，可以省略）
// 3.定義跳轉(zhuǎn)狀態(tài)的回調(diào)函數(shù)，如果成功打印成功信息，如果失敗打印失敗信息router.replaceUrl({url: 'pages/Profile' }, router.RouterMode.Standard, (err) => {if (err) {console.error(`Invoke replaceUrlfailed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke replaceUrlsucceeded.');});
}

場(chǎng)景三：一個(gè)設(shè)置頁(yè)Setting.ets和一個(gè)主題切換頁(yè)Theme.ets，從設(shè)置頁(yè)點(diǎn)擊主題選項(xiàng)，跳轉(zhuǎn)到主題切換頁(yè)。同時(shí)需要保證每次只有一個(gè)主題切換頁(yè)存在于頁(yè)面棧中，在返回時(shí)直接回到設(shè)置頁(yè)

實(shí)現(xiàn)：pushUrl() +?Single

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在Setting.ets頁(yè)面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用pushUrl，
// 1.定義跳轉(zhuǎn)到目標(biāo)url，
// 2.設(shè)置實(shí)例模式（默認(rèn)standard，可以省略）
// 3.定義跳轉(zhuǎn)狀態(tài)的回調(diào)函數(shù)，如果成功打印成功信息，如果失敗打印失敗信息router.pushUrl({url: 'pages/Theme' }, router.RouterMode.Single, (err) => {if (err) {console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke pushUrl succeeded.');});
}

場(chǎng)景四：一個(gè)搜索結(jié)果列表頁(yè)SearchResult.ets和一個(gè)搜索結(jié)果詳情頁(yè)SearchDetail.ets，從搜索結(jié)果列表頁(yè)點(diǎn)擊某一項(xiàng)結(jié)果，跳轉(zhuǎn)到搜索結(jié)果詳情頁(yè)。如果該結(jié)果已經(jīng)被查看過(guò)，則不需要再新建一個(gè)詳情頁(yè)，而是直接跳轉(zhuǎn)到已經(jīng)存在的詳情頁(yè)

實(shí)現(xiàn)：replaceUrl() +?Single

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在SearchResult.ets頁(yè)面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用replaceUrl，
// 1.定義跳轉(zhuǎn)到目標(biāo)url，
// 2.設(shè)置實(shí)例模式（默認(rèn)standard，可以省略）
// 3.定義跳轉(zhuǎn)狀態(tài)的回調(diào)函數(shù)，如果成功打印成功信息，如果失敗打印失敗信息router.replaceUrl({url: 'pages/SearchDetail' }, router.RouterMode.Single, (err) => {if (err) {console.error(`Invoke replaceUrlfailed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke replaceUrlsucceeded.');});
}

3.頁(yè)面跳轉(zhuǎn)參數(shù)傳遞

頁(yè)面跳轉(zhuǎn)源頁(yè)面構(gòu)造傳遞數(shù)據(jù)

代碼示例

//step1：定義頁(yè)面?zhèn)鬟f數(shù)據(jù)的模型
class DataModelInfo {age: number;
}class DataModel {id: number;info: DataModelInfo;
}function onJumpClick(): void {
//step2：定義跳轉(zhuǎn)頁(yè)面，傳遞的數(shù)據(jù)實(shí)例paramsInfolet paramsInfo: DataModel = {id: 123,info: {age: 20}};
//step3：pushUrl方法中 定義params并將頁(yè)面跳轉(zhuǎn)傳遞數(shù)據(jù)實(shí)例賦值給params參數(shù)router.pushUrl({url: 'pages/Detail',params: paramsInfo }, (err) => {if (err) {console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`);return;}console.info('Invoke pushUrl succeeded.');})
}

頁(yè)面跳轉(zhuǎn)目標(biāo)頁(yè)面接收傳遞數(shù)據(jù)

代碼示例

const params = router.getParams(); // 獲取傳遞過(guò)來(lái)的參數(shù)對(duì)象
const id = params['id']; // 獲取id屬性的值
const age = params['info'].age; // 獲取age屬性的值

三、頁(yè)面返回

當(dāng)用戶在一個(gè)頁(yè)面完成操作后，通常需要返回到上一個(gè)頁(yè)面或者指定頁(yè)面，這就需要用到頁(yè)面返回功能。在返回的過(guò)程中，可能需要將數(shù)據(jù)傳遞給目標(biāo)頁(yè)，這就需要用到數(shù)據(jù)傳遞功能。

1.普通頁(yè)面返回

用以下幾種頁(yè)面返回方式

方式一：返回到上一個(gè)頁(yè)面

router.back();

方式二：返回到指定頁(yè)面

router.back({url: 'pages/Home'
});

方式三：返回到指定頁(yè)面并傳遞自定義參數(shù)信息

router.back({url: 'pages/Home',params: {info: '來(lái)自Home頁(yè)'}
});

2.頁(yè)面返回前增加一個(gè)詢問(wèn)框

在開(kāi)發(fā)應(yīng)用時(shí)，為了避免用戶誤操作或者丟失數(shù)據(jù)，有時(shí)候需要在用戶從一個(gè)頁(yè)面返回到另一個(gè)頁(yè)面之前，彈出一個(gè)詢問(wèn)框，讓用戶確認(rèn)是否要執(zhí)行這個(gè)操作。

1.系統(tǒng)默認(rèn)詢問(wèn)框

Router模塊提供的兩個(gè)方法可以實(shí)現(xiàn)返回前彈窗詢問(wèn)框，router.showAlertBeforeBackPage() + router.back()

router.showAlertBeforeBackPage()方法接收一個(gè)對(duì)象作為參數(shù)，該對(duì)象包含一個(gè)message屬性，s類型為string，表示詢問(wèn)框的內(nèi)容。如果調(diào)用成功，則會(huì)在目標(biāo)界面開(kāi)啟頁(yè)面返回詢問(wèn)框；如果調(diào)用失敗，則會(huì)拋出異常，并通過(guò)err.code和err.message獲取錯(cuò)誤碼和錯(cuò)誤信息。

當(dāng)用戶點(diǎn)擊“返回”按鈕時(shí)，會(huì)彈出確認(rèn)對(duì)話框，詢問(wèn)用戶是否確認(rèn)返回。選擇“取消”將停留在當(dāng)前頁(yè)目標(biāo)頁(yè)；選擇“確認(rèn)”將觸發(fā)router.back()方法，并根據(jù)參數(shù)決定如何執(zhí)行跳轉(zhuǎn)。

代碼示例，通過(guò)step1，step2，step3 完成頁(yè)面返回彈出系統(tǒng)默認(rèn)詢問(wèn)框的操作

//step1：導(dǎo)入頁(yè)面路由Router模塊
import router from '@ohos.router';
//step2：定義一個(gè)返回按鈕的點(diǎn)擊事件處理函數(shù)
function onBackClick(): void {//step3： 調(diào)用router.showAlertBeforeBackPage()方法，設(shè)置返回詢問(wèn)框的信息try {router.showAlertBeforeBackPage({message: '您還沒(méi)有完成支付，確定要返回嗎？' // 設(shè)置詢問(wèn)框的內(nèi)容});} catch (err) {console.error(`Invoke showAlertBeforeBackPage failed, code is ${err.code}, message is ${err.message}`);}//step4： 調(diào)用router.back()方法，返回上一個(gè)頁(yè)面router.back();
}

2.自定義詢問(wèn)框

自定義詢問(wèn)框的方式，可以使用彈窗和自定義彈窗來(lái)實(shí)現(xiàn)，這樣可以讓應(yīng)用界面與系統(tǒng)默認(rèn)詢問(wèn)框有所區(qū)別，提高應(yīng)用的用戶體驗(yàn)度。實(shí)現(xiàn)方式是通過(guò)promptAction.showDialog()打開(kāi)彈窗

代碼示例

//step1：先導(dǎo)入Router模塊
import router from '@ohos.router';
//step2：定義點(diǎn)擊返回回調(diào)函數(shù)
function onBackClick() {//step3：彈出自定義的詢問(wèn)框，message屬性定義彈框提示信息，buttons數(shù)組定義彈框中按鈕，then定義彈框按鈕被點(diǎn)擊后響應(yīng)邏輯，catch定義彈框按鈕被點(diǎn)擊異常響應(yīng)邏輯promptAction.showDialog({message: '您還沒(méi)有完成支付，確定要返回嗎？',buttons: [{text: '取消',color: '#FF0000'},{text: '確認(rèn)',color: '#0099FF'}]}).then((result) => {if (result.index === 0) {// 用戶點(diǎn)擊了“取消”按鈕console.info('User canceled the operation.');} else if (result.index === 1) {// 用戶點(diǎn)擊了“確認(rèn)”按鈕console.info('User confirmed the operation.');// 調(diào)用router.back()方法，返回上一個(gè)頁(yè)面router.back();}}).catch((err) => {console.error(`Invoke showDialog failed, code is ${err.code}, message is ${err.message}`);})
}

當(dāng)用戶點(diǎn)擊step2定義的回調(diào)函數(shù)綁定的按鈕時(shí)，會(huì)彈出自定義的詢問(wèn)框，詢問(wèn)用戶是否確認(rèn)返回。選擇“取消”將停留在當(dāng)前頁(yè)目標(biāo)頁(yè)；選擇“確認(rèn)”將觸發(fā)router.back()方法，并根據(jù)參數(shù)決定如何執(zhí)行跳轉(zhuǎn)。

---

總結(jié)

本文詳細(xì)學(xué)習(xí)了鴻蒙開(kāi)發(fā)UI頁(yè)面跳轉(zhuǎn)的相關(guān)知識(shí)，學(xué)習(xí)頁(yè)面路由router基本概念，使用方法，頁(yè)面路由兩種跳轉(zhuǎn)模式和兩種實(shí)例模式的區(qū)別以及不同跳轉(zhuǎn)模式和實(shí)例模式組合下的使用場(chǎng)景，學(xué)習(xí)了頁(yè)面跳轉(zhuǎn)后普通返回和帶彈窗的返回使用方法，學(xué)習(xí)了頁(yè)面帶數(shù)據(jù)的跳轉(zhuǎn)方式以及目標(biāo)頁(yè)面接收數(shù)據(jù)的方法，下文將學(xué)習(xí)鴻蒙UI開(kāi)發(fā)組件導(dǎo)航。