【分享+1】HarmonyOS官方模板優(yōu)秀案例(第6期:商務(wù)辦公 · 筆記應(yīng)用)

0 評(píng)論 742 瀏覽 0 收藏 26 分鐘

?? 鴻蒙生態(tài)為開發(fā)者提供海量的HarmonyOS模板/組件,助力開發(fā)效率原地起飛 ??

★ 一鍵直達(dá)生態(tài)市場組件&模板市場?, 快速應(yīng)用DevEco Studio插件市場集成組件&模板?★

工作生活小幫手,筆記應(yīng)用可以集中管理零散信息、提高信息獲取和協(xié)作效率。

本期案例介紹如何快速基于模板開發(fā)一款筆記應(yīng)用

?? 覆蓋20+行業(yè),點(diǎn)擊查看往期案例匯總貼,持續(xù)更新,點(diǎn)擊收藏!一鍵三連!??闯P拢?/p>

 

【第6期】商務(wù)辦公 · 筆記應(yīng)用

  • 概述
  1. 行業(yè)洞察
  • 行業(yè)訴求:
    • 用戶忠誠度低 :工具性產(chǎn)品功能相對(duì)單一,缺乏互動(dòng)入口,用戶黏性很低。
    • 同質(zhì)化嚴(yán)重 :開源框架等技術(shù)的發(fā)展降低了開發(fā)門檻,許多工具應(yīng)用在功能上高度重疊,尤其是SaaS工具市場,各種功能相似、定位重疊的產(chǎn)品層出不窮,導(dǎo)致用戶選擇困難,開發(fā)者也難以脫穎而出。
    • 個(gè)性化需求滿足難度大 :隨著用戶需求的不斷變化和多樣化,工具應(yīng)用需要覆蓋的場景也越來越多,但很多工具提供的是通用功能,無法快速滿足客戶的各種差異化需求,尤其是一些靜態(tài)分析工具等專業(yè)工具,用戶難以開發(fā)自定義規(guī)則,對(duì)誤報(bào)和漏報(bào)的規(guī)則也無法快速修改。。
  • 行業(yè)常用三方SDK

SDK鏈接:極光安全認(rèn)證SDK騰訊優(yōu)量匯SDK、美數(shù)AdMate?SDK、穿山甲廣告SDK、騰訊圖靈盾風(fēng)險(xiǎn)識(shí)別SDK、支付寶SDKThinking SDK、七牛云存儲(chǔ)SDK、友盟移動(dòng)統(tǒng)計(jì)SDKUtdid、騰訊微信SDK、騰訊QQ SDK

