1.目標
公式の例を学び、HelloWorldを段階的に構築します。
電子の基本構造を理解する。
https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
2.プロジェクトフレームワーク
糸を取り付けます。
package.jsonを作成します。
電子をインストールします。
npm install --global yarn
yarn init -y
yarn add electron --dev
起動スクリプトを作成します。
"scripts": {
"start": "electron ."
}
スクリプトを実行するとエラーが発生するはずです。
エントリjsがないため。
3.紹介ケース
index.htmlを作成します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
メインディレクトリに、main.jsを作成します。
const {
app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('./src/index.html')
}
app.whenReady().then(() => {
createWindow()
})
package.jsonのエントリをmain.jsに変更します。
"main": "main.js",
スクリプトを開始します。
4.いくつかの詳細を改善する
すべてのウィンドウを閉じて終了します
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})
起動時にウィンドウを開く（互換性あり）
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
5.プリロード
（追加予定）
6.exeを生成します
ツール：https ：//www.electronforge.io/
これは完全なプロセスツールであるため、次回はこれを使用してElectronAppを直接作成できます。
yarn add --dev @electron-forge/cli
yarn electron-forge import
npx run make
効果：
outフォルダのexe。
7.クイックビルド
すばやくビルドする方法はたくさんありますが、exeファイルをパックするものであるElectronForgeを選択します。
yarn create electron-app my-app
完全なツール：
開発中のデバッグツールもあります。
