??想了解更多內(nèi)容，請?jiān)L問：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??

Launcher系統(tǒng)桌面應(yīng)用

Launcher 作為系統(tǒng)人機(jī)交互的首要入口，提供應(yīng)用圖標(biāo)的顯示、點(diǎn)擊啟動、卸載應(yīng)用，并提供桌面布局設(shè)置以及最近任務(wù)管理等功能。

Launcher 采用純 JS 語言開發(fā)，開發(fā)過程中不涉及任何 Java 部分的代碼。

https://gitee.com/openharmony/applications_launcher

開發(fā)環(huán)境

• 系統(tǒng)版本：OpenHarmony 3.0LTS / OpenHarmony 3.1beta
• 開發(fā)板：3516 / rk3568
• IDE：DevEco3.0.0.800

前置知識

【甜甜醬OH實(shí)踐】OpenHarmony預(yù)置系統(tǒng)應(yīng)用編譯安裝全流程記錄

https://harmonyos.51cto.com/posts/10395

實(shí)現(xiàn)桌面全屏

首先我們了解兩個(gè)重要的接口能力。

Window

窗口。

導(dǎo)入模塊

import window from '@ohos.window';

window.getTopWindow

getTopWindow(callback: AsyncCallback): void

獲取當(dāng)前窗口，用于獲取到window實(shí)例。

Window實(shí)例 moveTo方法

moveTo(x: number, y: number, callback: AsyncCallback): void

窗口位置移動。

Window實(shí)例 resetSize方法

resetSize(width: number, height: number, callback: AsyncCallback): void

改變當(dāng)前窗口大小。

Display

顯示設(shè)備屬性。

導(dǎo)入模塊

import display from '@ohos.display';

使用OpenHarmonySDK時(shí)，IDE是找不到對應(yīng)的模塊的。這個(gè)時(shí)候，我們就可以使用忽略大法。

// @ts-ignore
import display from '@ohos.display';

display.getDefaultDisplay

getDefaultDisplay(callback: AsyncCallback): void;

獲取當(dāng)前默認(rèn)的display對象。

Display

描述display對象的屬性。

改變Launcher應(yīng)用窗體

// app.ets
// @ts-ignore
import display from '@ohos.display'
import Window from '@ohos.window';

