? ? 通過上一篇的學(xué)習(xí)，相信大家對UIAbility已經(jīng)有了初步的認(rèn)知。在上篇中，我們最后實現(xiàn)了一個小demo，從一個UIAbility調(diào)起了另外一個UIAbility。當(dāng)時我提到過，暫不實現(xiàn)比如點擊EntryAbility中的控件去觸發(fā)跳轉(zhuǎn)，而是在EntryAbility加載完后直接打開FuncUIAbility。本篇，帶著大家一起學(xué)習(xí)下UIAbility和Page之間的交互。
鴻蒙系列的上一篇：???????鴻蒙開發(fā)（三）探索UIAbility-CSDN博客文章瀏覽閱讀526次，點贊9次，收藏9次。前文提到過，在使用DevEco創(chuàng)建鴻蒙項目的時候，會選擇Empty Ability，那么這個Ability是什么呢？其實對比Android Studio創(chuàng)建Android項目時選擇的Empty Activity，感覺Harmony的Ability更像是Android的Activity，但只能說像，不完全等同。本篇，我們就基于API9一起探索下Ability。因為本人是Android開發(fā)者，所以文章中會時不時的跟Android對比，如果你也是Android開發(fā)者 ，那么理解起來應(yīng)該不難。https://blog.csdn.net/qq_21154101/article/details/135595700?spm=1001.2014.3001.5501
目錄
一、溫故而知新
二、UIAbility和Page交互
1、使用EventHub
2、globalThis
三、Demo效果展示
一、溫故而知新
? ? 在學(xué)習(xí)UIAbility和Page之間的交互之前，我們先回顧下已掌握的知識：
1、UIAbility是如何創(chuàng)建的？
2、Page是如何創(chuàng)建的？
3、UIAbility是如何跟Page綁定的？
4、UIAbility是如何跟另一個UIAbility交互的？
? ? 如果以上四個問題你還不了解或者不是很清楚，可以參考下我的上一篇文章。如果都很清楚了，那么本篇跟著我一起實現(xiàn)這樣一個demo。要求如下：
1、實現(xiàn)2個UIAbility，分別為EntryUIAbility和FuncUIAbility，對應(yīng)有兩個Page，分別為Index和Func。
2、Index頁面里面有一個Hello Harmony的Text控件，為其增加點擊事件，點擊后傳遞一個內(nèi)容為"Welcome to Harmony"的msg給與其綁定的EntryUIAbility。
3、EntryUIAbility收到點擊事件后，調(diào)起FuncUIAbility。
4、FuncUIAbility將msg傳遞給與其綁定的Func頁面。
5、Func頁面接受到msg后，將其展現(xiàn)在該頁面的一個Text控件中。
? ? 好了，需求就是這樣，是不是非常簡單呢？接下來，我們一起手把手實現(xiàn)下！
二、UIAbility和Page交互
? ? 在正式動手之前，我們先思考下如何實現(xiàn)？如果你做過Android，你該知道實現(xiàn)點擊事件非常簡單。拋開mvp和mvvm的架構(gòu)，我們完全可以在Activity中對控件添加點擊事件，然后調(diào)起另外一個Activity即可。在鴻蒙中，不能這么去做，因為UIAbility和Page其實是分離的。鴻蒙給我們提供了兩種方式，來實現(xiàn)UIAbility組件與Page之間的交互。
- 使用EventHub進(jìn)行數(shù)據(jù)通信：基于發(fā)布訂閱模式來實現(xiàn)，事件需要先訂閱后發(fā)布，訂閱者收到消息后進(jìn)行處理。
- 使用globalThis進(jìn)行數(shù)據(jù)同步：ArkTS引擎實例內(nèi)部的一個全局對象，在ArkTS引擎實例內(nèi)部都能訪問。
? ? EventHub是以Ability組件為中心，目前只發(fā)現(xiàn)它適用于將Ability作為事件的訂閱者，而Page作為事件的發(fā)布者。也就是Page到Ability的單方通信。globalThis是一個全局的對象，不管是Ability或是Page均可以雙向通信。準(zhǔn)確來講，不應(yīng)該叫做通信，應(yīng)該叫做讀取。
1、使用EventHub
? ? EventHub提供了Ability組件（UIAbility和ExtensionAbility）的事件機(jī)制，以Ability組件為中心提供了訂閱、取消訂閱和觸發(fā)事件的數(shù)據(jù)通信能力。這個其實就類似Android的EventBus，不過多介紹。
（1）既然要使用EventHub，那么首先就是獲取一個EventHub實例。可以在EntryUIAbility的onCreate方法通過context去獲?。?/p>
onCreate(want, launchParam) {
hilog.info(0x0000, this.tag, 'Ability onCreate');
// 獲取eventHub
let eventhub = this.context.eventHub;
...
}（2）接下來，在EntryUIAbility的onCreate中去注冊EventHub，并在收到事件的時候調(diào)起FuncUIAbility，同時傳遞數(shù)據(jù)data：
onCreate(want, launchParam) {
hilog.info(0x0000, this.tag, 'Ability onCreate');
// 獲取eventHub
let eventhub = this.context.eventHub;
// 執(zhí)行訂閱操作
eventhub.on(this.event1, (...data) => {
// 觸發(fā)事件，完成相應(yīng)的業(yè)務(wù)操作
if (data != null && data.length > 0) {
this.openFuncUiAbility(data[0]);
}
hilog.info(0x0000, this.tag, data.toString());
});
}注意：data為可變參數(shù)，類型為數(shù)組，因此需要判空判斷l(xiāng)ength然后按照數(shù)組的方式使用index獲取參數(shù)。
（3）實現(xiàn)openFuncUiAbility()方法，接收參數(shù)message，并且在調(diào)起FuncUIAbility時把message作為want的info參數(shù)帶過去：
openFuncUiAbility(message) {
let info = message
// 調(diào)起app內(nèi)其他的UIAbility
let want: Want = {
deviceId: '', // deviceId為空表示本設(shè)備
bundleName: 'com.example.tuduharmonydemo', // 必填
moduleName: '', // moduleName為空表示本模塊
abilityName: 'FuncAbility', // 必填
parameters: { // 自定義信息
info: info
}
}
this.context.startAbility(want).then(() => {
hilog.info(0x0000, this.tag, 'Succeeded in starting ability.');
}).catch((err) => {
hilog.error(0x0000, this.tag, `Failed to start ability. Code is ${err.code}, message is ${err.message}`);
})
}注意：want的參數(shù)是一個json，可以塞多個參數(shù)，暫時用不到。
（4）在Index頁面中實現(xiàn)onClick點擊事件，調(diào)用eventHubFunc方法去觸發(fā)事件：
@Entry
@Component
struct Index {
@State message: string = 'Hello Harmony'
private context = getContext(this) as common.UIAbilityContext
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.onClick(() => {
this.eventHubFunc()
})
}
.width('100%')
}
.height('100%')
}（5）實現(xiàn)eventHubFunc方法，在Page中通過eventHub.emit()觸發(fā)事件，可以根據(jù)需要傳入0或多個參數(shù)：
eventHubFunc() {
// 不帶參數(shù)觸發(fā)自定義“event1”事件
this.context.eventHub.emit('event1')
// 帶1個參數(shù)觸發(fā)自定義“event1”事件
this.context.eventHub.emit('event1', 'Welcome to Harmony') // 在本次需求中，我們使用傳遞一個參數(shù)即可
// 帶2個參數(shù)觸發(fā)自定義“event1”事件
this.context.eventHub.emit('event1', 1, '222')
// 開發(fā)者可以根據(jù)實際的業(yè)務(wù)場景設(shè)計事件傳遞的參數(shù)
}? ? 上面提到過，eventHub傳遞的參數(shù)為可變參數(shù)，類型為數(shù)組，在這里貼一下emit的源碼，可以看到為Object[]數(shù)組：
/**
* Trigger the event callbacks.
* @param { string } event - Indicates the event.
* @param { Object[] } args - Indicates the callback arguments.
* @throws { BusinessError } 401 - If the input parameter is not valid parameter.
* @syscap SystemCapability.Ability.AbilityRuntime.Core
* @StageModelOnly
* @since 9
*/
emit(event: string, ...args: Object[]): void;? ? 這樣，已經(jīng)實現(xiàn)了我們前面所列需求的第1-3個。第4-5個，我們需要借助上文提到的第二種方式globalThis實現(xiàn)。
2、globalThis
? ? globalThis是ArkTS引擎實例內(nèi)部的一個全局對象，引擎內(nèi)部的UIAbility/ExtensionAbility/Page都可以使用，因此可以使用globalThis全局對象進(jìn)行數(shù)據(jù)同步。如下圖：
? ? 那么接下來，我們一起基于globalThis來實現(xiàn)第4-5個需求吧。
（1）在FuncUIAbility的onCreate中使用globalThis接收want里面的參數(shù)info：
onCreate(want, launchParam) {
let info = want?.parameters?.info;
globalThis.entryAbilityInfo = info;
hilog.info(0x0000, 'testTag', info);
}（2）在Func頁面中，實現(xiàn)aboutToAppear，這是在調(diào)用build進(jìn)行展現(xiàn)之前的函數(shù)，在這里通過globalThis獲取參數(shù)，同時賦值給message，然后在build方法中展現(xiàn)message:
import hilog from '@ohos.hilog'
@Entry
@Component
struct Func {
@State message: string = 'Func Page'
aboutToAppear(){
this.message = globalThis.entryAbilityInfo
hilog.info(0x0000, 'TTTT', this.message?? '');
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
}
.width('100%')
}
.height('100%')
}
}三、Demo效果展示
? ? 至此，理論上我們已經(jīng)一步步實現(xiàn)了篇首提出的需求：
1、實現(xiàn)2個UIAbility，分別為EntryUIAbility和FuncUIAbility，對應(yīng)有兩個Page，分別為Index和Func。
2、Index頁面里面有一個Hello Harmony的Text控件，為其增加點擊事件，點擊后傳遞一個內(nèi)容為"Welcome to Harmony"的msg給與其綁定的EntryUIAbility。
3、EntryUIAbility收到點擊事件后，調(diào)起FuncUIAbility。
4、FuncUIAbility將msg傳遞給與其綁定的Func頁面。
5、Func頁面接受到msg后，將其展現(xiàn)在該頁面的一個Text控件中。
? ? 接下來，我們一起run一下我們的項目，看下效果是否符合預(yù)期：
???????
文章來源：http://www.zghlxwxcb.cn/news/detail-801248.html
? ? 最后，簡單總結(jié)一下。本篇我們一起回顧了之前學(xué)習(xí)的關(guān)于UIAbility的相關(guān)知識，并在開篇拋出了一個UIAbility和Page相互交互的需求。然后我們拆分需求，循序漸進(jìn)地實現(xiàn)了我們的需求。并在最后，向大家展示了一下demo的效果。在文章中，有幾處加了背景顏色的需要特別注意的信息，大家需要格外的留意，以防止掉進(jìn)坑里。下一篇，跟大家一起學(xué)習(xí)下UI開發(fā)的基礎(chǔ)知識。文章來源地址http://www.zghlxwxcb.cn/news/detail-801248.html
到了這里，關(guān)于鴻蒙開發(fā)（四）UIAbility和Page交互的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
