electron-learning-1

本文最后更新于：2023年6月12日 凌晨

创建第一个Electron应用

electron，启动

需要安装Node.js！请使用node -v和npm -v检查！

可以直接使用脚手架创建。用npm init。

注意：entry point应为main.js！

然后将electron包安装到应用的开发依赖中：npm install --save-dev electron。
安装好后，接着在package.json中增加一条命令：

1
2
3
4
5
{
  "scripts": {
    "start": "electron ."
  }
}

创建页面

在Electron中，各个窗口显示的内容可以是本地HTML文件，也可以是一个远程url。
所以可以现在本地写一些html先，比如官网的例子index.html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>你好!</title>
  </head>
  <body>
    <h1>你好!</h1>
    我们正在使用 Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    和 Electron <span id="electron-version"></span>.
  </body>
</html>

在窗口中打开页面

要把页面加载进应用窗口中，需要两个electron模块：

  • app模块，控制应用程序的事件生命周期
  • BrowserWindow模块，创建和管理应用程序窗口
    在main.js文件头部将它们导入作为CommonJS模块：const { app, BrowserWindow } = require('electron')
    然后写一个新的方法，在这个方法中，创建一个新的BrowserWindow实例，并把index.html加载到这个实例中：
1
2
3
4
5
6
7
8
const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

然后调用这个方法就可以创建窗口了。只有在app模块的ready事件被激发后才能创建浏览器窗口。可以通过使用app.whenReady()来监听此事件，并在成功后调用创建窗口的方法。

1
2
3
app.whenReady().then(() => {
  createWindow()
})

##打包和分发应用程序
可以使用Electron Forge。执行以下命令：

1
2
npm install --save-dev @electron-forge/cli
npx electron-forge import

完成上述步骤后，再执行npm run make即可创建可分发的应用程序，软件包在out文件夹下。

这里有一只爱丽丝

希望本文章能够帮到您~

Learning Log > Electron
#JavaScript #Elctron #Html #Css
electron-learning-1
https://map1e-g.github.io/2023/06/11/electron-learning-1/
作者
MaP1e-G
发布于
2023年6月11日
许可协议