Electron 앱

5677 단어 Electron

사전 준비



node 설치



  • brew로 설치
    brew install node
    

  • 확인
    node -v
    
    v7.3.0
    

  • npm/electron-prebuilt 설치



  • 설치
    npm -g install electron-prebuilt
    

  • npm/electron-packager 설치



  • 설치
    npm -g install electron-packager
    

  • 개발 준비



  • 프로젝트 디렉토리 만들기
    mkdir -p /your/project/path/project-name
    cd /your/project/path/project-name
    

  • npm init 실행
    npm init
    
  • 대화식 설정 콘솔이므로 대답하면 package.json이 생성됩니다.


  • 개발



    Hello World!



    구현



  • index.html배치

    index.html
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
    </html>
    


  • main.js 배치

    main.js
    const electron = require('electron');
    const app = electron.app;
    const BrowserWindow = electron.BrowserWindow;
    
    var win;
    
    function createWindow() {
        win = new BrowserWindow({
            width: 1200,
            height: 800,
        });
        win.loadURL('file://' + __dirname + '/index.html');
        win.webContents.openDevTools();
        win.on('closed', function () {
            win = null;
        });
    }
    
    app.on('ready', createWindow);
    
    app.on('window-all-closed', function () {
        app.quit();
    });
    
    app.on('activate', function () {
        if (win === null) {
            createWindow();
        }
    });
    


  • 확인



  • 실행해보기
    electron .
    
  • 윈도우가 일어나서 「Hello World!」가 표시되었다.
  • 좋은 웹페이지 즐겨찾기