HarmonyOS開發(fā)實(shí)例：【自定義Emitter】
介紹
本示例使用[Emitter]實(shí)現(xiàn)事件的訂閱和發(fā)布，使用[自定義彈窗]設(shè)置廣告信息。
效果預(yù)覽
使用說明
- 進(jìn)入首頁(yè)后彈出廣告彈窗，點(diǎn)擊即可關(guān)閉。
- 點(diǎn)擊商品列表中的一個(gè)商品可以跳轉(zhuǎn)到商品詳情頁(yè)。
- 在商品詳情頁(yè)點(diǎn)擊首頁(yè)可以返回到商品列表頁(yè)，點(diǎn)擊購(gòu)物車可以跳轉(zhuǎn)到購(gòu)物車頁(yè)面，點(diǎn)擊加入購(gòu)物車可以在購(gòu)物車頁(yè)面添加一條商品信息，點(diǎn)擊立即購(gòu)買可以增加一次已購(gòu)物數(shù)量顯示在購(gòu)物車頁(yè)面。
- 在購(gòu)物車頁(yè)面點(diǎn)擊購(gòu)物車列表內(nèi)商品的減號(hào)圖標(biāo)，可以將此商品信息從購(gòu)物車列表內(nèi)刪除，點(diǎn)擊清空購(gòu)買數(shù)量可以將已購(gòu)物數(shù)量清空、顯示為0。
- 鴻蒙開發(fā)文檔參考：[
qr23.cn/AKFP8k]
代碼解析
HarmonyOS&OpenHarmony文檔紫料添加v
mau123789直接拿取
entry/src/main/ets/
|---components
| |---BottomNavigation.ets // 底部按鈕導(dǎo)航欄
| |---Choice.ets // 商品規(guī)格選擇
| |---EventsDialog.ets // 廣告彈窗
| |---Information.ets // 詳細(xì)信息頁(yè)面
| |---Valueation.ets // 價(jià)格頁(yè)面
|---mock
| |---DetailData.ets // 商品詳情數(shù)據(jù)
| |---ProductsData.ets // 產(chǎn)品列表數(shù)據(jù)
|---model
| |---DetailMode.ets // 商品詳情數(shù)據(jù)結(jié)構(gòu)
| |---GoodsModel.ets // 商品數(shù)據(jù)結(jié)構(gòu)
|---pages
| |---Detail.ets // 商品詳情
| |---Index.ets // 首頁(yè)
| |---ShopCart.ets // 購(gòu)物車
|---shoppingCart
| |---Cart.ets // 購(gòu)物車
| |---FavorGoodlist.ets // 推薦列表
|---util
| |---Logger.ets // 日志工具
feature/emitter/src/main/ets/
|---common
| |---EmitterConst.ts // 事件通知常量
|---components
| |---feature
| | |---CustomEmitter.ets // 封裝事件通知類
具體實(shí)現(xiàn)
- 訂閱事件通知在CustomEmitter中實(shí)現(xiàn)，源碼參考[CustomEmitter.ets]
/*
* Copyright (c) 2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import emitter from '@ohos.events.emitter';
import { EmitterConst } from '../../common/EmitterConst';
import Base from '@ohos.base';
class GoodsListInner {
id: number = 0
}
class GoodsList {
data: GoodsListInner = {
id: 0
}
}
export class CustomEmitter {
shoppingCartGoodsList: GoodsList[] = [];
// 單次訂閱回調(diào)
public showEventsDialog(callback: Base.Callback< emitter.EventData >) {
let dialogShowEventsId: emitter.InnerEvent = {
eventId: EmitterConst.DIALOG_EVENT_ID
};
let dialogShowEventsData: emitter.EventData = {
data: {
id: EmitterConst.DIALOG_EVENT_ID,
}
};
// 單次訂閱事件--廣告
emitter.once(dialogShowEventsId, callback);
// 事件發(fā)布
emitter.emit(dialogShowEventsId, dialogShowEventsData);
}
// 單次訂閱回調(diào)(eventId為string類型)
public closeEventsDialog(callback: Base.Callback< emitter.EventData >) {
let dialogCloseEventsData: emitter.EventData = {
data: {
id: EmitterConst.CLOSE_DIALOG_EVENT_ID
}
};
// 單次訂閱事件--關(guān)閉廣告
emitter.once(EmitterConst.CLOSE_DIALOG_EVENT_ID, callback);
// 事件發(fā)布
emitter.emit(EmitterConst.CLOSE_DIALOG_EVENT_ID, dialogCloseEventsData);
}
// 持久化訂閱的事件回調(diào)
public setShoppingCartGoodsList(callback: (eventData: emitter.EventData) = > void) {
let addGoodDataId: emitter.InnerEvent = {
eventId: EmitterConst.ADD_EVENT_ID
};
// 以持久化方式訂閱購(gòu)物車添加事件并接收事件回調(diào)
emitter.off(EmitterConst.ADD_EVENT_ID);
emitter.on(addGoodDataId, (eventData: emitter.EventData) = > {
callback(eventData);
});
}
// 持久化訂閱的事件回調(diào)(eventId為string類型)
public deleteShoppingCartGoodsList(callback: (eventData: emitter.EventData) = > void) {
// 以持久化方式訂閱購(gòu)物車刪除事件并接收事件回調(diào)
emitter.off(EmitterConst.DELETE_EVENT_ID);
emitter.on(EmitterConst.DELETE_EVENT_ID, (eventData: emitter.EventData) = > {
callback(eventData);
});
}
public addGoods(goodId: number) {
let addToShoppingCartId: emitter.InnerEvent = {
eventId: EmitterConst.ADD_EVENT_ID
};
let shoppingCartData: emitter.EventData = {
data: {
id: goodId
}
};
// 持續(xù)訂閱發(fā)布事件
emitter.emit(addToShoppingCartId, shoppingCartData);
}
public deleteGoods(listItemId: number) {
console.info("setShoppingCartGoodsList goodId" + JSON.stringify(listItemId))
let shoppingCartData: emitter.EventData = {
data: {
id: listItemId,
}
};
// 持續(xù)訂閱發(fā)布事件
emitter.emit(EmitterConst.DELETE_EVENT_ID, shoppingCartData);
}
// 以持久化方式訂閱購(gòu)物車購(gòu)買事件
public listenerEvents() {
emitter.on(EmitterConst.BUY_EVENT_ID, (eventData: emitter.EventData) = > {
});
}
// 獲取購(gòu)買事件訂閱者數(shù)量并將結(jié)果返回
public getListenerCounts(callback: (counts: number) = > void) {
callback(emitter.getListenerCount(EmitterConst.BUY_EVENT_ID));
}
// 取消訂閱購(gòu)買事件后將購(gòu)買事件訂閱者數(shù)量結(jié)果返回
public clearListenerCounts(callback: (counts: number) = > void) {
emitter.off(EmitterConst.BUY_EVENT_ID);
callback(emitter.getListenerCount(EmitterConst.BUY_EVENT_ID));
}
}
- 廣告彈窗：使用Emitter的事件單次訂閱emitter.once(eventId,call)，eventId為number類型，單次訂閱CustomDialogController彈窗事件，彈窗觸發(fā)后自動(dòng)取消訂閱。
- 關(guān)閉廣告彈窗：使用Emitter的事件單次訂閱emitter.once(eventId,call)，eventId為string類型，單次訂閱CustomDialogController彈窗事件，彈窗關(guān)閉后自動(dòng)取消訂閱。
- 購(gòu)物車添加商品：使用Emitter.on持續(xù)訂閱商品添加事件，eventId為number類型，添加商品時(shí)更新購(gòu)物車商品列表。
- 購(gòu)物車刪除商品：使用Emitter.on持續(xù)訂閱商品刪除事件，eventId為string類型，刪除商品時(shí)更新購(gòu)物車商品列表。
- 購(gòu)物數(shù)量：使用Emitter.getListenerCount獲取購(gòu)買事件訂閱者數(shù)量，進(jìn)入購(gòu)物車頁(yè)面顯示數(shù)量結(jié)果，清空時(shí)取消訂閱，結(jié)果為0。
審核編輯 黃宇
聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問題，請(qǐng)聯(lián)系本站處理。
舉報(bào)投訴
-
鴻蒙
+關(guān)注
關(guān)注
60文章
2839瀏覽量
45334 -
HarmonyOS
+關(guān)注
關(guān)注
80文章
2146瀏覽量
35511 -
OpenHarmony
+關(guān)注
關(guān)注
31文章
3920瀏覽量
20676
發(fā)布評(píng)論請(qǐng)先 登錄
相關(guān)推薦
熱點(diǎn)推薦
NIOS II自定義指令設(shè)計(jì)之實(shí)例篇
在【原創(chuàng)】SOPC用戶自定義指令設(shè)計(jì)之軟件篇 和【原創(chuàng)】SOPC用戶自定義指令設(shè)計(jì)之硬件篇 中分別講述了自定義指令在軟件和硬件設(shè)計(jì)中的規(guī)范，在本文中，將給出一個(gè)具
發(fā)表于 03-27 17:56
?3395次閱讀
HarmonyOS開發(fā)案例：【 自定義彈窗】
基于ArkTS的聲明式開發(fā)范式實(shí)現(xiàn)了三種不同的彈窗，第一種直接使用公共組件，后兩種使用CustomDialogController實(shí)現(xiàn)自定義彈窗
如何添加自定義單板
在開發(fā)過程中，用戶有時(shí)需要?jiǎng)?chuàng)建自定義板配置。本節(jié)將通過一個(gè)實(shí)例講解用戶如何創(chuàng)建屬于自己的machine，下面以g2l-test.conf為例進(jìn)行說明。
HarmonyOS應(yīng)用自定義鍵盤解決方案
自定義鍵盤是一種替換系統(tǒng)默認(rèn)鍵盤的解決方案，可實(shí)現(xiàn)鍵盤個(gè)性化交互。允許用戶結(jié)合業(yè)務(wù)需求與操作習(xí)慣，對(duì)按鍵布局進(jìn)行可視化重構(gòu)、設(shè)置多功能組合鍵位，使輸入更加便捷和舒適。在安全防護(hù)層面，自定義鍵盤可以
講解一下HarmonyOS中的幾個(gè)自定義組件用到的知識(shí)
HarmonyOS 的 Component 組件對(duì)外提供了一個(gè) DrawTask 接口，通過 addDrawTask 方法為組件添加一個(gè) DrawTask，讓開發(fā)者可以進(jìn)行自定義繪制邏輯。首先我們
發(fā)表于 03-16 16:05
OpenHarmony應(yīng)用開發(fā)之自定義彈窗
。
aboutToAppear參考文檔：??自定義組件的生命周期-組件參考（基于ArkTS的聲明式開發(fā)范式）-ArkTS API參考-HarmonyOS應(yīng)用開發(fā)??
實(shí)現(xiàn)builder
發(fā)表于 09-06 14:40
鴻蒙上自定義組件的過程
?? 在實(shí)際開發(fā)過程中，我們經(jīng)常會(huì)遇到一些系統(tǒng)原有組件無法滿足的情況，而 HarmonyOS 提供了自定義組件的方式，我們使用自定義組件來滿足項(xiàng)目需求。 ????
HarmonyOS 中的幾個(gè)自定義控件介紹
HarmonyOS 開發(fā)自定義組件目前還不是很豐富，在開發(fā)過程中常常會(huì)有一些特殊效果的組件，這就需要我們額外花一些時(shí)間實(shí)現(xiàn)。
自定義視圖組件教程案例
自定義組件 1.自定義組件-particles（粒子效果） 2.自定義組件- pulse（脈沖button效果） 3.自定義組件-progress（progress效果） 4.
發(fā)表于 04-08 10:48
?15次下載
ArkUI如何自定義彈窗（eTS）
自定義彈窗其實(shí)也是比較簡(jiǎn)單的，通過CustomDialogController類就可以顯示自定義彈窗。
自定義算子開發(fā)
一個(gè)完整的自定義算子應(yīng)用過程包括注冊(cè)算子、算子實(shí)現(xiàn)、含自定義算子模型轉(zhuǎn)換和運(yùn)行含自定義op模型四個(gè)階段。在大多數(shù)情況下，您的模型應(yīng)該可以通過使用hb_mapper工具完成轉(zhuǎn)換并順利部署到地平線芯片上……
鴻蒙ArkUI實(shí)例：【自定義組件】
組件是 OpenHarmony 頁(yè)面最小顯示單元，一個(gè)頁(yè)面可由多個(gè)組件組合而成，也可只由一個(gè)組件組合而成，這些組件可以是ArkUI開發(fā)框架自帶系統(tǒng)組件，比如?`Text`?、?`Button`?等，也可以是自定義組件，本節(jié)筆者簡(jiǎn)單介紹一下
工商網(wǎng)監(jiān)
評(píng)論