一、IDE環境的搭建
Windows環境
運行環境要求
為保證DevEco Studio正常運行，建議電腦配置滿足如下要求：
操作系統：Windows10 64位、Windows11 64位
內存：16GB及以上
硬盤：100GB及以上
分辨率：1280*800像素及以上
安裝DevEco Studio
1、下載完成后，雙擊下載的“deveco-studio-xxxx.exe”，進入DevEco Studio安裝向導，點擊Next安裝
2、在如下界面選擇安裝路徑，默認安裝于C:\Program Files路徑下，也可以單擊瀏覽（B）...指定其他安裝路徑，然后單擊Next。
3、在如下安裝選項界面勾選DevEco Studio后（也可以全部勾選），單擊Next，直至安裝完成。
4、安裝完成后，單擊Finish完成安裝。
說明
- DevEco Studio提供開箱即用的開發體驗，將HarmonyOS SDK、Node.js、Hvigor、OHPM、模擬器平臺等進行合一打包，簡化DevEco Studio安裝配置流程。
- HarmonyOS SDK已嵌入DevEco Studio中，無需額外下載配置。HarmonyOS SDK可以在DevEco Studio安裝位置下DevEco Studio\sdk目錄中查看。如需進行OpenHarmony應用開發，可通過Settings > OpenHarmony SDK頁簽下載OpenHarmony SDK。
macOS環境
運行環境要求
為保證DevEco Studio正常運行，建議電腦配置滿足如下要求：
- 操作系統：macOS(X86) 11/12/13/14 macOS(ARM) 12/13/14
- 內存：8GB及以上
- 硬盤：100GB及以上
- 分辨率：1280*800像素及以上
安裝DevEco Studio
- 在安裝界面中，將“DevEco-Studio.app”拖拽到“Applications”中，等待安裝完成。
- 安裝完成后，接下來請根據配置代理，檢查和配置開發環境。
說明
- DevEco Studio提供開箱即用的開發體驗，將HarmonyOS SDK、Node.js、Hvigor、OHPM、模擬器平臺等進行合一打包，簡化DevEco Studio安裝配置流程。
- HarmonyOS SDK已嵌入DevEco Studio中，無需額外下載配置。HarmonyOS SDK可以在DevEco Studio安裝位置下DevEco Studio\sdk目錄中查看。如需進行OpenHarmony應用開發，可通過DevEco Studio > Preferences?>?OpenHarmony SDK頁簽下載OpenHarmony SDK。
診斷開發環境
為了您開發應用/元服務的良好體驗，DevEco Studio提供了開發環境診斷的功能，幫助您識別開發環境是否完備。您可以在歡迎頁面單擊Diagnose進行診斷。如果您已經打開了工程開發界面，也可以在菜單欄單擊Help > Diagnostic Tools > Diagnose Development Environment進行診斷。
DevEco Studio開發環境診斷項包括電腦的配置、網絡的連通情況、依賴的工具是否安裝等。如果檢測結果為未通過，請根據檢查項的描述和修復建議進行處理。
啟用中文化插件
- 單擊File > Settings（macOS為DevEco Studio > Preferences?）?> Plugins，選擇Installed頁簽，在搜索框輸入“Chinese”，搜索結果里將出現Chinese(Simplified)，在右側單擊Enable，單擊OK。
- 在彈窗中單擊Restart，重啟DevEco Studio后即可生效。
5、導入配置：啟動DevEco Studio后選擇Do not import settings（第一次打開），點擊OK
創建工程
1、在歡迎界面單擊Create Project
2、在工程創建向導中
選擇Application-->Empty Ability-->Next
3、工程配置
Project name：工程名，只能包含1-200個字符，以字母開頭、并且只能包含字母、數字和下劃線Bundle name：捆綁包名稱：com.example.myapplication
Save location：保存位置：D:\projects\HUAWEI\MyApplication
Compatible：兼容SDK：5.0.5（17）
Module name：模塊名稱：entry
Device type：設備類型：手機、平板、2合1、車載
配置完成點擊完成
4、自動簽名
在頁面右上角點擊
進入Project Structure
使用華為賬號進行登錄，成功后材料會下載到本地
二、構建第一個ArkTS應用
說明
為確保運行效果，本文以使用DevEco Studio 5.0.0 Release版本為例。
1、創建ArkTS工程
- 若首次打開DevEco Studio，請點擊Create Project創建工程。如果已經打開了一個工程，請在菜單欄選擇File?>?New?>?Create Project來創建一個新工程。
- 選擇Application應用開發（本文以應用開發為例，Atomic Service對應為元服務開發），選擇模板Empty Ability，點擊Next進行下一步配置。
若開發者需要進行Native相關工程的開發，請選擇Native C++模板，更多模板的使用和說明請見工程模板介紹。
- 進入配置工程界面，Compatible SDK表示兼容的最低API Version，此處以選擇5.0.0(12)為例，其他參數保持默認設置即可。
- 點擊Finish，工具會自動生成示例代碼和相關資源，等待工程創建完成。
2、ArkTS工程目錄結構（Stage模型）
- AppScope > app.json5：應用的全局配置信息，詳見app.json5配置文件。
- entry：HarmonyOS工程模塊，編譯構建生成一個HAP包。
- src > main > ets：用于存放ArkTS源碼。
- src > main > ets > entryability：應用/服務的入口。
- src > main > ets > entrybackupability：應用提供擴展的備份恢復能力。
- src > main > ets > pages：應用/服務包含的頁面。
- src > main > resources：用于存放應用/服務所用到的資源文件，如圖形、多媒體、字符串、布局文件等。關于資源文件，詳見資源分類與訪問。
- src > main > module.json5：模塊配置文件。主要包含HAP包的配置信息、應用/服務在具體設備上的配置信息以及應用/服務的全局配置信息。具體的配置文件說明，詳見module.json5配置文件。
- build-profile.json5：當前的模塊信息 、編譯信息配置項，包括buildOption、targets配置等。
- hvigorfile.ts：模塊級編譯構建任務腳本。
- obfuscation-rules.txt：混淆規則文件。混淆開啟后，在使用Release模式進行編譯時，會對代碼進行編譯、混淆及壓縮處理，保護代碼資產。詳見開啟代碼混淆。
- oh-package.json5：用來描述包名、版本、入口文件（類型聲明文件）和依賴項等信息。
- oh_modules：用于存放三方庫依賴信息。
-
build-profile.json5：工程級配置信息，包括簽名signingConfigs、產品配置products等。其中products中可配置當前運行環境，默認為HarmonyOS。
-
hvigorfile.ts：工程級編譯構建任務腳本。
- oh-package.json5：主要用來描述全局配置，如：依賴覆蓋（overrides）、依賴關系重寫（overrideDependencyMap）和參數化配置（parameterFile）等。
3、構建第一個頁面
- 使用文本組件。
工程同步完成后，在Project窗口，點擊entry > src > main > ets > pages，打開Index.ets文件，進行頁面的編寫。
針對本文中使用文本/按鈕來實現頁面跳轉/返回的應用場景，頁面均使用Row和Column組件來組建布局。對于更多復雜元素對齊的場景，可選擇使用RelativeContainer組件進行布局。
Index.ets文件的示例如下：
// Index.ets @Entry @Component struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')} } - 添加按鈕。
在默認頁面基礎上，我們添加一個Button組件，作為按鈕響應用戶點擊，從而實現跳轉到另一個頁面。Index.ets文件的示例如下：
// Index.ets @Entry @Component struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按鈕，以響應用戶點擊Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')} } - 在編輯窗口右上角的側邊工具欄，點擊Previewer，打開預覽器。第一個頁面效果如下圖所示：
4、構建第二個頁面
- 創建第二個頁面。
-
新建第二個頁面文件。在Project窗口，打開entry > src > main > ets，右鍵點擊pages文件夾，選擇New > ArkTS File，命名為Second，點擊回車鍵。可以看到文件目錄結構如下：
說明
開發者也可以在右鍵點擊pages文件夾時，選擇New > Page?> Empty Page，命名為Second，點擊Finish完成第二個頁面的創建。使用此種方式則無需再進行下文中第二個頁面路由的手動配置。
-
配置第二個頁面的路由。在Project窗口，打開entry > src > main > resources > base > profile，在main_pages.json文件中的"src"下配置第二個頁面的路由"pages/Second"。示例如下：
{"src": ["pages/Index","pages/Second"] }
-
- 添加文本及按鈕。
參照第一個頁面，在第二個頁面添加Text組件、Button組件等，并設置其樣式。Second.ets文件的示例如下：
// Second.ets @Entry @Component struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')}.width('100%')}.height('100%')} }
5、實現頁面間的跳轉
頁面間的導航可以通過頁面路由router來實現。頁面路由router根據頁面url找到目標頁面，從而實現跳轉。使用頁面路由請導入router模塊。
如果需要實現更好的轉場動效，推薦使用Navigation。
- 第一個頁面跳轉到第二個頁面。
在第一個頁面中，跳轉按鈕綁定onClick事件，點擊按鈕時跳轉到第二頁。Index.ets文件的示例如下：
// Index.ets // 導入頁面路由模塊 import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit';@Entry @Component struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按鈕，以響應用戶點擊Button() {Text('Next').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 跳轉按鈕綁定onClick事件，點擊時跳轉到第二頁.onClick(() => {console.info(`Succeeded in clicking the 'Next' button.`)// 跳轉到第二頁router.pushUrl({ url: 'pages/Second' }).then(() => {console.info('Succeeded in jumping to the second page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)})})}.width('100%')}.height('100%')} } - 第二個頁面返回到第一個頁面。
在第二個頁面中，返回按鈕綁定onClick事件，點擊按鈕時返回到第一頁。Second.ets文件的示例如下：
// Second.ets // 導入頁面路由模塊 import { router } from '@kit.ArkUI'; import { BusinessError } from '@kit.BasicServicesKit';@Entry @Component struct Second {@State message: string = 'Hi there'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)Button() {Text('Back').fontSize(30).fontWeight(FontWeight.Bold)}.type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('5%')// 返回按鈕綁定onClick事件，點擊按鈕時返回到第一頁.onClick(() => {console.info(`Succeeded in clicking the 'Back' button.`)try {// 返回第一頁router.back()console.info('Succeeded in returning to the first page.')} catch (err) {let code = (err as BusinessError).code; let message = (err as BusinessError).message; console.error(`Failed to return to the first page. Code is ${code}, message is ${message}`)}})}.width('100%')}.height('100%')} } - 打開Index.ets文件，點擊預覽器中的
按鈕進行刷新。效果如下圖所示：
6、使用真機運行應用
- 將搭載HarmonyOS系統的真機與電腦連接。具體指導及要求，可查看使用本地真機運行應用/服務。
- 點擊File?>?Project Structure...?>?Project?>?SigningConfigs界面勾選Support HarmonyOS和Automatically generate signature，點擊界面提示的Sign In，使用華為賬號登錄。等待自動簽名完成后，點擊OK即可。如下圖所示：
- 在編輯窗口右上角的工具欄，點擊
按鈕運行。效果如下圖所示：
三、編譯器的使用
DevEco Studio支持使用多種語言進行應用/元服務的開發，包括ArkTS、JS和C/C++。在編寫應用/元服務階段，可以通過掌握代碼編寫的各種常用技巧，來提升編碼效率。
代碼高亮
支持對代碼關鍵字、運算符、字符串、類、標識符、注釋等進行高亮顯示，您可以打開File >?Settings（macOS為DevEco Studio > Preferences）面板，在Editor > Color Scheme自定義各字段的高亮顯示顏色。默認情況下，您可以在Language Defaults中設置源代碼中的各種高亮顯示方案，該設置將對所有語言生效；如果您需要針對具體語言的源碼高亮顯示方案進行定制，可以在左側邊欄選擇對應的語言，然后取消“Inherit values from”選項后設置對應的顏色即可。
代碼跳轉
在編輯器中，可以按住Ctrl鍵（macOS為Command鍵），鼠標單擊代碼中引用的類、方法、參數、變量等名稱，自動跳轉到定義處。若單擊定義處的類、變量等名稱，當僅有一處引用時，可直接跳轉到引用位置；若有多處引用，在彈窗中可以選擇想要查看的引用位置。
跨語言跳轉
DevEco Studio支持在聲明或引用了Native接口的文件中（如d.ts）跨語言跳轉其對應的C/C++函數，從而提升混合語言開發時的開發效率。您可以選中接口名稱單擊右鍵，在彈出的菜單中選擇Go To > Implementation(s)（或使用快捷鍵Ctrl+Alt+B，macOS為Command+Option+B）實現跨語言跳轉。
代碼格式化
代碼格式化功能可以幫助您快速的調整和規范代碼格式，提升代碼的美觀度和可讀性。默認情況下，DevEco Studio已預置了代碼格式化的規范，您也可以個性化的設置各個文件的格式化規范，設置方式如下：在File > Settings > Editor > Code Style（macOS為DevEco Studio > Preferences >?Editor?>?Code Style）下，選擇需要定制的文件類型，如ArkTS，然后自定義格式化規范即可。
在使用代碼格式化功能時，您可以使用快捷鍵Ctrl + Alt + L（macOS為Option+Command +L） 可以快速對選定范圍的代碼進行格式化。
如果在進行格式化時，對于部分代碼片段不需要進行自動的格式化處理，可以通過如下方式進行設置：
- 在File > Settings >Editor > Code Style（macOS為DevEco Studio > Preferences >?Editor?>?Code Style），單擊“Formatter”，勾選“Turn formatter on/off with markers in code comments”。
- 在不需要進行格式化操作的代碼塊前增加“//@formatter:off”，并在該代碼塊的最后增加“//@formatter:on”，即表示對該范圍的代碼塊不需要進行格式化操作。
若工程已配置code-linter.json5文件，選中code-linter.json5文件右鍵選擇Apply CodeLinter Style Rules，代碼格式化規則將與已配置的code-linter.json5文件中相關規則保持一致。code-linter.json5文件配置請參考配置代碼檢查規則。
代碼折疊
支持對代碼塊的快速折疊和展開，既可以單擊編輯器左側邊欄的折疊和展開按鈕對代碼塊進行折疊和展開操作，還可以對選中的代碼塊單擊鼠標右鍵選擇折疊方式，包括折疊、遞歸折疊、全部折疊等操作。
代碼快速注釋
支持對選擇的代碼塊進行快速注釋，使用快捷鍵Ctrl+/（macOS為Command+/）進行快速注釋。對于已注釋的代碼塊，再次使用快捷鍵Ctrl+/（macOS為Command+/）取消注釋。
代碼結構樹
使用快捷鍵Alt + 7 / Ctrl + F12（macOS為Command+7）打開代碼結構樹，快速查看文件代碼的結構樹，包括全局變量和函數，類成員變量和方法等，并可以跳轉到對應代碼行。
代碼引用查找
提供Find Usages代碼引用查找功能，幫助開發者快速查看某個對象(變量、函數或者類等)被引用的地方，用于后續的代碼重構，可以極大的提升開發者的開發效率。
使用方法：在要查找的對象上，單擊鼠標右鍵 > Find Usages或使用快捷鍵Alt +F7（macOS為Option +?F7）。可點擊
圖標查看變量賦值位置，點擊
圖標查看變量引用情況。
函數注釋生成
DevEco Studio支持在函數定義處，快速生成對應的注釋。在函數定義的代碼塊前，輸入“/**”+回車鍵，快速生成注釋信息。說明C++文件同時支持使用“//!”+回車鍵快速生成注釋。
代碼查找
通過對符號、類或文件的即時導航來查找代碼。檢查調用或類型層次結構，輕松地搜索工程里的所有內容。通過連續點擊兩次Shift快捷鍵，打開代碼查找界面，在搜索框中輸入需要查找內容，下方窗口實時展示搜索結果。雙擊查找的結果可以快速打開所在文件的位置。
快速查閱API接口及組件參考文檔
在編輯器中調用ArkTS/JS API或組件時，支持在編輯器中快速、精準調取出對應的參考文檔。
可在編輯器中，鼠標懸停在需要查閱的接口或組件，彈窗將顯示當前接口/組件在不同API版本下的參數等信息，單擊彈窗右下角Show in API Reference，可以快速查閱更詳細的API文檔。
說明DevEco Studio集成了離線版API參考類文檔，最新版本請參考官網HarmonyOS API參考。
在彈窗中可以查看：
- 使用的API是否涉及權限申請或僅支持在測試框架下使用。
- 使用的接口狀態。deprecated標簽表示即將廢棄的API接口，可使用useinstead標記的API進行替代，請開發時關注。
Optimize Imports功能
使用編輯器提供的Optimize Imports，可以快速清除未使用的import，并根據設置的規則對import進行合并或排序。選擇文件或目錄，使用快捷鍵Ctrl+Alt+O（macOS為Control+Option+O），或單擊菜單欄Code > Optimize Imports。
如需修改優化配置，進入File > Settings... > Editor > Code Style，選擇開發語言（當前以ArkTS為例），在Imports標簽頁中，可選擇在優化時是否需合并來自同一模塊的import，是否需要對同一條import語句導入的元素進行排序，或對多條import語句按模塊排序。
父/子類快速跳轉
編輯器支持快速跳轉至當前接口、類、方法、屬性的子類/父類。點擊代碼編輯區域左側的Gutter Icons（裝訂線圖標）可以跳轉到對應的父/子接口或類。如有多個繼承關系，在彈窗的文件列表中選擇需要查看的接口/類即可。
Implemented：支持跳轉到對應的實現類或子接口及其對應的屬性/方法。
Implementing：支持跳轉到對應的父接口或父接口的屬性/方法。
Overridden：支持跳轉到對應的子類或子類的屬性/方法。
Overriding：支持跳轉到對應的父類或父類的屬性/方法。
本功能默認開啟，可以通過菜單欄進入File > Settings > Editor > General > Gutter Icons，通過勾選或取消勾選Implemented、Implementing、Overridden、Overriding四項可以開啟或關閉該功能。
查看接口/類的層次結構
編輯器支持查看當前接口/類父類或子類的層次結構。選中或將光標放置于類/接口名稱處，使用快捷鍵Ctrl+H，或在菜單欄Navigate頁簽下選擇Type Hierarchy，在彈出的Hierarchy窗口中查看接口/類的繼承關系結構。
Hierarchy窗口按鈕功能：
| 圖標 | 功能 |
|---|---|
|
| 顯示所選類的父類和子類。 該功能不支持查看接口的繼承關系。 |
|
| 顯示當前類/接口的父類。 |
|
| 顯示當前類/接口的子類。 |
|
| 按字母順序對繼承關系結構樹中的所有同級元素進行排序。 |
|
| 更新顯示所有的類/接口的繼承關系結構。 |
|
| 默認雙擊結構樹中類/接口名稱時，編輯窗口將跳轉至所選類/接口所在的代碼位置。勾選該選項后，單擊結構樹中類/接口名稱，即可跳轉訪問。 |
|
| 展開/折疊繼承關系結構。 |
|
| 鎖定當前Hierarchy窗口顯示于編輯窗口上。 |
|
| 將類/接口的繼承關系結構導出到文本文件中。 |
|
| 關閉工具窗口。 |
Extract Method
選中需要重構的代碼使用Extract Method方法重構，Refactor>Extract Method
視頻轉gif網站：Video to animated GIF converter
代碼生成補全
代碼自動補全
提供代碼的自動補全能力，編輯器工具會分析上下文，并根據輸入的內容，提示可補全的類、方法、字段和關鍵字的名稱等，支持模糊匹配。
自動補齊功能默認按最短路徑進行排序，如僅需按照最近使用過的類、方法、字段和關鍵字等名稱提供補全內容排序，可以在File > Settings?（MacOS為DevEco Studio > Preferences）> Editor > General > Code Completion?中勾選“Sort suggestions by recently used”。
說明
若已勾選代碼補齊按最近使用排序但未生效，請檢查Code Completion頁面，確保“Sort suggestions alphabetically”已取消勾選。
快速覆寫父類
DevEco Studio提供Override Methods，輔助開發者根據父類模板快速生成子類方法，提升開發效率。將光標放于子類定義位置，使用快捷鍵Ctrl+O，或右鍵單擊Generate...，選擇Override Methods，指定需要覆寫的對象（方法、變量等），點擊OK將自動生成該對象的覆寫代碼。
快速生成構造器
編輯器支持為類快速生成一個對應的構造函數。
在類中使用快捷鍵Alt+Insert，或單擊鼠標右鍵選擇Generate...，在彈窗中選擇Constructor，選擇一個或多個需要生成構造函數的參數，點擊OK。若選擇Select None，則生成不帶參數的構造器。
快速生成get/set方法
編輯器支持為類成員變量或對象屬性快速生成get和set方法。
將光標放置在當前類中，單擊右鍵選擇Generate...>Getter and Setter，或者使用快捷鍵Alt+Insert，在菜單中選擇Getter and Setter，完成方法快速生成。
快速生成聲明信息到Index文件
編輯器支持將HSP和HAR模塊中變量、方法、接口、類等需要對外暴露的信息，通過Generate...>Declarations功能，批量在Index.ets文件中進行聲明，便于其他模塊調用。
在HSP或HAR模塊內的文件編輯界面，單擊右鍵選擇Generate...>Declarations，或者使用快捷鍵Alt+Insert，在菜單中選擇Declarations，按住快捷鍵Ctrl并選擇需要聲明的變量名、方法名、接口名、類名等，即可在模塊的Index.ets文件中批量生成相應的聲明信息。
代碼實時檢查及快速修復
實時檢查
編輯器會實時的進行代碼分析，如果輸入的語法不符合編碼規范，或者出現語義語法錯誤，將在代碼中突出顯示錯誤或警告，將鼠標放置在錯誤代碼處，會提示詳細的錯誤信息。
從DevEco Studio 4.0 Release版本開始，當compatibleSdkVersion≥10時，編輯器代碼實時檢查支持ArkTS性能語法規范檢查。
說明
當前compileSDKVersion≥10且arkTSVersion≥1.1(默認)時ArkTS嚴格類型檢查支持實時檢查。
代碼快速修復
DevEco Studio支持代碼快速修復能力，輔助開發者快速修復ArkTS或C++代碼問題。
查看告警信息：使用雙擊Shift快捷鍵打開文件查詢框，輸入problems打開問題工具面板；雙擊對應告警信息，可以查看告警的具體位置及原因。
快速修復：將光標放在錯誤告警的位置，可在彈出的懸浮窗中查看問題描述和對應修復方式；單擊More actions可查看更多修復方法。或是在頁面出現燈泡圖標時，可點擊圖標并根據相應建議，實現代碼快速修復。
C++快速修復使用演示
下面通過示例展示C++代碼中快速修復功能的使用方法。
填充switch語句
編輯器支持快速修復方式，對C++代碼自動補齊switch條件表達式缺失的case條件，提升編碼效率。
光標懸浮在switch表達式的條件變量處，點擊燈泡圖標，在下拉菜單中選擇Create missing switch cases，完成缺失的case條件補充。
使用auto替換類型
編輯器中可以用 auto 替換 iterator，new expression，cast expression的聲明類型。光標懸浮在類型名稱處，點擊燈泡圖標，在下拉菜單中選擇Replace the type with 'auto'完成替換。
用？：三元操作符替換if-else
編輯器中支持將if-else語句替換為？：三元操作符。光標放在if表達式的條件處，左側出現黃色燈泡圖標，點擊燈泡圖標，在下拉菜單中選擇Replace 'if else' with '?:'完成替換。
從使用處生成構造函數
如使用了未定義的構造函數，可通過quickfix方式快速生成相應的構造函數定義。點擊構造函數名稱，左側出現紅色燈泡后，點擊燈泡圖標選擇Create new constructor 'xxx'生成構造函數。
將變量拆分為聲明和賦值
光標點擊需要拆分的變量，左側出現黃色燈泡后，點擊燈泡圖標選擇Split into declaration and assignment，將變量的聲明賦值語句拆分成聲明語句和賦值語句。
代碼code Linter檢查
Code Linter代碼檢查
Code Linter針對ArkTS/TS代碼進行最佳實踐/編程規范方面的檢查。檢查規則支持配置，配置方式請參考配置代碼檢查規則。
開發者可根據掃描結果中告警提示手工修復代碼缺陷，或者執行一鍵式自動修復，在代碼開發階段，確保代碼質量。
檢查方法：
在已打開的代碼編輯器窗口單擊右鍵點擊Code Linter，或在工程管理窗口中鼠標選中單個或多個工程文件/目錄，右鍵選擇Code Linter?> Full Linter執行代碼全量檢查。
如只需對Git工程中增量文件（包含新增/修改/重命名）進行檢查，可在commit界面右下角點擊齒輪圖標，選擇Incremental Linter執行增量檢查。
說明
- 若未配置代碼檢查規則文件，直接執行Code Linter，將按照默認的編程規范規則對.ets文件進行檢查。
- Code Linter不對如下文件及目錄進行檢查：
- src/ohosTest文件夾
- src/test文件夾
- node_modules文件夾
- oh_modules文件夾
- build文件夾
- .preview文件夾
- hvigorfile.ts文件
- hvigorfile.js文件
配置代碼檢查規則
在工程根目錄下創建code-linter.json5配置文件，可對于代碼檢查的范圍及對應生效的檢查規則進行配置，其中files和ignore配置項共同確定了代碼檢查范圍，ruleSet和rules配置項共同確定了生效的規則范圍。具體配置項功能如下：
files：配置待檢查的文件名單，如未指定目錄，將檢查當前被選中的文件或文件夾中所有的.ets文件。
ignore：配置無需檢查的文件目錄，其指定的目錄或文件需使用相對路徑格式，相對于code-linter.json5所在工程根目錄，例如：build/**/*。
ruleSet：配置檢查使用的規則集，規則集支持一次導入多條規則。規則詳情請參見Code Linter代碼檢查規則。目前支持的規則集包括：
- 通用規則@typescript-eslint
- 一次開發多端部署規則@cross-device-app-dev
- ArkTS代碼風格規則@hw-stylistic
- 安全規則@security
- 性能規則@performance
- 預覽規則@previewer
說明
- 以上規則集均分為all和recommended兩種規則集。all規則集是規則全集，包含所有規則；recommended規則集是推薦使用的規則集合。all規則集包含recommended規則集。
- 不在工程根目錄新建code-linter.json5文件的情況下，Code Linter默認會檢查@performance/recommended和@typescript-eslint/recommended規則集包含的規則。
rules：可以基于ruleSet配置的規則集，新增額外規則項，或修改ruleSet中規則默認配置，例如：將規則集中某條規則告警級別由warn改為error。
overrides：針對工程根目錄下部分特定目錄或文件，可配置定制化檢查的規則。
{"files": //用于表示配置適用的文件范圍的 glob 模式數組。在沒有指定的情況下，應用默認配置["**/*.js", //字符串類型"**/*.ts"],"ignore": //一個表示配置對象不應適用的文件的 glob 模式數組。如果沒有指定，配置對象將適用于所有由 files 匹配的文件["build/**/*", //字符串類型"node_modules/**/*"],"ruleSet": //設置檢查待應用的規則集["plugin:@typescript-eslint/recommended" //快捷批量引入的規則集, 枚舉類型：plugin:@typescript-eslint/all, plugin:@typescript-eslint/recommended, plugin:@cross-device-app-dev/all, plugin:@cross-device-app-dev/recommended等],"rules": //可以對ruleSet配置的規則集中特定的某些規則進行修改、去使能, 或者新增規則集以外的規則；ruleSet和rules共同確定了代碼檢查所應用的規則{"@typescript-eslint/no-explicit-any": // ruleId后面跟數組時, 第一個元素為告警級別, 后面的對象元素為規則特定開關配置["error", //告警級別: 枚舉類型, 支持配置為suggestion, error, warn, off{"ignoreRestArgs": true //規則特定的開關配置, 為可選項, 不同規則其下層的配置項不同}],"@typescript-eslint/explicit-function-return-type": 2, // ruleId后面跟單獨一個數字時, 表示僅設置告警級別, 枚舉值為: 3(suggestion), 2(error), 1(warn), 0(off)"@typescript-eslint/no-unsafe-return": "warn" // ruleId后面跟單獨一個字符串時, 表示僅設置告警級別, 枚舉值為: suggestion, error, warn, off},"overrides": //針對特定的目錄或文件采用定制化的規則配置[{"files": //指定需要定制化配置規則的文件或目錄["entry/**/*.ts" //字符串類型],"excluded":["entry/**/*.test.js" //指定需要排除的目錄或文件, 被排除的目錄或文件不會按照定制化的規則配置被檢查; 字符串類型],"rules": //支持對overrides外公共配置的規則進行修改、去使能, 或者新增公共配置以外的規則; 該配置將覆蓋公共配置{"@typescript-eslint/explicit-function-return-type": // ruleId: 枚舉類型["warn", //告警級別: 枚舉類型, 支持配置為error, warn, off; 覆蓋公共配置, explicit-function-return-type告警級別為warn{allowExpressions: true //規則特定的開關配置, 為可選項, 不同規則其下層的配置項不同}],"@typescript-eslint/no-unsafe-return": "off" // 覆蓋公共配置, 不檢查no-unsafe-return規則}}]
}查看/處理代碼檢查結果
掃描完成后，在底部工具面板查看檢查結果。勾選Defects中不同告警等級，可分別查看對應告警級別的信息。雙擊某條告警結果，可以跳轉到對應代碼缺陷位置；選中告警結果時，可以在右側Defect Description窗口查看告警對應的規則詳細說明，其中包含正向和反向示例，并根據其中的建議修改代碼；搜索規則時，可設定是否全詞匹配和大小寫敏感。
單擊
圖標，查看可修復的代碼規則，點擊
代碼修復圖標，可以一鍵式批量修復告警，并刷新檢查結果。
屏蔽告警信息：
- 在某些特殊場景下，若掃描結果中出現誤報，點擊單條告警結果后的
Ignore圖標，可以忽略對告警所在行的code linter檢查；或勾選文件名稱或多條待屏蔽的告警，點擊左側工具面板Ingore圖標批量執行操作；
- 在文件頂部添加注釋/* eslint-disable */可以屏蔽整個文件執行code linter檢查，在eslint-disable 后加入一個或多個以逗號分隔的規則Id，可以屏蔽具體檢查規則；
- 在需要忽略檢查的代碼塊前后分別添加/* eslint-disable */和/* eslint-enable */添加注釋信息，再執行Code Linter，將不再顯示該代碼塊掃描結果；在待屏蔽的代碼行前一行添加/* eslint-disable-next-line */，也可屏蔽對該代碼行的codelinter檢查。
如需恢復忽略的報錯信息，可以直接刪除該行上方的注釋，重新執行Code Linter檢查。
導出檢查結果：點擊工具面板左側
導出按鈕，即可導出檢查結果到excel文件，包含告警所在行，告警明細，告警級別等信息。
實踐說明
以@typescript-eslint/no-restricted-syntax（使用某類語法時，codelinter告警）、@typescript-eslint/naming-convention（命名風格校驗）和@hw-stylistic/file-naming-convention（檢查代碼文件的命名風格）三個規則為例，介紹codelinter配置文件的使用方法。
示例1：調用類Foo下bar方法時，Code Linter告警
在配置文件中定義規則
在ArkTS工程中，pages/Index.ets文件下增加以下用例：
class Foo {static bar() {}
}Foo.bar();在工程根目錄下新建code-linter.json5文件（文件名不可修改），新增以下配置：
{"rules": {"@typescript-eslint/no-restricted-syntax": [// 告警級別: 枚舉類型, 支持配置為error, warn, off"error",{// selector屬性必選，配置要禁用的語法// 可通過特定DSL篩選待限制的語句，CallExpression表示方法調用表達式，后面的中括號里面是篩選條件（根據語法樹Node節點來確定）// 其中callee.object.name根據指定的名稱篩選調用方法的對象（class，namespace或module），以上示例中為"Foo"// callee.property.name則根據指定的名稱篩選被調用的方法，以上示例中為"bar""selector": "CallExpression[callee.object.name='Foo'][callee.property.name='bar']",// message屬性可選，配置要展示的報錯信息"message": "Foo.bar() is not allowed"}]},
}說明
如需在code-linter.json5文件中配置其他字段，請參見配置代碼檢查規則。
執行代碼檢查
對pages/Index.ets文件執行代碼檢查，檢查結果如下：
示例2：對類名Foo的命名風格校驗
在配置文件中定義規則
在ArkTS工程中，pages/Index.ets文件下增加以下用例：
class foo { //此處構造一個命名風格錯誤的示例，foo為錯誤使用類名，正確類名應為Foobar() {}
}在工程根目錄下新建code-linter.json5文件，新增以下配置：
{"rules": {"@typescript-eslint/naming-convention": ["error",{// selector屬性必選，配置要檢查的語法，這里配置的class表示檢查自定義組件名"selector": "class",// format屬性必選，配置期望的命名風格，支持枚舉值，這里配置的PascalCase表示大駝峰風格"format": ["PascalCase"],// custom屬性可選，配置用戶自定義的命名風格"custom": {// regex屬性必選，配置具體的正則"regex": "^[a-zA-Z]+$",// match屬性必選，配置為true表示正則未命中時報錯；配置為false表示正則命中時報錯"match": true}}]},
}
| 字段名稱 | 參數說明 | 是否必選 | 類型 | 支持配置的參數 |
|---|---|---|---|---|
| selector | 配置要檢查的語法 | 是 | 字符串、字符串數組 |
|
| format | 配置期望的命名風格 | 是 | 字符串數組 |
|
| custom | 配置用戶自定義的命名風格 | 否 | 對象 |
|
| leadingUnderscore/trailingUnderscore | 配置是否允許以下劃線開頭/以下劃線結尾的命名風格 | 否 | 字符串 |
|
| prefix/suffix | 配置固定前綴/后綴的命名風格。如果前綴/后綴未匹配則報錯 | 否 | 字符串數組 | 用戶自定義前綴/后綴 |
| filter | 過濾特定的命名風格，檢查或者不檢查正則命中的命名 | 否 | 對象 | 配置格式與custom相似 match：設置為true表示只檢查正則命中的名字，設置為false表示不檢查正則命中的名字 regex：設置過濾的正則 說明 支持直接配置一個字符串，這個字符串配置的是regex，此時match相當于配置的是true。 |
| modifiers | 匹配修飾符，只有包含特定修飾符的命名才會檢查 | 否 | 字符串數組 |
|
| types | 匹配類型，只有特定類型的名字才會檢查 | 否 | 字符串數組 |
|
說明
以上配置的參數有校驗優先級：filter > types > modifiers > validate leading underscore > validate trailing underscore > validate prefix > validate suffix > validate custom > validate format。
執行代碼檢查
對pages/Index.ets文件執行代碼檢查，檢查結果如下：
示例3：檢查代碼文件的命名風格
在配置文件中定義規則
在ArkTS工程中，pages目錄下新建test.ets文件；
在工程根目錄下新建code-linter.json5文件，新增以下配置：
{"rules": {"@hw-stylistic/file-naming-convention": [// 告警級別：枚舉類型，支持配置為error，warn，off"error",{// selector屬性可選，支持配置為code或者resources// code表示檢查代碼文件的命名風格// resources表示檢查資源文件的命名風格"selector": "code"}]},
}說明
如果selector屬性不配置，默認檢查代碼文件和資源文件的命名風格。
執行代碼檢查
對pages/test.ets文件執行代碼檢查，檢查結果如下：
四、預覽器的使用
查看ArkTS/JS預覽效果
預覽器支持ArkTS/JS應用/元服務“實時預覽”和“動態預覽”。
說明
- 預覽支持Phone、Tablet、2in1、Car設備的ArkTS工程，支持Litewearable設備的JS工程。
- 預覽器功能依賴于電腦顯卡的OpenGL版本，OpenGL版本要求為3.2及以上。
- 預覽時將不會運行Ability生命周期。
- 預覽不支持引用HSP。引用了HSP的模塊不支持預覽，請直接在HSP內預覽或模擬HSP。
- 預覽場景下，不支持通過相對路徑及絕對路徑的方式訪問resources目錄下的文件。
- 預覽不支持組件拖拽。
- 部分API不支持預覽，如Ability、App、MultiMedia等模塊。
- Richtext、Web、Video、XComponent組件不支持預覽。
- 不支持調用C++庫的預覽。
- har在被應用/元服務使用時真機效果有區別，真機上實際效果應用不顯示menubar，元服務顯示menubar，但預覽器都以不顯示menubar為準。若開發har模塊時，請注意被元服務使用時預覽器效果與真機效果的不同。
- 實時預覽：在開發界面UI代碼過程中，如果添加或刪除了UI組件，您只需Ctrl+S進行保存，然后預覽器就會立即刷新預覽結果。如果修改了組件的屬性，則預覽器會實時（亞秒級）刷新預覽結果，達到極速預覽的效果（當前版本極速預覽僅支持ArkTS組件。支持部分數據綁定場景，如@State裝飾的變量）。實時預覽默認開啟，如果不需要實時預覽，請單擊預覽器右上角
按鈕，關閉實時預覽功能。 說明
開發者修改resources/base/profile目錄下的配置文件（如main_pages.json/form_config.json），不支持觸發實時預覽，開發者需要點擊重新加載
-
- 動態預覽：在預覽器界面，可以在預覽器中操作應用/元服務的界面交互動作，如單擊、跳轉、滑動等，與應用/元服務運行在真機設備上的界面交互體驗一致。
以ArkTS為例，使用預覽器的方法如下：
- 創建或打開一個ArkTS應用/元服務工程。本示例以打開一個本地ArkTS Demo工程為例。
- 在工程目錄下，打開任意一個.ets文件（JS工程請打開.hml/.css/.js頁面）。
- 可以通過如下任意一種方式打開預覽器開關，顯示效果如下圖所示：
- 通過菜單欄，單擊View > Tool Windows > Previewer打開預覽器。
- 在編輯窗口右上角的側邊工具欄，單擊Previewer，打開預覽器。
查看ArkUI預覽效果
ArkUI預覽支持頁面預覽與組件預覽，下圖中左側圖標
為頁面預覽，右側圖標
為組件預覽。
頁面預覽
ArkTS應用/元服務支持頁面預覽。頁面預覽通過在工程的ets文件頭部添加@Entry實現。
@Entry的使用參考如下示例：
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}組件預覽
ArkTS應用/元服務支持組件預覽。組件預覽支持實時預覽，不支持動態圖和動態預覽。組件預覽通過在組件前添加注解@Preview實現，在單個源文件中，最多可以使用10個@Preview裝飾自定義組件。
@Preview的使用參考如下示例：
@Preview({title: 'ContentTable'
})
@Component
struct ContentTablePreview {build() {Flex() {ContentTable({ foodItem: getDefaultFoodData() })}}
}頁面預覽
ArkTS應用/元服務支持頁面預覽。頁面預覽通過在工程的ets文件頭部添加@Entry實現。
@Entry的使用參考如下示例：
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}組件預覽
ArkTS應用/元服務支持組件預覽。組件預覽支持實時預覽，不支持動態圖和動態預覽。組件預覽通過在組件前添加注解@Preview實現，在單個源文件中，最多可以使用10個@Preview裝飾自定義組件。
@Preview的使用參考如下示例：
@Preview({title: 'ContentTable'
})
@Component
struct ContentTablePreview {build() {Flex() {ContentTable({ foodItem: getDefaultFoodData() })}}
}以上示例的組件預覽效果如下圖所示：
組件預覽默認的預覽設備為Phone，若您想查看不同的設備，或者不同的屏幕形狀，或者不同設備語言等情況下的組件預覽效果，可以通過設置@Preview的參數，指定預覽設備的相關屬性。若不設置@Preview的參數，默認的設備屬性如下所示：
@Preview({title: 'Component1', //預覽組件的名稱deviceType: 'phone', //指定當前組件預覽渲染的設備類型，默認為Phonewidth: 1080, //預覽設備的寬度，單位：pxheight: 2340, //預覽設備的長度，單位：pxcolorMode: 'light', //顯示的亮暗模式，當前支持取值為lightdpi: 480, //預覽設備的屏幕DPI值locale: 'zh_CN', //預覽設備的語言，如zh_CN、en_US等orientation: 'portrait', //預覽設備的橫豎屏狀態，取值為portrait或landscaperoundScreen: false //設備的屏幕形狀是否為圓形
})請注意，如果被預覽的組件是依賴參數注入的組件，建議的預覽方式是：定義一個組件片段，在該片段中聲明將要預覽的組件，以及該組件依賴的入參，并在組件片段上標注@Preview注解，以表明將預覽該片段中的內容。例如，要預覽如下組件：
@Component
struct Title {@Prop context: string; build() {Text(this.context)}
}建議按如下方式預覽：
@Preview
@Component //定義組件片段TitlePreview
struct TitlePreview {build() {Title({ context: 'MyTitle' }) //在該片段中聲明將要預覽的組件Title，以及該組件依賴的入參 {context: 'MyTitle'}}
}Profile Manager
由于真機設備有豐富的設備型號，不同設備型號的屏幕分辨率可能不一樣。因此，在HarmonyOS應用/元服務開發過程中，由于設備類型繁多，可能需要查看在不同設備上的界面顯示效果。對此，DevEco Studio的預覽器提供了Profile Manager功能，支持開發者自定義預覽設備Profile（包含分辨率和語言），從而可以通過定義不同的預覽設備Profile，查看HarmonyOS應用/元服務在不同設備上的預覽顯示效果。當前支持自定義設備分辨率及系統語言。
定義設備后，可以在Previewer右上角，單擊
按鈕，打開Profile管理器，切換預覽設備。
同時，Profile Manager還支持多設備預覽功能，具體請參考查看多端設備預覽效果。
下面以自定義一款Phone設備為例，介紹設備Profile Manager的使用方法。
- 在預覽器界面，打開Profile Manager界面。
-
在Profile Manager界面，單擊+ New Profile按鈕，添加設備。
-
在Create Profile界面，填寫新增設備的信息，如Profile ID（設備型號）、Device type（設備類型）、Resolution（分辨率）和Language and region（語言和區域）等。其中Device type只能選擇module.json5中deviceTypes字段已定義的設備。
-
設備信息填寫完成后，單擊OK完成創建。
查看多端設備預覽效果
DevEco Studio支持HarmonyOS分布式應用/元服務開發，同一個應用/元服務可以運行在多個設備上。在HarmonyOS分布式應用/元服務的開發階段，因不同設備的屏幕分辨率、形狀、大小等不同，開發者需要在不同的設備上查看應用/元服務的UI布局和交互效果，此時便可以使用多端設備預覽器功能，方便開發者在應用/元服務開發過程中，隨時查看不同設備上的界面顯示效果。
說明
多端設備預覽最多同時支持4個設備的預覽。
前面介紹了DevEco Studio支持ArkTS、JS應用/元服務的預覽器功能，多端設備預覽器支持ArkTS、JS應用/元服務在不同設備上的同時預覽。如果兩個設備支持的編碼語言不同，就不能使用多端設備預覽功能。
下面以ArkTS應用/元服務為例，介紹多端設備預覽器的使用方法，JS應用/元服務的多端設備預覽器使用方法相同。
- 在工程目錄中，打開任意一個ets文件（JS請打開hml/css/js文件）。
- 可以通過如下任意一種方式打開預覽器開關，顯示效果如下圖所示：
- 通過菜單欄，單擊View > Tool Windows > Previewer，打開預覽器。
- 在編輯窗口右上角的側邊工具欄，單擊Previewer，打開預覽器。
- 在Previewer窗口中，打開Profile Manager中的Multi-profile preview開關，同時查看多設備上的應用/元服務運行效果。
說明
多端設備預覽不支持動畫的預覽，如果需要查看動畫在設備上的預覽效果，請關閉Multi-device preview功能后在單設備預覽界面進行查看。
多設備預覽效果如下圖所示：
Inspector雙向預覽
DevEco Studio提供HarmonyOS應用/元服務的UI預覽界面與源代碼文件間的雙向預覽功能，支持ets文件與預覽器界面的雙向預覽。使用雙向預覽功能時，需要在預覽器界面單擊
圖標打開雙向預覽功能。
說明
暫不支持服務卡片的雙向預覽功能。
開啟雙向預覽功能后，支持代碼編輯器、UI界面和Component Tree組件樹三者之間的聯動：
- 選中預覽器UI界面中的組件，則組件樹上對應的組件將被選中，同時代碼編輯器中的布局文件中對應的代碼塊高亮顯示。
- 選中布局文件中的代碼塊，則在UI界面會高亮顯示，組件樹上的組件節點也會呈現被選中的狀態。
- 選中組件樹中的組件，則對應的代碼塊和UI界面也會高亮顯示。
在預覽界面還可以通過組件的屬性面板修改可修改的屬性或樣式，在預覽界面修改后，預覽器會自動同步到代碼編輯器中修改源碼，并實時的刷新UI界面；同樣的，如果在代碼編輯器中修改源碼，也會實時刷新UI界面，并更新組件樹信息及組件屬性。
說明
- 如果組件有做數據綁定，則其屬性不支持在屬性面板修改。
- 如果界面有使用動畫效果或者帶動畫效果組件，則其屬性不支持在屬性面板修改。
- 多設備預覽時，不支持雙向預覽。
預覽數據模擬
說明
僅API 11及以上版本的Stage工程支持。
在預覽場景中，由于代碼的運行環境與真機設備上的運行環境不同，調用部分接口時無法獲取到有效的返回值（例如獲取電池電量信息等，在預覽場景下batteryInfo.voltage返回的是一個固定的值0），這樣開發者就無法在預覽時查看到不同返回值帶來的界面變化。因此，Hamock提供了預覽場景的模擬功能，在不改變業務運行邏輯的同時，開發者可以模擬UI組件上的屬性或方法，或模擬import的模塊接口。
使用前提
使用Hamock在預覽場景模擬，需要在工程或模塊的oh-package.json5中添加該依賴，然后重新同步工程。
"devDependencies": {"@ohos/hamock": "1.0.0"
}UI組件上的Mock
Hamock提供了@MockSetup用于修飾Mock方法，僅支持聲明式范式的組件。當開發者預覽該組件時，預覽運行時將在組件初始化時執行被@MockSetup修飾的方法。因此，開發者可以在這個被修飾的方法內重定義組件的方法或重賦值組件的屬性，其將在預覽時生效。
說明
@MockSetup修飾的方法僅在預覽場景會自動觸發，并先于組件的aboutToAppear執行。
UI組件的方法
?
- 在ArkTS頁面代碼中引入Hamock。
import { MockKit, when, MockSetup } from '@ohos/hamock'; - 在目標組件中定義一個方法，并用@MockSetup修飾該方法。在這個方法中，使用MockKit模擬目標方法。
import { MockKit, when, MockSetup } from '@ohos/hamock';@Entry
@Component
struct Index {...@MockSetuprandomName() {let mocker: MockKit = new MockKit();let mockfunc: Object = mocker.mockFunc(this, this.method1);// mock 指定的方法在指定入參的返回值when(mockfunc)('test').afterReturn(1);}...// 業務場景調用方法const result = this.method1('test'); // in previewer, result = 1
}UI組件的屬性
- 在ArkTS頁面代碼中引入Hamock。
import { MockSetup } from '@ohos/hamock'; - 在目標組件中定義一個方法，并用@MockSetup修飾該方法。在這個方法中，對于需要Mock的屬性，可以重新賦值。
import { MockSetup } from '@ohos/hamock';@Component
struct Person {@Prop species: string;// 在@MockSetup片段中，定義對象屬性@MockSetuprandomName() {this.species = 'primates'}...// 業務場景調用屬性（如果從初始化到調用期間，該屬性無變化）const result = this.species // in previewer, result = primates
}說明
- ArkUI部分類型屬性不支持Mock，如readonly、@ObjectLink。
- 被@Link/@Consume/@Prop/@BuilderParam裝飾器修飾的變量，ArkUI語法要求父容器需要有對應屬性的定義，因此更推薦開發者通過定義?個預覽場景父容器（并通過父容器傳遞合適的數據）來預覽這?類的組件。
模塊的Mock
系統模塊/依賴的模塊
- 在src/mock目錄下新建一個ArkTS文件，在這個文件內定義目標Module的Mock實現。
import router from '@ohos.router';// 定義或導入 routerParam 的返回值類型 interface PageRouterParam {name: string }// 定義 mock 實現 const MockRouter: Record<string, Object> = {'getParams': () => {return { name: 'Mocked' } as PageRouterParam;},// 復用原始實現'pushUrl': router.pushUrl,'replaceUrl': router.replaceUrl,... };export default MockRouter;說明- 如果用戶在定義Mock的實現時，未復用原始實現，則在預覽運?時，當業務代碼調用到未被Mock的接口方法時，實際將調用到undefined的對象。
- 目標模塊與Mock實現代碼是?對?的關系。對同?個模塊，只支持有?份Mock實現代碼。預覽運行時所有頁面import該模塊都將指向為Mock實現代碼。
- 在Mock配置文件（src/mock/mock-config.json5）中定義目標Module與Mock實現的替換關系。該替換關系僅會在預覽場景下生效。
{"@ohos.router": { // 待替換的moduleName"source": "src/mock/module/ohos/router.mock.ets" // mock代碼的路徑，相對于模塊根目錄},... } - 在原調用處中添加Hilog日志，方便在預覽時，在Log中打印獲取返回值，從而驗證Mock是否生效。
hilog.debug(DomainNumber, logTag, 'Mock %{public}s', router.getParams()['name']);本地模塊
- 在src/mock目錄下新建一個ArkTS文件，在這個文件內定義目標Module的Mock實現。
// import local module import LibDefaultExport from '../../../main/ets/utils/CommonUtils'; // get origin default export import { methodA, ObjectB } from '../../../main/ets/utils/CommonUtils'; // get origin export on demandclass DefaultExportMock extends LibDefaultExport {// 定義mock實現public static getName(): String {return "Mocked Name";} };export {methodA,ObjectB, }export default DefaultExportMock;其中CommonUtils.ets文件示例如下：
export default class CommonUtils {public static getName(): String {return "origin name";}public static getTitle(): String {return "origin title";} }export const methodA = (): string => {return "methodA" }export const ObjectB: Object = new Object();說明
本地Module的Mock僅支持src/main/ets目錄下的ArkTS或TS文件。
- 在Mock配置文件（src/mock/mock-config.json5）中定義目標Module與Mock實現的替換關系。該替換關系僅會在預覽場景下生效。
{"utils/CommonUtils.ets": { // 本地module只支持ets/xxx的相對路徑，并需明確文件后綴"source": "src/mock/module/utils/CommonUtils.mock.ts"},... } - 在原調用處中添加Hilog日志，方便在預覽時，在Log中打印獲取返回值，從而驗證Mock是否生效。
hilog.debug(DomainNumber, logTag, 'Mock %{public}s', CommonUtils.getName());
學習筆記(四)--入門基本操作)
![[Vue]props解耦傳參](http://pic.xiahunao.cn/[Vue]props解耦傳參)
