一、安装 Electron
在开始学习 Electron 之前，我们需要安装 Electron。以下是安装步骤：
// 安装 electron
npm install electron -g
// 初始化新的项目
mkdir my-electron-app
cd my-electron-app
npm init
"main": "main.js",
"scripts": {
"start": "electron ."
}
// 安装 electron
npm install electron --save-dev
touch main.js
二、创建 Electron 应用程序窗口
现在我们已经安装了 Electron，让我们创建一个新的窗口来运行我们的 Electron 应用程序。
// 导入 electron 模块
const { app, BrowserWindow } = require('electron')
// 创建新窗口
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载 index.html 文件
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
三、创建 Electron 应用程序主界面
让我们添加一些 HTML 和 JavaScript 来创建应用程序的主界面。
Hello World!
Hello World!
<script>
const { ipcRenderer } = require('electron')
document.addEventListener('DOMContentLoaded', () => {
ipcRenderer.on('message', (event, args) => {
document.querySelector('#message').innerText = args
})
})
</script>
原创文章，作者：RUCOT，如若转载，请注明出处：https://www.506064.com/n/351771.html
微信扫一扫 
支付宝扫一扫 