說明:“以上三方庫及鏈接僅為示例,三方庫由三方開發(fā)者獨(dú)立提供,以其官方內(nèi)容為準(zhǔn)”

 

  1. 案例概覽(下載模板

基于以上行業(yè)分析,本期將介紹鴻蒙生態(tài)市場商務(wù)辦公類行業(yè)模板——筆記應(yīng)用模板,為行業(yè)提供常用功能的開發(fā)案例,模板主要分首頁、我的兩大模塊。

  • Stage開發(fā)模型 + 聲明式UI開發(fā)范式。
  • 分層架構(gòu)設(shè)計(jì) + 組件化拆分,支持開發(fā)者在開發(fā)時(shí)既可以選擇完整使用模板,也可以根據(jù)需求單獨(dú)選用其中的業(yè)務(wù)組件。
  • 本模板已集成賬號(hào)服務(wù),只需做少量配置和定制即可快速實(shí)現(xiàn)華為賬號(hào)一鍵登錄。

本模板主要頁面及核心功能如下所示

?筆記模板

|– 首頁

| ???|– 搜索

| ???|– 筆記分類

| ???| ???|– 新建分類

| ???| ???|– 重命名

| ???| ???└– 刪除分類

| ???|– 排序

| ???| ???|– 按創(chuàng)建時(shí)間排序

| ???| ???└– 按修改時(shí)間排序

| ???|– 筆記列表

| ???| ???|– 復(fù)制內(nèi)容

| ???| ???|– 移動(dòng)到其他分類

| ???| ???└– 刪除

| ???|– 創(chuàng)建筆記

| ???| ???|– 保存

| ???| ???└– 分享筆記

| ???└– 編輯筆記

| ????????|– 保存

| ????????└– 分享筆記

└– 我的

|– 用戶信息

| ???|– 華為賬號(hào)一鍵登錄

| ???└– 頭像昵稱修改

└– 回收站

| ???|– 搜索筆記

| ???|– 恢復(fù)筆記

| ???└– 徹底刪除

└– 設(shè)置

|– 隱私協(xié)議

|– 保密設(shè)置

| ???|– 手勢密碼

| ???└– 指紋解鎖

└– 退出登錄

 

  • 應(yīng)用架構(gòu)設(shè)計(jì)
  1. 分層模塊化設(shè)計(jì)
    • 產(chǎn)品定制層:專注于滿足不同設(shè)備或使用場景的個(gè)性化需求,作為應(yīng)用的入口,是用戶直接互動(dòng)的界面。
  • 本實(shí)踐暫時(shí)只支持直板機(jī),為單HAP包形式,包含路由根節(jié)點(diǎn)、底部導(dǎo)航欄等。
    • 基礎(chǔ)特性層:用于存放相對(duì)獨(dú)立的功能UI和業(yè)務(wù)邏輯實(shí)現(xiàn)。
  • 本實(shí)踐的基礎(chǔ)特性層將應(yīng)用底部導(dǎo)航欄的每個(gè)選項(xiàng)拆分成一個(gè)獨(dú)立的業(yè)務(wù)功能模塊。
  • 每個(gè)功能模塊都具備高內(nèi)聚、低耦合、可定制的特點(diǎn),支持產(chǎn)品的靈活部署。
    • 公共能力層:存放公共能力,包括公共UI組件、數(shù)據(jù)管理、外部交互和工具庫等共享功能。
  • 本實(shí)踐的公共能力層分為公共基礎(chǔ)能力和可分可合組件,均打包為HAR包被上層業(yè)務(wù)組件引用。
  • 公共基礎(chǔ)能力包含日志、文件處理等工具類,公共類型定義,網(wǎng)絡(luò)庫,以及彈窗、加載等公共組件。
  • 可分可合組件將包含行業(yè)特點(diǎn)、可完全自閉環(huán)的能力抽出獨(dú)立的組件模塊,支持開發(fā)者在開發(fā)中單獨(dú)集成使用,詳見業(yè)務(wù)組件設(shè)計(jì)章節(jié)。

  1. 業(yè)務(wù)組件設(shè)計(jì)

為支持開發(fā)者單獨(dú)獲取特定場景的頁面和功能,本模板將功能完全自閉環(huán)的部分能力抽離出獨(dú)立的行業(yè)組件模塊,不依賴公共基礎(chǔ)能力包,開發(fā)者可以單獨(dú)集成,開箱即用,降低使用難度。

  • 行業(yè)場景技術(shù)方案
  1. 富文本筆記編輯
  • 場景說明

用戶可創(chuàng)建和編輯富文本筆記,支持文本樣式修改、圖片插入、撤銷重做、內(nèi)容復(fù)制等功能。

  • 技術(shù)方案
    • 基于RichEditorController實(shí)現(xiàn)富文本編輯能力。
    • 使用StyledString管理帶樣式的文本內(nèi)容。
    • 采用操作記錄棧(historyRecordArray)實(shí)現(xiàn)撤銷重做功能。
    • 集成系統(tǒng)剪貼板服務(wù)實(shí)現(xiàn)內(nèi)容復(fù)制。
  1. 筆記分類管理
  • 場景說明
    • 用戶可創(chuàng)建、重命名、刪除筆記分類,支持分類間筆記移動(dòng),右滑操作支持快速編輯和刪除。

  • 技術(shù)方案
    • 采用SwipeAction實(shí)現(xiàn)右滑操作菜單。
    • 使用自定義彈窗組件進(jìn)行分類管理。
    • 通過CategoryService統(tǒng)一管理分類數(shù)據(jù)。
    • 支持分類下筆記的批量遷移。
  1. 搜索功能
  • 場景說明

用戶可在首頁通過搜索框輸入關(guān)鍵詞進(jìn)行實(shí)時(shí)搜索,支持在正常筆記和回收站筆記中進(jìn)行全文檢索,搜索結(jié)果實(shí)時(shí)展示。

  • 技術(shù)方案
    • 用SearchController實(shí)現(xiàn)搜索框交互。
    • 支持實(shí)時(shí)搜索和提交搜索兩種模式。
    • 通過NoteService進(jìn)行底層數(shù)據(jù)檢索。
    • 使用@Trace裝飾器實(shí)現(xiàn)狀態(tài)管理。
    • 支持分類內(nèi)搜索和全局搜索。
  • 模板代碼
  1. 工程結(jié)構(gòu)下載模板

詳細(xì)代碼結(jié)構(gòu)如下所示:

Notes

|- common ???????????????????????????????????????// 公共層

| ??|- datasource/src/main/ets/ ?????????????????// 公共資源

| ??| ???|- CategoryService.ets ?????????????????// 分類服務(wù)

| ??| ???|- Data.ets ????????????????????????????// mock數(shù)據(jù)

| ??| ???|- Model.ets ???????????????????????????// 建立模型

| ??| ???└- NoteService.ets ?????????????????????// 筆記服務(wù)

| ??└- utils/src/main/ets ???????????????????????// 公共組件模塊(hsp)

| ???????|- constants

| ???????| ????CommonConstants.ets ??????????????// 公共常量

| ???????| ????DateConstants.ets ????????????????// 日期格式化常量

| ???????└- utils ???????????????????????????????// 工具類

| ?????????????AccountUtil.ets ??????????????????// 賬號(hào)

| ?????????????AppUtil.ets ??????????????????????// 應(yīng)用

| ?????????????DateUtil.ets ?????????????????????// 日期處理

| ?????????????LogUtil.ets ??????????????????????// 日志工具

| ?????????????ObjectUtil.ets ???????????????????// 對(duì)象工具

| ?????????????ShowToast.ets ????????????????????// 吐司

| ?????????????StringUtil.ets ???????????????????// 字符串工具

|

|- components ???????????????????????????????????// 公共組件

| ??|- richeditor/src/main/ets/ ?????????????????// 富文本組件

| ??| ???|- common

| ??| ???| ????Constants.ets ????????????????????// 公共常量

| ??| ???|- components

| ??| ???| ????RichEditorArea.ets ???????????????// 富文本編輯

| ??| ???| ????SnapshotPreview.ets ??????????????// 截圖預(yù)覽

| ??| ???|- model

| ??| ???| ????AlignmentInfo.ets ????????????????// 編輯富文本框段落選項(xiàng)

| ??| ???└- util

| ??| ?????????CommonUtils.ets ??????????????????// 常用(沉睡/截圖)

| ??| ?????????ControllerUtil.ets ???????????????// 本項(xiàng)目使用

| ??| ?????????ImageUtils.ets ???????????????????// 圖片處理

| ??| ?????????PickerUtil.ets ???????????????????// 選擇、保存圖片

| ??| ?????????PopupUtils.ets ???????????????????// 截圖計(jì)算

| ??| ?????????RichEditorUtil.ets ???????????????// 富文本編輯器工具類

| ??|

| ??└- secretlock/src/main/ets/ ?????????????????// 應(yīng)用密碼設(shè)置組件

| ???????|- components

| ???????| ????SecretLockSwitch.ets ?????????????// 密碼設(shè)置開關(guān)

| ???????|- model

| ???????| ????AuthOptions.ets ??????????????????// 認(rèn)證參數(shù)類

| ???????| ????SecretLock.ets ???????????????????// 密碼鎖-保密設(shè)置(持久化)

| ???????|- pages

| ???????| ????DrawLock.ets ?????????????????????// 密碼設(shè)置繪制頁面

| ???????└- util

| ?????????????AuthUtil.ets ?????????????????????// 生物識(shí)別認(rèn)證工具類

|

└- product/phone

└—src/main/ets

|- common

| ??LoginConstants.ets ?????????????????// 登錄常量

|- components

| ??RightArrow.ets ?????????????????????// 右箭頭

|- entryability

| ??EntryAbility.ets ???????????????????// 主頁面

└- pages

mine ???????????????????????????????// 我的-相關(guān)頁面

|- MineView.ets ???????????????????// 我的頁面入口

|- PrivacyAgreement.ets ???????????// 隱私協(xié)議(隱私政策)

|- QuickLoginPage.ets ?????????????// 一鍵登錄

|- SecretSetting.ets ??????????????// 保密設(shè)置

|- Setting.ets ????????????????????// 設(shè)置

|- Trash.ets ??????????????????????// 回收站

└- UserInfoPage.ets ???????????????// 用戶信息

EditorCategory.ets ?????????????????// 編輯分類

EditNotes.ets ??????????????????????// 編輯筆記

Index.ets ??????????????????????????// 入口頁面

?

 

  1. 關(guān)鍵代碼解讀

本篇代碼非應(yīng)用的全量代碼,只包括應(yīng)用的部分能力的關(guān)鍵代碼。

  • 筆記多選管理
?// 筆記卡片長按事件處理

handleLangPress(item:?Note)?{

// 非多選狀態(tài)下生效

if?(!this.selectedController.isCtrl)?{

this.selectedController.isCtrl =?true;

item.isSelected =?true;

this.selectedController.selectedCount =?1;

}

}

 

// 全選功能實(shí)現(xiàn)

handleSelectAll()?{

if?(this.selectedController.selectedCount ===?this.noteList.length)?{

this.noteList.forEach(item =>?item.isSelected =?false);

this.selectedController.selectedCount =?0;

}?else?{

this.noteList.forEach(item =>?item.isSelected =?true);

this.selectedController.selectedCount =?this.noteList.length;

}

}

 

// 多選工具欄構(gòu)建

@Builder

toolBarBuilder(){

if?(this.selectedController.isCtrl){

Row(){

ForEach(toolBarList,?(item:?ToolBar)?=>?{

Column({?space:?5?}){

Image(item.icon)

.width(24)

.height(24)

Text(item.name)

.fontSize(10)

.fontColor($r(‘sys.color.font_secondary’))

}

.onClick(()?=>?{

this.handleToolBarClick(item.name)

})

},?(item:?ToolBar)?=>?JSON.stringify(item))

}

.margin({?top:?10?})

.padding({?bottom:?10?})

.justifyContent(FlexAlign.SpaceAround)

.width(‘100%’)

.height(70)

.backgroundColor($r(‘sys.color.comp_background_list_card’))

}

}

  • 富文本編輯器控制
?// 富文本編輯器控制器

richEditorController:?RichEditorController =?RichEditorController.instance;

 

// 撤銷重做功能實(shí)現(xiàn)

@Builder

toolBar()?{

Row({?space:?12?})?{

Image(this.richEditorController.currentIndex <?1??

$r(‘app.media.undo_expire’)?:?$r(‘app.media.undo_effect’))

.width(40)

.height(40)

.onClick(()?=>?{

this.richEditorController.onDo();?// 撤銷

});

 

Image(this.richEditorController.currentIndex >=?this.richEditorController.historyRecordArray.length –?1??

$r(‘app.media.redo_expire’)?:?$r(‘app.media.redo_effect’))

.width(40)

.height(40)

.onClick(()?=>?{

this.richEditorController.reDo();?// 重做

});

}

}

 

// 內(nèi)容復(fù)制功能

copyNoteText()?{

let?copyText =?this.currentNote?.description ||?”;

let?plainTextData =?new?unifiedDataChannel.UnifiedData();

let?plainText =?new?unifiedDataChannel.PlainText();

plainText.details =?{

key:?‘delayPlaintext’,

value:?copyText,

};

plainText.textContent =?copyText;

plainText.abstract?=?‘delayTextContent’;

plainTextData.addRecord(plainText);

let?systemPasteboard:?pasteboard.SystemPasteboard =?pasteboard.getSystemPasteboard();

systemPasteboard.setUnifiedData(plainTextData);

}

 

  • 分類管理實(shí)現(xiàn)
?// 分類右滑操作菜單

@Builder

categoryEnd(item:?Category){

Row()?{

Image($r(‘app.media.edit_category’))

.width(40)

.height(40)

.margin({?left:?16,?right:?16})

.onClick(()?=>?{

this.isEditCategoryName =?true;

this.categoryId =?item.id;

// 打開編輯分類彈窗

})

 

Image($r(‘app.media.delete_category’))

.width(40)

.height(40)

.onClick(()?=>?{

this.categoryId =?item.id;

// 打開刪除分類彈窗

})

}

.width(112)

.height(48)

}

 

// 分類刪除對(duì)話框

@ComponentV2

struct DeleteCategoryDialog {

@Param?@Require?params:?DeleteCategoryParam;

noteService:?NoteService =?NoteService.instance;

categoryService:?CategoryService =?CategoryService.instance;

 

build()?{

Column({?space:?30?})?{

// 僅刪除分類選項(xiàng)

Row()?{

Text(‘僅刪除分類’)

.fontSize(16)

.onClick(()?=>?{

this.noteService.moveNotesCategory(this.params.categoryId);

this.categoryService.deleteCategoryById(this.params.categoryId);

});

}

 

// 刪除分類和筆記選項(xiàng)

Row()?{

Text(‘刪除分類和筆記’)

.fontSize(16)

.fontColor(Color.Red)

.onClick(()?=>?{

let?notes =?this.noteService.getNoteList(this.params.categoryId);

notes.forEach((item)?=>?{

this.noteService.deleteNote(item.id);

});

this.categoryService.deleteCategoryById(this.params.categoryId);

});

}

}

}

}

  • 響應(yīng)式布局適配
?// 斷點(diǎn)響應(yīng)式樣式定義

@Styles

topAreaStyle()?{

.width(‘100%’)

.padding(new?BreakpointType<Padding>({

sm:?{

top:?12,

bottom:?20,

left:?$r(‘sys.float.padding_level8’),

right:?$r(‘sys.float.padding_level8’),

},

md:?{

top:?12,

bottom:?20,

left:?$r(‘sys.float.padding_level12’),

right:?$r(‘sys.float.padding_level12’),

},

lg:?{

top:?12,

bottom:?20,

left:?$r(‘sys.float.padding_level16’),

right:?$r(‘sys.float.padding_level16’),

},

}).getValue(this.globalInfo.currentBreakpoint));

}

 

// 不同視圖模式適配

@Builder

showNoteList()?{

if?(this.noteSearchController.isSearching &&?this.noteList.length ===?0)?{

SearchNoResult()

}

if?(!this.noteSearchController.isSearching &&?this.noteList.length ===?0){

EmptyNotes()

}?else?if?(this.showListType ===?SHOW_METHOD_ENUM.normalList)?{

this.cardList()?// 列表視圖

}?else?{

this.waterCardList()?// 瀑布流視圖

}

}

 

// 瀑布流布局實(shí)現(xiàn)

@Builder

waterCardList()?{

Column()?{

WaterFlow()?{

LazyForEach(this.dataList,?(item:?Note)?=>?{

FlowItem()?{

this.cardItem(item,?9)?// 9行文本顯示

}

.width(‘100%’)

.gesture(

LongPressGesture({?repeat:?false,?fingers:?1,?duration:?500?})

.onAction((event:?GestureEvent|undefined)?=>?{

if(event){

this.handleLangPress(item)

}

})

)

},?(item:Note)?=>?item.id)

}

.columnsTemplate(‘1fr 1fr’)?// 兩列布局

.columnsGap(obtainGutter(this.globalInfo.currentBreakpoint,?‘WaterFlow’))

.rowsGap(16)

}

}

以上代碼展示了商務(wù)筆記應(yīng)用的核心功能實(shí)現(xiàn),包括多選管理、富文本編輯、分類管理和響應(yīng)式布局等關(guān)鍵技術(shù)方案。

  1. 模板集成

本模板提供了兩種代碼集成方式,供開發(fā)者自由選用。

開發(fā)者可以選擇直接基于模板工程開發(fā)自己的應(yīng)用工程。

  • 模板代碼獲?。?/strong>
  • 通過IDE插件創(chuàng)建模板工程,開發(fā)指導(dǎo)。
  • 通過生態(tài)市場下載源碼,下載模板。
  • 通過開源倉訪問源碼,倉庫地址
    • 打開模板工程,根據(jù)README說明中的快速入門章節(jié),將自己的應(yīng)用信息配置在模板工程內(nèi),即可運(yùn)行并查看模板效果。

  • 對(duì)接開發(fā)者自己的服務(wù)器接口,轉(zhuǎn)換數(shù)據(jù)結(jié)構(gòu),展示真實(shí)的云側(cè)數(shù)據(jù)

將commons/lib_common/src/main/ets/httprequest/HttpRequestApi.ets文件中的mock接口替換為真實(shí)的服務(wù)器接口。

在commons/lib_common/src/main/ets/httprequest/HttpRequest.ets文件中將云側(cè)開發(fā)者自定義的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為端側(cè)數(shù)據(jù)結(jié)構(gòu)。

根據(jù)自己的業(yè)務(wù)內(nèi)容修改模板,進(jìn)行定制化開發(fā)。

  • 按需集成

若開發(fā)者已搭建好自己的應(yīng)用工程,但暫未實(shí)現(xiàn)其中的部分場景能力,可以選擇取用其中的業(yè)務(wù)組件,集成在自己的工程中。

  • 組件代碼獲?。?/strong>
  • 通過IDE插件下載組件源碼。開發(fā)指導(dǎo)
  • 通過生態(tài)市場下載組件源碼。下載地址
    • 下載組件源碼,根據(jù)README中的說明,將組件包配置在自己的工程中。

  • 根據(jù)API參考和示例代碼,將組件集成在自己的對(duì)應(yīng)場景中。

 

以上是第6期“商務(wù)辦公-筆記應(yīng)用”行業(yè)案例的內(nèi)容,更多行業(yè)敬請(qǐng)期待~

歡迎下載使用行業(yè)模板“點(diǎn)擊下載”,若您有體驗(yàn)和開發(fā)問題,或者迫不及待想了解XX行業(yè)的優(yōu)秀案例,歡迎在評(píng)論區(qū)留言,小編會(huì)快馬加鞭為您解答~

同時(shí)誠邀您添加下方二維碼加入“組件模板開發(fā)者社群”,精彩上新&活動(dòng)不錯(cuò)過!

?? HarmonyOS官方模板優(yōu)秀案例系列持續(xù)更新,?點(diǎn)擊查看往期案例匯總貼,?點(diǎn)擊收藏?方便查找!

??【互動(dòng)有禮】邀請(qǐng)你成為HarmonyOS官方模板產(chǎn)品經(jīng)理,優(yōu)化方案由你制定!點(diǎn)擊參加

?? HarmonyOS組件模板相關(guān)推薦鴻蒙應(yīng)用開發(fā)者激勵(lì)計(jì)劃2025,點(diǎn)擊查看

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!