HUAWEI DevEco Studio（以下簡(jiǎn)稱DevEco Studio）是面向華為終端全場(chǎng)景多設(shè)備的一站式集成開發(fā)環(huán)境（IDE），為開發(fā)者提供工程模板創(chuàng)建、開發(fā)、編譯、調(diào)試、測(cè)試、發(fā)布等E2E的HarmonyOS應(yīng)用開發(fā)服務(wù)。通過使用DevEco Studio，開發(fā)者可以更高效的開發(fā)具備HarmonyOS分布式能力的應(yīng)用，進(jìn)而提升創(chuàng)新效率。2021年3月，DevEco Studio又迎來更新，2.1 Beta3版本強(qiáng)勢(shì)來襲。

新版本的到來，究竟能給廣大HarmonyOS應(yīng)用開發(fā)者帶來哪些不一樣的體驗(yàn)？讓我們?cè)谖闹幸灰唤視浴?/p>

亮點(diǎn)一：預(yù)覽器新增雙向預(yù)覽功能

在HarmonyOS應(yīng)用開發(fā)過程中，開發(fā)者可通過點(diǎn)擊“Previewer”，查看應(yīng)用的UI界面效果。當(dāng)開發(fā)者發(fā)現(xiàn)UI界面的布局顯示不符合預(yù)期時(shí)（eg:控件的寬度不符合設(shè)定值、控件不顯示等），需要逐一排查UI界面中布局或控件的異常。

為了提高排查的效率，DevEco Studio 2.1 Beta3在已有的 “實(shí)時(shí)預(yù)覽”和“動(dòng)態(tài)預(yù)覽”基礎(chǔ)上，全新解鎖了雙向預(yù)覽功能。

實(shí)時(shí)預(yù)覽：只要在布局文件中保存了修改的源代碼，在預(yù)覽器中就可以實(shí)時(shí)查看布局效果。

動(dòng)態(tài)預(yù)覽：在預(yù)覽器界面，可以在預(yù)覽器中操作應(yīng)用的交互動(dòng)作，如點(diǎn)擊事件、跳轉(zhuǎn)、滑動(dòng)等，與應(yīng)用運(yùn)行在真機(jī)設(shè)備上的交互體驗(yàn)一致。

所謂雙向預(yù)覽，即支持代碼編輯器、預(yù)覽器界面（含屬性列表）兩者之間的聯(lián)動(dòng)，便于快速定位控件，從而提升解決UI界面問題的效率。開發(fā)者可通過在預(yù)覽器界面，點(diǎn)擊圖標(biāo)的方式，打開雙向預(yù)覽功能。

具體聯(lián)動(dòng)效果如下：

①通過預(yù)覽器界面中的屬性列表，修改屬性或樣式后，代碼編輯器中的源碼會(huì)同步修改，并實(shí)時(shí)刷新預(yù)覽器界面；

②同樣的，如果在代碼編輯器中修改源碼，將會(huì)實(shí)時(shí)刷新預(yù)覽器界面及屬性列表。

但值得注意的是，若碰到以下情況，則不支持修改其屬性：

?hml布局代碼里使用了數(shù)據(jù)綁定的屬性；

?xml布局代碼里使用了資源引用的屬性；

?UI界面設(shè)置了動(dòng)畫效果。

溫馨提示：不同的API Version版本，預(yù)覽器支持的功能略有不同，具體差異如下：

亮點(diǎn)二：預(yù)覽器新增Java UI界面的數(shù)據(jù)模擬功能

在預(yù)覽場(chǎng)景中，由于代碼的運(yùn)行環(huán)境與真機(jī)設(shè)備上的運(yùn)行環(huán)境不同，調(diào)用部分接口時(shí)無法獲取到有效的返回值。開發(fā)者若想根據(jù)返回值做出不同的UI界面展現(xiàn)，則需手動(dòng)反復(fù)修改代碼邏輯，以驗(yàn)證不同UI界面效果。

為了減少修改，DevEco Studio提供PreviewMock數(shù)據(jù)模擬功能，即在不改變業(yè)務(wù)運(yùn)行邏輯的前提下，模擬API或者業(yè)務(wù)代碼中的各種method（不包括構(gòu)造方法）的返回值和對(duì)象中的Field（不包括final字段）的值。這樣開發(fā)者就可以在預(yù)覽時(shí)，查看到不同返回值帶來的界面變化。

不過值得注意的是，DevEco Studio 2.1 Beta3當(dāng)前僅支持Java UI界面的PreviewMock數(shù)據(jù)模擬功能。與此同時(shí)，要想使用PreviewMock數(shù)據(jù)模擬功能，需先在模塊的build.gradle中添加相關(guān)依賴，并重新同步工程。

（圖：在build.gradle中添加PreviewMock的依賴）

除了上述的兩大亮點(diǎn)功能，在Java UI界面預(yù)覽方面，開發(fā)者在預(yù)覽Ability或AbilitySlice時(shí)，保存修改后的代碼，即可做到實(shí)時(shí)預(yù)覽；在JS UI界面預(yù)覽方面，開發(fā)者可直接選擇某一個(gè)page（頁(yè)面）進(jìn)行實(shí)時(shí)動(dòng)態(tài)預(yù)覽。

亮點(diǎn)三：編輯器新增config.json可視化配置功能

作為HarmonyOS應(yīng)用開發(fā)的入門選手，你是否為了了解配置項(xiàng)的含義，而反復(fù)查閱HarmonyOS官網(wǎng)的資料文檔？為了減少開發(fā)者反復(fù)切換界面查閱資料文檔的行為，DevEco Studio 2.1 Beta3新增了可視化配置功能。

開發(fā)者可通過打開config.json文件，點(diǎn)擊按鈕，打開設(shè)置界面，查看該項(xiàng)目所需填寫的重要屬性及其含義，完善應(yīng)用名稱、應(yīng)用版本號(hào)、應(yīng)用類型、Ability、設(shè)備類型、應(yīng)用權(quán)限等配置項(xiàng)。

然而，在開發(fā)過程中，可能存在配置項(xiàng)層級(jí)過多的場(chǎng)景，例如：配置“Module ? Ablilities ? Meta Data ? Merge Rule ? Replace”字段時(shí)，用戶可通過搜索框快速定位到該屬性，點(diǎn)擊add按鈕，輸入相關(guān)合并規(guī)則，觸發(fā)系統(tǒng)在config.json文件中自動(dòng)創(chuàng)建配置項(xiàng)的樹型結(jié)構(gòu)，完成合并規(guī)則的配置，節(jié)省配置時(shí)間。

亮點(diǎn)四：編輯器新增資源創(chuàng)建向?qū)Чδ?/strong>