如何用Electron Js建立第一個應用Hello World

時間 2019-11-12

標籤如何 electron 建立第一個應用 hello world 欄目 JavaScript 简体版

原文原文鏈接

什麼是Electron

Node.js和Chromium的結合品。容許只使用HTML，CSS和JavaScript來開發跨平臺桌面應用。javascript

編寫第一個Electron程序（Hello World）

在開始以前確保Node.js和Electron已經正確安裝，能夠用node -v,electron -v來看看有沒有輸出版號信息html
肯定必要環境都安裝好以後就能夠開始
1. 首先建立一個新的文件夾，能夠叫作Hello World
2. 在該文件夾下建立三個文件，分別是index.html，main.js，package.json

index.htmljava

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
  </head>
  <body>
    Hello World！
  </body>
</html>

main.jsnode

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require("path");
const url = require("url");   //基本是electron應用必備的語句，用來導入包，處理不一樣的內容


let win;    //讓JavaScript不要回收窗口，保持全局引用

function createWindow(){
    win = new BrowserWindow();
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file',
        slashes: true
    }));    //載入對應的html文件

    win.on('closed', ()=> {
        win = null;
    }) //關閉窗口時釋放掉
}   //建立窗口的函數

app.on('ready', createWindow);   //打開應用時，調用createWindow，即建立窗口函數

package.jsonnpm

{
  "name": "electron-js-test",  //應用的名字
  "version": "1.0.0",   //應用的版本
  "main": "main.js", //主進程
  "scripts": {
    "start": "electron ."
  }     //告訴npm應該加載什麼命令
}

最後在Hello World文件夾裏打開命令行，輸入npm start就能夠看到應用打開並且輸出Hello，World了
json