cordova + electron 작업시 창조절 및 아이콘 넣기

cordova에서 electron을 추가하여 윈도우 앱을 만들 수 있다. 

덕분에 웹, 안드로이드, 윈도우앱을 한번에

쉽게 만들 수 있다는 장점이 있다

 

다만 cordova의 공식 홈페이지에서 

검색기능이 되지 않아 사용방법을 찾는게 조금 어렵다

(검색창은 있으나 기능이 안됨)

(한글도 지원안되고)

 

그래서 cordova에서 윈도우앱 설정이 조금 어렵다

이 포스팅은 창조절과 앱아이콘 설정에 대해 짧게 정리했다

 

https://cordova.apache.org/docs/en/12.x/guide/platforms/electron/index.html

Electron Platform Guide - Apache Cordova

 

 

 

 

1. /config.xml 설정

프로젝트 최상단에 위치한 config.xml을 켠다

그리고 아래와 같이 코드를 짠다

 

<platform name="electron">
    <preference name="ElectronSettingsFilePath" value="res/electron/settings.json" />
    <icon src="res/electron/icon.png" />
</platform>

platform 태그를 넣고 name을 electron으로 입력 한다

 

그리고 platform 태그 안에 electron 기본설정을 할 수 있는

settings.json 파일을 참조하도록 코드를 짠다

 

아이콘도 참조할 수 있는 이미지 주소를 넣는다

 

2. settings.json 파일 생성

 

1번에서 설정한 주소에 맞게 디렉토리를 구성하고

settings.json파일을 생성

(아이콘도 같은 디렉토리에 넣기)

 

3. setting.json -> 창 크기 입력

res/electron/settings.json 파일을 열고

아래와 같이 코드를 넣으면 창조절이 된다

 

{
    "browserWindow": {
        "width": 1098,
        "height": 644
    }
}

 

 

4. 확인하기

cordova build electron --release

프로젝트 위치에서 위 명령어 실행

 

'--release'를 입력하면 개발자 도구가 보이지 않게 빌드 된다