概述
隨著應(yīng)用代碼的復(fù)雜度提升，為了使應(yīng)用有更好的可維護(hù)性和可擴(kuò)展性贡耽，良好的應(yīng)用架構(gòu)設(shè)計變得尤為重要鲁捏。本篇文章將介紹一個應(yīng)用通用架構(gòu)的設(shè)計思路，以減少模塊間的耦合硼端、提升團(tuán)隊開發(fā)效率并淋，為開發(fā)者呈現(xiàn)一個清晰且結(jié)構(gòu)化的開發(fā)框架。 本文以“應(yīng)用通用開發(fā)范例App”為例显蝌，從分層架構(gòu)設(shè)計和模塊化設(shè)計的方面介紹應(yīng)用的架構(gòu)組成预伺。
分層架構(gòu)設(shè)計：將應(yīng)用劃分為產(chǎn)品定制層、基礎(chǔ)特性層和公共能力層曼尊，可以降低層間的依賴性，從而提升代碼的可維護(hù)性脏嚷。應(yīng)用通用開發(fā)范例App分層架構(gòu)如下：
common_app_development
|---AppScope
|---common // 公共能力層骆撇，包括公共UI組件、數(shù)據(jù)管理父叙、通信和工具庫等
|---feature // 基礎(chǔ)特性層神郊，包含獨立的業(yè)務(wù)模塊肴裙，如啟動頁、登錄模塊涌乳、導(dǎo)航欄等
|---libs // 三方依賴庫
|---product // 產(chǎn)品定制層蜻懦，作為不同設(shè)備或場景應(yīng)用入口，例如phone夕晓、tv等
模塊化設(shè)計：應(yīng)用被分解為多個功能模塊宛乃，其中每個模塊負(fù)責(zé)執(zhí)行特定的功能。通過模塊化設(shè)計提高了代碼的可理解性和可復(fù)用性蒸辆，使應(yīng)用的擴(kuò)展和維護(hù)變得更為簡便征炼，同時降低了系統(tǒng)各部分之間的耦合度。應(yīng)用通用開發(fā)范例App模塊化結(jié)構(gòu)如下：
common_app_development
|---AppScope
|---common // 公共能力層
| |---utils
| | |---component // 公共布局躬贡，如功能介紹布局
| | |---log // 日志打印
|---feature // 基礎(chǔ)特性層
| |---addressexchange // 地址交換動畫案例
| |---akiusepractice // AKI使用實踐
| |---applicationexception // 應(yīng)用異常處理案例
| |---barchart // MpChart圖表實現(xiàn)案例
| |---customtabbar // 自定義TabBar頁簽 案例
| |---eventpropagation // 阻塞事件冒泡案例
| |---fitfordarkmode // 深色模式適配案例
| |---functionalscenes // 主頁瀑布流實現(xiàn)
| |---gbktranscoding // Axios獲取網(wǎng)絡(luò)數(shù)據(jù)案例
| |---handletabs // Tab組件實現(xiàn)增刪Tab標(biāo)簽案例
| |---imageviewer // 圖片預(yù)覽方案
| |---marquee // 跑馬燈案例
| |---modalwindow // 全屏登錄頁面案例
| |---nativeprogressnotify // Native側(cè)進(jìn)度通知到ArkTS
| |---nativerawfile // Native讀取Rawfile中文件部分內(nèi)容
| |---navigationparametertransfer // Navigation頁面跳轉(zhuǎn)對象傳遞案例
| |---pageturninganimation // 翻頁動效案例
| |---pendingitems // 列表編輯實現(xiàn)案例
| |---photopickandsave // 圖片選擇和下載保存案例
| |---pulltorefreshnews // 下拉刷新與上滑加載案例
| |---secondarylinkage // 二級聯(lián)動實現(xiàn)案例
| |---slidetohideanddisplace // 滑動頁面信息隱藏與組件位移效果案例
| |---variablewatch // 多層嵌套類對象監(jiān)聽案例
| |---verifycode // 驗證碼布局
| |---vibrateeffect // 基礎(chǔ)特性層-抖動動畫及手機振動效果
| |---customcalendarpickerdialog // 基礎(chǔ)特性層-自定義日歷選擇器
| |---navigationbarchange // 基礎(chǔ)特性層-狀態(tài)欄顯隱變化案例
| |---customview // 基礎(chǔ)特性層-自定義視圖實現(xiàn)Tab效果
| |---waterripples // 基礎(chǔ)特性層-聽歌識曲水波紋特效案例
| |---citysearch // 城市選擇案例
| |---componentstack // 組件堆疊案例
| |---dragandexchange // Grid和List內(nèi)拖拽交換子組件位置案例
| |---foldablescreencases // 折疊屏音樂播放器案例
| |---imagecomment // 發(fā)布圖片評論案例
| |---mediafullscreen // 視頻全屏切換案例
| |---swipercomponent // 多層級輪播圖案例
| |---swipersmoothvariation // Swiper高度可變化效果案例
| |---decompressfile // Worker子線程中解壓文件案例
| |---paintcomponent // 使用繪制組件實現(xiàn)自定義進(jìn)度動畫案例
| |---lottieview // Lottie
| |---imagecompression // 圖片壓縮方案
| |---votingcomponent // 投票組件
| |---webgetcameraimage // WebView拉起原生相機案例
| |---sidebaranimation // SideBarContainer側(cè)邊欄淡入淡出動效實現(xiàn)案例
| |---imageenableanalyzer // 圖片拖拽AI摳圖案例
| |---indicatorbelowswiper // swiper指示器導(dǎo)航點位于swiper下方
| |---bigfilecopy // 大文件拷貝案例
| |---diggingholescreen // 適配挖孔屏案例
| |---dragtoswitchpictures // 左右拖動切換圖片效果案例
| |---listitemoverflow // 元素超出List區(qū)域
| |---multiplefilesdownload // 多文件下載監(jiān)聽案例
| |---searchcomponent // 搜索頁一鏡到底案例
|---libs
|---product
| |---entry // 產(chǎn)品定制層-應(yīng)用入口
工程框架和實現(xiàn)設(shè)計
產(chǎn)品定制層
產(chǎn)品定制層專注于滿足不同設(shè)備或使用場景（如應(yīng)用/元服務(wù)）的個性化需求谆奥，包括UI設(shè)計、資源和配置拂玻，以及針對特定場景的交互邏輯和功能特性酸些。
產(chǎn)品定制層的功能模塊獨立運作，同時依賴基礎(chǔ)特性層和公共能力層來實現(xiàn)具體功能檐蚜。
可參考如下示例：
基礎(chǔ)特性層
基礎(chǔ)特性層位于公共能力層之上魄懂，用于存放基礎(chǔ)特性集合，例如相對獨立的功能UI和業(yè)務(wù)邏輯實現(xiàn)熬甚。該層的每個功能模塊都具有高內(nèi)聚逢渔、低耦合、可定制的特點乡括，以支持產(chǎn)品的靈活部署肃廓。
基礎(chǔ)特性層為上層的產(chǎn)品定制層提供穩(wěn)健且豐富的基礎(chǔ)功能支持，包括UI組件诲泌、基礎(chǔ)服務(wù)等盲赊。同時依賴于下層的公共能力層為其提供通用功能和服務(wù)。
首頁以Navigation組件為基礎(chǔ)敷扫，通過路由管理實現(xiàn)了頁面或者模塊間的跳轉(zhuǎn)哀蘑。
主頁瀑布流實現(xiàn)案例
本示例使用WaterFlow+LazyForeEach實現(xiàn)了瀑布流場景。具體方案可以參考詳細(xì)說明文檔葵第。
全屏登錄頁面案例
本例介紹各種應(yīng)用登錄頁面绘迁。在主頁面點擊跳轉(zhuǎn)到全屏登錄頁后，顯示全屏模態(tài)頁面卒密，全屏模態(tài)頁面從下方滑出并覆蓋整個屏幕缀台，模態(tài)頁面內(nèi)容自定義，此處分為默認(rèn)一鍵登錄方式和其他登錄方式哮奇。詳細(xì)說明文檔膛腐。
滑動頁面信息隱藏與組件位移效果案例
在很多應(yīng)用中睛约，向上滑動"我的"頁面，頁面頂部會有如下變化效果：一部分信息逐漸隱藏哲身，另一部分信息逐漸顯示辩涝，同時一些組件會進(jìn)行縮放或者位置移動。向下滑動時則相反勘天。詳細(xì)說明文檔怔揩。
地址交換動畫案例
在出行類訂票軟件中，一般都有此動畫效果误辑，點擊交換后沧踏，起點和終點互換。地址交換動畫的方案可以參考此詳細(xì)說明文檔巾钉。
阻塞事件冒泡案例
事件冒泡是指觸發(fā)子組件事件的時候翘狱，事件會傳遞到父組件，這樣會導(dǎo)致父組件的事件也會觸發(fā)砰苍。阻塞事件冒泡的方案可以參考此詳細(xì)說明文檔潦匈。
自定義TabBar頁簽案例
TabBar在大部分的APP當(dāng)中都能夠使用到，不同的APP可能存在不一樣的TabBar樣式赚导，Tab組件自帶的TabBar屬性對于部分效果無法滿足茬缩，如頁簽中間顯示一圈圓弧外輪廓等， 因此我們需要去自己定義一個TabBar頁簽來滿足開發(fā)的需要吼旧。自定義TabBar頁簽的方案可以參考此詳細(xì)說明文檔凰锡。
二級聯(lián)動實現(xiàn)案例
二級聯(lián)動是指一個列表（一級列表）的選擇結(jié)果，來更新另一個列表（二級列表）的選項圈暗。二級聯(lián)動的方案可以參考此詳細(xì)說明文檔掂为。
列表編輯實現(xiàn)案例
列表的編輯模式用途十分廣泛，常見于待辦事項管理员串、文件管理勇哗、備忘錄的記錄管理等應(yīng)用場景。列表編輯實現(xiàn)方案可以參考此詳細(xì)說明文檔寸齐。
MpChart圖表實現(xiàn)案例
MpChart是一個包含各種類型圖表的圖表庫欲诺，方便開發(fā)者快速實現(xiàn)圖表UI。使用MpChart可以實現(xiàn)柱狀圖UI效果渺鹦，具體方案可以參考此詳細(xì)說明文檔扰法。
讀取Rawfile中文件部分內(nèi)容案例
使用native從rawfile中文件讀取部分內(nèi)容。具體方案可以參考此詳細(xì)說明文檔毅厚。
圖片縮放效果實現(xiàn)案例
本模塊基于Image組件實現(xiàn)了簡單的圖片預(yù)覽功能迹恐，支持雙指捏合等效果。圖片預(yù)覽方案可參考此詳細(xì)說明文檔卧斟。
Axios獲取解析網(wǎng)絡(luò)數(shù)據(jù)案例
本示例介紹使用第三方庫的Axios獲取GBK格式的網(wǎng)絡(luò)數(shù)據(jù)時殴边，通過util實現(xiàn)GBK轉(zhuǎn)換UTF-8格式。該場景多用于需要轉(zhuǎn)換編碼格式的應(yīng)用珍语。詳細(xì)說明文檔锤岸。
Tab組件實現(xiàn)增刪Tab標(biāo)簽方案案例
本示例介紹使用了Tab組件實現(xiàn)自定義增刪Tab頁簽的功能。該場景多用于瀏覽器等場景板乙。詳細(xì)說明文檔是偷。
使用AKI輕松實現(xiàn)跨語言調(diào)用
AKI提供了極簡語法糖使用方式，一行代碼完成JS與C/C++的無障礙跨語言互調(diào)募逞，使用方便蛋铆。本模塊將介紹使用AKI編寫C++跨線程調(diào)用JS函數(shù)場景，為開發(fā)者使用AKI提供參考放接。AKI使用實踐可參考此詳細(xì)說明文檔刺啦。
多層嵌套類監(jiān)聽案例
對于多層嵌套的情況，比如二維數(shù)組纠脾，或者數(shù)組項class玛瘸，或者class的屬性是class，他們的第二層的屬性變化是無法觀察到的苟蹈。@Observed/@ObjectLink裝飾器可以解決糊渊， 多層嵌套類對象監(jiān)聽方案可以參考詳細(xì)說明文檔。
圖片選擇和下載保存案例
本示例介紹圖片相關(guān)場景的使用：包含訪問手機相冊圖片慧脱、選擇預(yù)覽圖片并顯示選擇的圖片到當(dāng)前頁面渺绒，下載并保存網(wǎng)絡(luò)圖片到手機相冊或到指定用戶目錄兩個場景。詳細(xì)說明文檔菱鸥。
應(yīng)用異常處理案例
本示例介紹了通過應(yīng)用事件打點hiAppEvent獲取上一次應(yīng)用異常信息的方法宗兼，主要分為應(yīng)用崩潰、應(yīng)用卡死以及系統(tǒng)查殺三種采缚。詳細(xì)說明文檔针炉。
深色模式案例
本示例介紹在開發(fā)應(yīng)用以適應(yīng)深色模式時，對于深色和淺色模式的適配方案扳抽，采取了多種策略篡帕。詳細(xì)說明文檔。
跑馬燈案例
本示例介紹了文本寬度過寬時贸呢，如何實現(xiàn)文本首尾相接循環(huán)滾動并顯示在可視區(qū)镰烧，以及每循環(huán)滾動一次之后會停滯一段時間后再滾動。詳細(xì)說明文檔楞陷。
下拉刷新上滑加載案例
本示例介紹使用第三方庫的PullToRefresh組件實現(xiàn)列表的下拉刷新數(shù)據(jù)和上滑加載后續(xù)數(shù)據(jù)怔鳖。詳細(xì)說明文檔。
翻頁動效案例
翻頁動效是應(yīng)用開發(fā)中常見的動效場景固蛾，常見的有書籍翻頁结执，日歷翻頁等度陆。本例將介紹如何通過ArkUI提供的顯示動畫接口animateTo實現(xiàn)翻頁的效果。詳細(xì)說明文檔献幔。
在Native側(cè)實現(xiàn)進(jìn)度通知功能
本示例通過模擬下載場景介紹如何將Native的進(jìn)度信息實時同步到ArkTS側(cè)懂傀。詳細(xì)說明文檔。
驗證碼布局
本示例介紹如何使用Text組件實現(xiàn)驗證碼場景蜡感，并禁用對內(nèi)容的選中蹬蚁、復(fù)制、光標(biāo)郑兴。詳細(xì)說明文檔犀斋。
使用彈簧曲線實現(xiàn)抖動動畫及手機振動效果案例
抖動動畫和手機振動效果是手機使用時常見的效果。抖動動畫及手機振動效果案例可以參考詳細(xì)說明文檔情连。
自定義日歷選擇器
日歷選擇器是出行類應(yīng)用常見模塊叽粹。自定義日歷選擇器案例可以參考詳細(xì)說明文檔。
狀態(tài)欄顯隱變化案例
本示例介紹使用Scroll組件的滾動事件 onScroll 實現(xiàn)狀態(tài)欄顯隱變化蒙具。該場景多用于各種軟件的首頁球榆、我的等頁面中。狀態(tài)欄顯隱變化的方案可以參考此詳細(xì)說明文檔禁筏。
自定義視圖實現(xiàn)Tab效果
本示例介紹使用Text持钉、List等組件，添加點擊篱昔、動畫等事件 onClick animateTo 自定義視圖實現(xiàn)類似Tab效果每强。自定義視圖實現(xiàn)Tab效果的方案可以參考此詳細(xì)說明文檔。
聽歌識曲水波紋特效案例
本示例介紹水波紋的特效州刽。該場景多用于各種軟件的按鈕空执。聽歌識曲水波紋特效案例可以參考此詳細(xì)說明文檔。
城市選擇案例
本示例介紹城市選擇場景的使用：通過AlphabetIndexer實現(xiàn)首字母快速定位城市的索引條導(dǎo)航穗椅。詳細(xì)說明文檔
組件堆疊案例
本示例介紹運用Stack組件以構(gòu)建多層次堆疊的視覺效果辨绊。通過綁定Scroll組件的onScroll滾動事件回調(diào)函數(shù)，精準(zhǔn)捕獲滾動動作的發(fā)生匹表。當(dāng)滾動時门坷，實時地調(diào)節(jié)組件的透明度、高度等屬性袍镀，從而成功實現(xiàn)了嵌套滾動效果默蚌、透明度動態(tài)變化以及平滑的組件切換。詳細(xì)說明文檔
Grid和List內(nèi)拖拽交換子組件位置案例
本示例分別通過onItemDrop()和onDrop()回調(diào)苇羡，實現(xiàn)子組件在Grid和List中的子組件位置交換绸吸。詳細(xì)說明文檔
折疊屏音樂播放器案例
本示例介紹使用ArkUI中的容器組件FolderStack在折疊屏設(shè)備中實現(xiàn)音樂播放器場景。詳細(xì)說明文檔
發(fā)布圖片評論案例
本示例將通過發(fā)布圖片評論場景，介紹如何使用startAbilityForResult接口拉起相機拍照锦茁，并獲取相機返回的數(shù)據(jù)攘轩。詳細(xì)說明文檔
視頻全屏切換案例
本示例介紹了Video組件和@ohos.window接口實現(xiàn)媒體全屏的功能。該場景多用于首頁瀑布流媒體播放等蜻势。撑刺。詳細(xì)說明文檔
多層級輪播圖案例
本示例介紹使用ArkUIstack組件實現(xiàn)多層級瀑布流。該場景多用于購物握玛、資訊類應(yīng)用。詳細(xì)說明文檔
Worker子線程中解壓文件案例
本示例介紹在Worker子線程使用@ohos.zlib提供的zlib.decompressfile接口對沙箱目錄中的壓縮文件進(jìn)行解壓操作甫菠，解壓成功后將解壓路徑返回主線程挠铲，獲取解壓文件列表。詳細(xì)說明文檔
使用繪制組件實現(xiàn)自定義進(jìn)度動畫
本示例介紹使用繪制組件中的Circle組件以及Path組件實現(xiàn)實時進(jìn)度效果寂诱。該場景多用于手機電池電量拂苹、汽車油量、水位變化等動態(tài)變化中痰洒。詳細(xì)說明文檔
Lottie
Lottie是一個適用于OpenHarmony的動畫庫瓢棒，它可以解析Adobe After Effects軟件通過Bodymovin插件導(dǎo)出的json格式的動畫，并在移動設(shè)備上進(jìn)行本地渲染丘喻，可以在各種屏幕尺寸和分辨率上呈現(xiàn)脯宿，并且支持動畫的交互性，通過添加觸摸事件或其他用戶交互操作泉粉，使動畫更加生動和具有響應(yīng)性连霉。詳細(xì)說明文檔
圖片壓縮方案
本示例介紹如何通過packing和scale實現(xiàn)圖片壓縮到指定大小以內(nèi)。詳細(xì)說明文檔
投票動效實現(xiàn)案例
本示例介紹使用繪制組件中的Polygon組件配合使用顯式動畫以及borderRadius實現(xiàn)投票pk組件嗡靡。詳細(xì)說明文檔
Web獲取相機拍照圖片案例
本示例介紹如何在HTML頁面中拉起原生相機進(jìn)行拍照跺撼，并獲取返回的圖片。詳細(xì)說明文檔
SideBarContainer側(cè)邊欄淡入淡出動效實現(xiàn)案例
在pc或平板上讨彼，群聊側(cè)邊欄是一種較為常用的功能歉井，雖然HarmonyOS已經(jīng)具備了基本的動效，但是部分情況下開發(fā)者可能有定制側(cè)邊欄動效的需求哈误，本例主要介紹了如何基于顯式動畫實現(xiàn)側(cè)邊欄的淡入淡出動效哩至。詳細(xì)說明文檔
圖片拖拽AI摳圖案例
本示例介紹圖片AI摳圖案例的使用：通過Image.enableAnalyzer(true)實現(xiàn)長按圖片摳圖并拖拽/復(fù)制到其他應(yīng)用中。詳細(xì)說明文檔
swiper指示器導(dǎo)航點位于swiper下方
本示例介紹通過分割swiper區(qū)域黑滴，實現(xiàn)指示器導(dǎo)航點位于swiper下方的效果憨募。詳細(xì)說明文檔
大文件拷貝案例
文件拷貝是應(yīng)用開發(fā)中的一個常見場景，通常有兩種方式袁辈，一是直接讀寫文件的全部內(nèi)容菜谣，二是使用buffer多次讀寫涣旨。前者的優(yōu)點在于使用簡單，但是在大文件場景下溢谤，內(nèi)存占用較高络凿，影響應(yīng)用性能；后者的優(yōu)點在于內(nèi)存占用較小冈敛，但是編程稍顯復(fù)雜待笑。本例將展示如何使用buffer來將大文件的rawfile復(fù)制到應(yīng)用沙箱。詳細(xì)說明文檔
適配挖孔屏案例
本示例介紹使用屏幕屬性getDefaultDisplaySync抓谴、getCutoutInfo接口實現(xiàn)適配挖孔屏暮蹂。該場景多用于沉浸式場景下。詳細(xì)說明文檔
左右拖動切換圖片效果案例
本示例使用滑動手勢監(jiān)聽癌压，實時調(diào)整左右兩側(cè)內(nèi)容顯示區(qū)域大小和效果仰泻。通過綁定gesture事件中的PanGesture平移手勢，實時獲取拖動距離滩届。當(dāng)拖動時集侯，實時地調(diào)節(jié)左右兩個Image組件的寬度，從而成功實現(xiàn)左右拖動切換圖片效果的功能帜消。詳細(xì)說明文檔
元素超出List區(qū)域
本示例介紹在List組件內(nèi)實現(xiàn)子組件超出容器邊緣的布局樣式的實現(xiàn)方法棠枉。詳細(xì)說明文檔
多文件下載監(jiān)聽案例
本示例介紹如何使用request上傳下載模塊實現(xiàn)多文件下載監(jiān)聽，如監(jiān)聽每個文件下載任務(wù)的進(jìn)度泡挺，下載暫停辈讶，下載完成等文件下載情況。詳細(xì)說明文檔
搜索頁一鏡到底案例
本示例介紹使用bindContentCover粘衬、transition荞估、animateTo實現(xiàn)一鏡到底轉(zhuǎn)場動畫，常用于首頁搜索框點擊進(jìn)入搜索頁場景稚新。詳細(xì)說明文檔
修改
Navigation.Mode實現(xiàn)一多適配案例
本示例介紹如何使用Navigation的mode屬性實現(xiàn)一套代碼多設(shè)備適配勘伺。詳細(xì)說明文檔
跨文件樣式復(fù)用和組件復(fù)用
本示例主要介紹了跨文件樣式復(fù)用和組件復(fù)用的場景。在應(yīng)用開發(fā)中褂删，我們通常需要使用相同功能和樣式的ArkUI組件飞醉，例如購物頁面中會使用相同樣式的Button按鈕、Text顯示文字屯阀，我們常用的方法是抽取公共樣式或者封裝成一個自定義組件到公共組件庫中以減少冗余代碼缅帘。詳細(xì)說明文檔
NAPI封裝ArkTS接口案例
部分應(yīng)用的主要開發(fā)語言為C/C++，但是HarmonyOS的部分接口僅以ArkTS的形式暴露难衰，因此需要將ArkTS的接口封裝為Native接口钦无。本例以DocumentViewPicker的Select方法為例，提供了Napi封裝ArkTSAPI的通用方法盖袭。詳細(xì)說明文檔
手寫繪制及保存圖片
本示例使用drawing庫的Pen和Path結(jié)合NodeContainer組件實現(xiàn)手寫繪制功能失暂，并通過image庫的packToFile和packing接口將手寫板的繪制內(nèi)容保存為圖片彼宠。詳細(xì)說明文檔
swiper指示器導(dǎo)航點位于swiper下方
本示例介紹通過分割swiper區(qū)域，實現(xiàn)指示器導(dǎo)航點位于swiper下方的效果弟塞。詳細(xì)說明文檔
多模態(tài)頁面轉(zhuǎn)場動效實現(xiàn)案例
本示例介紹多模態(tài)頁面轉(zhuǎn)場動效實現(xiàn)：通過半模態(tài)轉(zhuǎn)場實現(xiàn)半模態(tài)登錄界面凭峡，與全屏模態(tài)和組件轉(zhuǎn)場結(jié)合實現(xiàn)多模態(tài)組合登錄場景，其中手機驗證碼登錄與賬號密碼登錄都為組件决记，通過TransitionEffect.move()實現(xiàn)組件間轉(zhuǎn)場達(dá)到近似頁面轉(zhuǎn)場的效果摧冀。詳細(xì)說明文檔
側(cè)滑返回事件攔截案例
本示例介紹使用NavDestination組件的onBackPressed回調(diào)對返回事件進(jìn)行攔截，提示用戶保存編輯內(nèi)容系宫，并使用preferences實例持久化保存內(nèi)容索昂。詳細(xì)說明文檔
ArkWeb同層渲染
該方案展示了ArkWeb同層渲染：將系統(tǒng)原生組件直接渲染到前端H5頁面上，原生組件不僅可以提供H5組件無法實現(xiàn)的一些功能笙瑟，還能提升用戶體驗的流暢度詳細(xì)說明文檔
Web組件預(yù)覽PDF文件實現(xiàn)案例
本案例通過Web組件實現(xiàn)預(yù)覽本地PDF文件和預(yù)覽網(wǎng)絡(luò)PDF文件楼镐，代碼為Tabs容器組件包含了兩個獨立的TabContent子組件，分別標(biāo)示為預(yù)覽本地PDF文件和預(yù)覽網(wǎng)絡(luò)PDF文件往枷。每個子組件內(nèi)部構(gòu)建一個Web組件。第一個Web組件利用resource協(xié)議關(guān)聯(lián)本地PDF文件路徑以預(yù)覽本地存儲的PDF資源凄杯；第二個Web組件則通過配置網(wǎng)絡(luò)鏈接屬性错洁，實現(xiàn)從互聯(lián)網(wǎng)加載并預(yù)覽遠(yuǎn)程PDF文件內(nèi)容。詳細(xì)說明文檔
公共能力層
公共功能層用于存放公共基礎(chǔ)能力戒突，集中了例如公共UI組件屯碴、數(shù)據(jù)管理、外部交互以及工具庫等的共享功能膊存。應(yīng)用與元服務(wù)都可以共享和調(diào)用這些公共能力导而。
公共能力層為上層的基礎(chǔ)特性層和產(chǎn)品定制層提供穩(wěn)定可靠的功能支持，確保整個應(yīng)用/元服務(wù)的穩(wěn)定性和可維護(hù)性隔崎。
應(yīng)用通用開發(fā)范例App公共能力層包含以下模塊：日志打印今艺、功能介紹布局
配套平臺
- 適用最新HarmonyOS Next版本；
- 適用Stage模型爵卒，SDK版本為API11虚缎；
- 適用最新DevEco Studio版本。
