# electron入门教程
**Repository Path**: TangDaShi/introduction-to-electronics
## Basic Information
- **Project Name**: electron入门教程
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-31
- **Last Updated**: 2021-05-31
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# electron入门教程
## 一.安装Node.js运行环境
在使用Electron进行开发之前，您需要安装 [Node.js](https://nodejs.org)。[14.17.0版本下载](https://nodejs.org/dist/v14.17.0/node-v14.17.0-x64.msi)
```
node -v
npm -v
```
这两个命令检测 Node.js 和 npm是否安装成功，返回版本信息代表成功。
## 二.配置electron
### 1.创建应用
为你的应用创建一个新的空文件夹 Electron
打开你的CMD命令行工具，从该文件夹运行 `npm init` 会帮助你创建一个基本的 package.json 文件
npm init配置信息注解，[点击查看详细注解](https://www.cnblogs.com/WD-NewDemo/p/11141384.html)
```
package name: 你的项目名字叫啥
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件(须设置为main.js)
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为node app.js）
git repository: 如果你要将项目上传到git中的话，那么就需要填写git的仓库地址（这里就不写地址了）
keywirds： 项目关键字（我也不知道有啥用，所以我就不写了）
author: 作者的名字（也就是你叫啥名字）
license: 发行项目需要的证书（这里也就自己玩玩，就不写了）
```
创建完成后你的package.json文件应该像这样
```
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"author": "Jane Doe",
"license": "MIT"
}
```
### 2.安装electron
```
npm install --save-dev electron
```
安装完成后在你的package.json配置字段中，添加如下start命令
```
"scripts": {
"start": "electron ."
}
```
此`start`命令将让你在开发模式下打开您的应用程序。
命令窗口执行 `npm run start` 命令可以调试内容
```
npm start
```
### 3.创建入口文件
在项目根目录新建main.js文件（入口文件）
```
//导入模块
//app模块，用于控制应用程序的事件生命周期
//BrowserWindow创建和管理应用程序窗口的模块。
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 并且为你的应用加载index.html
win.loadFile('index.html')
// 打开开发者工具
//win.webContents.openDevTools()
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
```
### 4.index.html文件
根目录下新建index.html文件，或放置自己项目首页index.html文件
```HTML
Document
Hello Electron!!!
```
### 5.安装electron-packager
项目根目录下安装
```
npm install electron-packager --save-dev
```
package.json 配置打包命令
“.”：需要打包的应用目录（.代表当前目录）。
“myFirstElectron”：应用名称。
“–win”：打包平台（windows平台）
" --out ./dist"“：输出目录
“–arch=x64”：64位
“–app-version=0.0.1”：应用版本
“–electron-version=4.1.4”：electron版本
```
"scripts": {
"start": "electron .",
"pack": "electron-packager . myFirstElectron --win --out ./dist --arch=x64 --app-version=0.0.1 --electron-version=4.1.4"
}
```
### 6.打包你的应用程序
执行打包命令
```npm
npm run pack
```
在项目根目录下的dist文件夹中找到resources
```
你的项目路径\dist\myFirstElectron-win32-x64\resources\app
```
把你完整项目复制进去
在项目根目录下的dist文件夹中找到myFirstElectron.exe打开即可运行