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

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

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

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

一、基本概念

二、頁面跳轉(zhuǎn)

1.router基本概念

2.使用場景

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

三、頁面返回

1.普通頁面返回

2.頁面返回前增加一個詢問框

1.系統(tǒng)默認詢問框

2.自定義詢問框

總結(jié)

---

前言

前面系列文章，我們詳細學習了鴻蒙開發(fā)UI組件相關(guān)知識，學習了組件基本使用方法、自定義樣式以及各種組件的使用場景，本文將學習鴻蒙開發(fā)UI頁面路由

一、基本概念

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

二、頁面跳轉(zhuǎn)

1.router基本概念

2.使用場景

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

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

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在Home.ets頁面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用pushUrl，
// 1.定義跳轉(zhuǎn)到目標url，
// 2.設(shè)置實例模式（默認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.');});
}

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

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

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在Login.ets頁面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用replaceUrl，
// 1.定義跳轉(zhuǎn)到目標url，
// 2.設(shè)置實例模式（默認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.');});
}

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

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

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在Setting.ets頁面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用pushUrl，
// 1.定義跳轉(zhuǎn)到目標url，
// 2.設(shè)置實例模式（默認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.');});
}

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

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

代碼示例：

//step1：導(dǎo)入系統(tǒng)提供router模塊
import router from '@ohos.router';//step2：在SearchResult.ets頁面，定義跳轉(zhuǎn)按鈕的綁定事件
function onJumpClick(): void {
//step3：調(diào)用replaceUrl，
// 1.定義跳轉(zhuǎn)到目標url，
// 2.設(shè)置實例模式（默認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.頁面跳轉(zhuǎn)參數(shù)傳遞

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

代碼示例

//step1：定義頁面?zhèn)鬟f數(shù)據(jù)的模型
class DataModelInfo {age: number;
}class DataModel {id: number;info: DataModelInfo;
}function onJumpClick(): void {
//step2：定義跳轉(zhuǎn)頁面，傳遞的數(shù)據(jù)實例paramsInfolet paramsInfo: DataModel = {id: 123,info: {age: 20}};
//step3：pushUrl方法中 定義params并將頁面跳轉(zhuǎn)傳遞數(shù)據(jù)實例賦值給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.');})
}

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

代碼示例

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

三、頁面返回

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

1.普通頁面返回

用以下幾種頁面返回方式

方式一：返回到上一個頁面

router.back();

方式二：返回到指定頁面

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

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

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

2.頁面返回前增加一個詢問框

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

1.系統(tǒng)默認詢問框

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

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

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

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

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

2.自定義詢問框

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

代碼示例

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

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

---

總結(jié)

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