【NodeJS】学习Electron（桌面应用程序）

2 年 ago

清, 扬

1 minute

本文的目的是

创建一个Electron（桌面应用程序）的样本。

确认已经安装了NodeJS。

> node -v
v12.16.2

创建项目的 package.json

> npm init
###electronパッケージをインストール
> npm i -D electron

创建各种文件

创建一个名为src的文件夹，然后在该文件夹下创建应用程序文件。
– 创建应用程序的package.json文件。

{
  "main": "main.js" 
}

// アプリケーション作成用のモジュールを読み込み
const {app, BrowserWindow} = require('electron');

// メインウィンドウ
let mainWindow;

function createWindow() {
  // メインウィンドウを作成
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,
    },
    width: 800, height: 600,
  });

  // メインウィンドウに表示するURLを指定
  // （今回はmain.jsと同じディレクトリのindex.html）
  mainWindow.loadFile('index.html');

  // デベロッパーツールの起動
  mainWindow.webContents.openDevTools();

  // メインウィンドウが閉じられたときの処理
  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

//  初期化が完了した時の処理
app.on('ready', createWindow);

// 全てのウィンドウが閉じたときの処理
app.on('window-all-closed', () => {
  // macOSのとき以外はアプリケーションを終了させます
  if (process.platform !== 'darwin') {
    app.quit();
  }
});
// アプリケーションがアクティブになった時の処理(Macだと、Dockがクリックされた時）
app.on('activate', () => {
  // メインウィンドウが消えている場合は再度メインウィンドウを作成する
  if (mainWindow === null) {
    createWindow();
  }
});

<html>
<head>
  <meta charset="UTF-8">
  <title>Hello World!</title>
</head>

<body>
  <h1>初めてのElectron</h1>
  We are using node <script>document.write(process.versions.node)</script>,
  Chrome <script>document.write(process.versions.chrome)</script>,
  and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

开始

> npx electron ./src

包装

> npm i -D electron-packager

・Windows-微软的操作系统

> npx electron-packager src SampleApp --platform=win32 --arch=x64 --overwrite

・苹果电脑操作系统（达尔文）

> npx electron-packager src SampleApp --platform=darwin --arch=x64 --overwrite

本文的目的是

确认已经安装了NodeJS。

创建项目的 package.json

创建各种文件

开始

包 装

包装