HTML/CSS/JS 및 Electron을 사용하여 데스크톱 앱 빌드
5808 단어 electrontutorialjavascript
프레임워크에 대한 소개로 간단한 데스크톱 시계 애플리케이션을 만들 것입니다.
시작하기 전에 최신 버전node.js을 설치하는 것이 좋습니다.
자, 먼저 이 프로젝트에 필요한 폴더/파일 구조를 생성해 보겠습니다.
electron-test/
├─ package.json
├─ index.js
├─ index.html
├─ script.js
├─ style.css
패키지.json
이 파일은 애플리케이션을 시작할 때 실행할 명령을 나타냅니다.
{
"name": "electron-test",
"main": "index.js",
"scripts": {
"start": "electron ."
}
}
참고:
"name": "electron"를 사용하지 마십시오. 그렇지 않으면 Electron 설치가 실패합니다.전자 설치
프로젝트 폴더에서 새 터미널 창을 연 다음 설치를 실행합니다.
npm install --save-dev electron
그러면 필요한 모든 노드 모듈이 다운로드되고 package.json에 dev 종속성이 추가됩니다.
index.js
이 파일은 창을 만들고 시스템 이벤트를 처리하는 데 사용됩니다.
시계 앱의 경우 작은(190×80) 고정 크기 브라우저 창을 만듭니다.
const { app, BrowserWindow } = require("electron");
app.whenReady().then(createWindow);
function createWindow() {
const win = new BrowserWindow({
width: 190,
height: 80,
resizable: false,
});
win.loadFile("index.html");
}
index.html
시계 기능을 위한 CSS 및 JS를 로드하는 매우 기본적인 HTML 파일:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock App</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<script src="script.js"></script>
</body>
</html>
script.js
Fetch는 현재 시간을 index.html에서 매초(1000밀리초) 업데이트합니다.
function getTime() {
time = new Date().toLocaleTimeString();
document.body.innerHTML = time;
}
setInterval(getTime, 1000);
스타일.css
마지막으로 시계 모양을 개선하기 위한 CSS:
body {
font-family: monospace;
font-size: 32px;
background-color: black;
color: greenyellow;
text-align: center;
}
monospace 글꼴은 숫자가 변경될 때 시계 위치가 이동하는 것을 방지합니다.애플리케이션 시작
이제 다음 명령을 실행하여 애플리케이션을 시작할 수 있습니다.
npm start
Reference
이 문제에 관하여(HTML/CSS/JS 및 Electron을 사용하여 데스크톱 앱 빌드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/michaelburrows/build-a-desktop-app-using-html-css-js-electron-9ol텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
