# my-electron-app
**Repository Path**: zhao-jingtao-l_admin/my-electron-app
## Basic Information
- **Project Name**: my-electron-app
- **Description**: Electron 应用基于 npm 搭建
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-10-15
- **Last Updated**: 2024-12-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 创建您的第一个应用程序
教程目录
这是 Electron 教程的**第二部分**。
1. [基本要求](https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-prerequisites)
2. **[创建您的第一个应用程序](https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-first-app)**
3. [使用预加载脚本](https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload)
4. [添加功能](https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-adding-features)
5. [打包您的应用程序](https://www.electronjs.org/zh/docs/latest/tutorial/打包教程)
6. [发布和更新](https://www.electronjs.org/zh/docs/latest/tutorial/推送更新教程)
## 学习目标
在本节，您会学习如何创建您的 Electron 项目，并且编写一个简单的入门程序。 到了本节末尾，您应该能够在终端开发环境运行一个 Electron 应用。
## 创建项目
避免使用 WSL
如果您使用的是Windows系统，在本教程中请不要使用 [Windows Subsystem for Linux](https://learn.microsoft.com/en-us/windows/wsl/about#what-is-wsl-2) (WSL)，否则您在尝试运行应用时可能会遇到问题。
### 初始化 npm 项目
Electron 应用基于 npm 搭建，以 package.json 文件作为入口点。 首先创建一个文件夹，然后在其中执行 `npm init` 初始化项目。
- npm
- Yarn
```sh
mkdir my-electron-app && cd my-electron-app
npm init
```
这条命令会帮您配置 package.json 中的一些字段。 为本教程的目的，有几条规则需要遵循：
- *入口点* 应当是 `main.js` (您很快就会创建它)
- *author*、*license* 和 _description_可为任意值，但对于 [应用打包](https://www.electronjs.org/zh/docs/latest/tutorial/打包教程) 是必填项。
然后，将 Electron 安装为您项目的 **devDependencies**，即仅在开发环境需要的额外依赖。
为什么 Electron 是 devDependency?
您的应用需要运行 Electron API，因此这听上去可能有点反直觉。 实际上，打包后的应用本身会包含 Electron 的二进制文件，因此不需要将 Electron 作为生产环境依赖。
- npm
- Yarn
```sh
npm install electron --save-dev
```
在初始化并且安装完 Electron 之后，您的 package.json 应该长下面这样。 文件夹中会出现一个 `node_modules` 文件夹，其中包含了 Electron 可执行文件；还有一个 `package-lock.json` 文件，指定了各个依赖的确切版本。
package.json
```json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}
```
高级安装步骤
如果直接安装 Electron 失败，请参考我们的 [安装指导](https://www.electronjs.org/zh/docs/latest/tutorial/installation) 文档，了解有关下载镜像、代理和故障排除步骤的说明。
### 添加 .gitignore 文件
[`.gitignore`](https://git-scm.com/docs/gitignore) 文件可以指定哪些文件和目录应该在Git中不被跟踪。 建议您复制一份 [GitHub 的 Node.js gitignore 模板](https://github.com/github/gitignore/blob/main/Node.gitignore) 到您项目的根目录，以避免将 `node_modules` 文件夹提交到版本控制系统中。
## 运行 Electron 应用
:::延伸阅读
参阅 [Electron 进程模型（process model）](https://www.electronjs.org/zh/docs/latest/tutorial/process-model) 相关文档来了解 Electron 的进程之间是如何协作的。
:::
您在 package.json 中指定的 [`main`](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#main) 文件是 Electron 应用的入口。 这个文件控制 **主程序 (main process)**，它运行在 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)，稍后会详细介绍。
在继续编写您的 Electron 应用之前，您将使用一个小小的脚本来确保主进程入口点已经配置正确。 在根目录的 `main.js` 文件中写一行代码：
main.js
```js
console.log('Hello from Electron 👋')
```
由于 Electron 的主进程是一个 Node.js 运行时，您可以使用 `electron` 命令执行任意的 Node.js 代码 (甚至可以将其作为 [REPL](https://www.electronjs.org/zh/docs/latest/tutorial/repl) 使用)。 要执行这个脚本，需要在 package.json 的 [`scripts`](https://docs.npmjs.com/cli/v7/using-npm/scripts) 字段中添加一个 `start` 命令，内容为 `electron .` 。 这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。
package.json
```json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"start": "electron .",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "23.1.3"
}
}
```
- npm
- Yarn
```sh
npm run start
```
您的终端应该会输出 `欢迎来到 Electron 👋`。 恭喜，您已经在 Electron 中执行了您的第一行代码！ 接下来，您会学习如何用 HTML 创建用户界面，并将它们装载到原生窗口中。
## 将网页装载到 BrowserWindow
在 Electron 中，每个窗口展示一个页面，后者可以来自本地的 HTML，也可以来自远程 URL。 在本例中，您将会装载本地的文件。 在您项目的根目录中创建一个 `index.html` 文件，并写入下面的内容：
index.html
```html
Hello from Electron renderer!
Hello from Electron renderer!
👋
```
现在您有了一个网页，您可以将其加载到一个 Electron 的 [BrowserWindow](https://www.electronjs.org/zh/docs/latest/api/browser-window) 上了。 将 `main.js` 中的内容替换成下列代码。 我们马上会逐行解释。
main.js
```js
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadFile('index.html')
}
app.whenReady().then(() => {
createWindow()
})
```
### 导入模块
main.js (Line 1)
```js
const { app, BrowserWindow } = require('electron')
```
在第一行中，我们使用 CommonJS 语法导入了两个 Electron 模块：
- [app](https://www.electronjs.org/zh/docs/latest/api/app)，它着您应用程序的事件生命周期。
- [BrowserWindow](https://www.electronjs.org/zh/docs/latest/api/browser-window)，它负责创建和管理应用窗口。
模块名的大小写规范
类型化导入别名