export default {
  onCreate() {
    console.info('Application onCreate')
    
    //在此改變應(yīng)用窗體
    display.getDefaultDisplay().then(dis => {
      //獲取屏幕高寬 dis.width dis.height
      Window.getTopWindow()
        .then((windowData) => {
          //修改窗口定位
          windowData.moveTo(0, 0).then((result) => {
              //改變窗口大小
              windowData.resetSize(dis.width, dis.height)
              .then((result) => {});
          });
        });
    })
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

簽名->編譯->安裝->重啟。

我們發(fā)現(xiàn)桌面看起來是改變了，但是還是被狀態(tài)欄和導(dǎo)航欄遮擋。

效果如圖：

重要的配置文件

OpenHarmony會為StatusBar，Launcher，NavigationBar三個(gè)應(yīng)用分別初始化好各自窗體位置。

StatusBar，NavigationBar這兩個(gè)應(yīng)用分別占據(jù)設(shè)備屏幕的最上和最下的位置，并始終保持在所有應(yīng)用的最上層。

Launcher應(yīng)用為配合StatusBar，NavigationBar，會空出上下區(qū)域。

計(jì)算桌面應(yīng)用/其他應(yīng)用的實(shí)際高度，是需要設(shè)備屏幕高度去減去空出的上下區(qū)域高度的。

OpenHarmony未提供一個(gè)實(shí)際計(jì)算應(yīng)用實(shí)際展示區(qū)域高寬的接口

OpenHarmony提供了一個(gè)配置文件system/etc/ams_service_config.json。

在系統(tǒng)啟動時(shí)，會讀取該文件的配置信息，決定哪些系統(tǒng)應(yīng)用需要啟動。

OpenHarmony 3.0LTS 與 3.1beta的配置信息有所不同

// 3.0LTS
{
  "service_startup_config": {
    "startup_launcher": true,
    "startup_system_ui_status_bar": true,
    "startup_system_ui_navigation_bar": true
  }
}

// 3.1beta
{
    "service_startup_config": {  
        "startup_launcher": true,
        "startup_settings_data": true,
        "startup_system_ui_status_bar": true,
        "startup_system_ui_navigation_bar": true,
        "startup_phone_service": true,
        "startup_contacts": true,
        "startup_mms": true,
        "mission_save_time": 43200000
    },
    "memorythreshold": {
        "home_application": "20"
    },
    "system_configuration": {
        "system_orientation": "vertical"
    }
}

這里我們只需要選擇不啟動StatusBar與NavigationBar應(yīng)用即可。

// 修改文件內(nèi)容
"startup_system_ui_status_bar": false,
"startup_system_ui_navigation_bar": false

替換開發(fā)板上的文件(記得對源文件進(jìn)行備份)。

hdc_std file send E:\ams_service_config.json system/etc/ams_service_config.json

重啟系統(tǒng)。

hdc_std shell reboot

可以看到桌面占滿整個(gè)屏幕了。

若不改變桌面應(yīng)用窗體，可以看到屏幕上方與下方會空出了一塊黑色區(qū)域。

我當(dāng)前使用的系統(tǒng)的3.1beta，是會出現(xiàn)花屏問題。3.0LTS可以看到是一塊純黑的區(qū)域。

雖然改變了桌面的窗體，但是其他應(yīng)用還是被限制在原來的窗體下。打開設(shè)置應(yīng)用，會發(fā)現(xiàn)應(yīng)用窗體上下出現(xiàn)了空白。

實(shí)現(xiàn)原理

自定義桌面

完成這一系列操作后，我們現(xiàn)在來自定義一個(gè)全屏桌面。

我這里寫了一個(gè)橫屏的Hello World。

創(chuàng)建工程

新建OpenHarmony工程，選擇[Standard]Empty Ability

配置工程，按照以下內(nèi)容配置。

• Bundle name：com.ohos.launcher (系統(tǒng)指定的桌面應(yīng)用bundlename)
• Languaget: eTS
• Compatible API version: SDK: API Version 7

先按照之前的內(nèi)容，實(shí)現(xiàn)桌面應(yīng)用窗體全屏。

// app.ets
// @ts-ignore
import display from '@ohos.display'
import Window from '@ohos.window';

export default {
  onCreate() {
    console.info('Application onCreate')
    
    //在此改變應(yīng)用窗體
    display.getDefaultDisplay().then(dis => {
      //獲取屏幕高寬 dis.width dis.height
      Window.getTopWindow()
        .then((windowData) => {
          //修改窗口定位
          windowData.moveTo(0, 0).then((result) => {
              //改變窗口大小
              windowData.resetSize(dis.width, dis.height)
              .then((result) => {});
          });
        });
    })
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

頁面。

// index.ets
@Entry
@Component
struct Index {
  // 潤和3516
  private w: number = 480 
  private h: number = 960

  // rk3568
  // private w: number = 720
  // private h: number = 1920 
    
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text("Hello World").fontColor("#fff200").fontSize('150px')
    }
    .width(this.h + 'px')
    .height(this.w + 'px')
    .backgroundColor("blue")
    .translate({
      x: -(this.h - this.w) / 2 + 'px',
      y: (this.h - this.w) / 2 + 'px'
    })
    .rotate({ z: 1, angle: 90, centerX: '50%', centerY: '50%' })
  }
}

Previewer設(shè)置

想先在Previewer中查看效果的話，請按以下內(nèi)容進(jìn)行設(shè)置。

使用rk3568開發(fā)板的小伙伴請按以下新增Previewer Profile。

• Device type：phone
• Resolution：720 x 1280
• DPI：160

使用3516開發(fā)板的小伙伴請按以下新增Previewer Profile。

由于profile有分辨率大小有限制，所以3516模擬建議使用以下配置。

// 模擬代碼請相應(yīng)地將高寬*2，編譯時(shí)記得去掉就好了

private w: number = 480 * 2

private h: number = 960 * 2

• Device type：phone
• Resolution：960 x 1920
• DPI：320

最終效果

簽名->編譯->安裝->重啟，完成!

• RK3568效果

• 3516效果

??想了解更多內(nèi)容，請?jiān)L問：??

??51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)??

??https://harmonyos.51cto.com??