electron 入门教程+问题记录

最新推荐文章于 2024-04-23 13:55:08 发布

byhkydd

最新推荐文章于 2024-04-23 13:55:08 发布

阅读量620

点赞数

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/byhkydd/article/details/134872109

版权

1.首先需要安装Node.js：

如果已经安装，可跳过步骤1；

下载Node.js安装包
官网下载地址：http://nodejs.cn/download/，根据自己电脑选择32位还是64位；
打开下载好的安装程序，点击下一步，一直默认安装即可。可以参考：Node.js最新最详细安装教程（2020）_node js 安装-CSDN博客
安装完成后，可以打开命令行，输入
node -v
npm -v
查看当前是否安装成功，以及安装的版本

2.快速入门electron：

参考官网入门教程：快速入门 | Electron

2.1创建一个文件夹并初始化 npm 包：

Electron 应用程序遵循与其他 Node.js 项目相同的结构。首先创建一个文件夹并初始化 npm 包：

打开命令行工具，切换到自己的工作目录下，比如要在E盘的ElectronTest目录下创建项目：

cd E:\ElectronTest

然后执行以下命令：

mkdir my-electron-app && cd my-electron-app

此时ElectronTest目录下会创建一个my-electron-app的文件夹；

再执行以下命令：
npm init

根据提示，依次输入name 、version 、 description 、main 、author 、license：

entry point 应为 main.js.
author 与 description 可为任意值，但对于应用打包是必填项。

在my-electron-app下，会生成一个package.json 文件：

{
"name": "my-electron-app1",
"version": "1.0.0",
"description": "Hello World",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "JY",
"license": "MIT"
}

2.2将`electron` 包安装到应用的开发依赖中：

执行以下命令：

npm install --save-dev electron

执行成功后，在my-electron-app下会生成一个node_modules文件夹：

2.3创建一个简单的页面：

2.3.1创建一个index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<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>.

<！-- 您也可以此进程中运行其他文件 -->
<script src="./renderer.js"></script>
</body>
</html>

2.3.2创建main.js:

// main.js

// electron 模块可以用来控制应用的生命周期和创建原生浏览窗口
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
// 创建浏览窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})

// 加载 index.html
mainWindow.loadFile('index.html')

// 打开开发工具
// mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
createWindow()

app.on('activate', () => {
// 在 macOS 系统内, 如果没有已开启的应用窗口
// 点击托盘图标时通常会重新创建一个新窗口
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态,
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit()
})

// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件，然后用 require 导入。

2.3.3创建preload.js：

// 所有的 Node.js API接口都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}

for (const dependency of ['chrome', 'node', 'electron']) {
replaceText(`${dependency}-version`, process.versions[dependency])
}
})

3.打包并分发应用程序：

3.1将 Electron Forge 添加到您应用的开发依赖中

使用其"import"命令设置 Forge 的脚手架：

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

✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore

We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

如果这一步执行报错，一般时需要配置国内镜像：

配置国内镜像：npm config set ELECTRON_MIRROR http://npmmirror.com/mirrors/electron/

如果报错：

npm ERR! `ELECTRON_MIRROR` is not a valid npm option

npm ERR! A complete log of this run can be found in:C:\Users\<用户名>......

则执行npm config ls查看配置文件路径：

“user” config from XXXX (这个就是本地的路径)，找到这个文件，在文件中添加一行：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/

保存后回到命令行界面，重新执行3.1的操作；

3.2使用 Forge 的 `make` 命令来创建可分发的应用程序：

npm run make

> my-electron-app@1.0.0 make /my-electron-app
> electron-forge make

✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64

Electron-forge 会创建 out 文件夹，您的软件包将在那里找到：