Electron学习（一）：创建第一个应用并打包成功

一、环境准备

二、创建项目

1、创建一个项目目录

shell 复制代码

mkdir electronApp && cd electronApp

2、项目初始化

shell 复制代码

npm init -y

初始化成功后会自动在项目的根目录生成一个package.json文件

json 复制代码

{
  "name": "electronapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3、安装electron

shell 复制代码

cnpm install electron --save-dev

4、修改package.json文件

添加启动脚本

"start": "electron ./src/main.js"

json 复制代码

{
  "name": "electronapp",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./src/main.js",
  },
  "keywords": [],
  "author": "zhangyb",
  "license": "ISC",
  "devDependencies": {
    "electron": "^38.3.0"
  }
}

5、创建main.js

在项目根目录下, 新建一个src目录,用于存放源码, 在src目录下, 创建main.js文件

js 复制代码

// /////////////////////////////////////////////////////////////////////////
// electron
const {app, BrowserWindow} = require('electron');

// 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被
// 垃圾回收的时候，window对象将会自动的关闭
let win;

/**
 *
 */
function createWindow() {
  // 创建浏览器窗口。
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // 加载index.html文件
  win.loadFile('../html/index.html');

  // 打开开发者工具
  // win.webContents.openDevTools();

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    win = null;
  });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (win === null) {
    createWindow();
  }
});

// 在这个文件中，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。
// ////////////////////////////////////////////////////////

6、创建index.html

在项目根目录下, 新建一个html目录,用于存放与前端有关的内容, 在html目录下, 创建index.html文件

html 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

7、项目启动

shell 复制代码

npm start

三、打包项目

1、下载资源包

1.1、下载electron-v38.3.0-win32-x64

下载路径：electron-v38.3.0-win32-x64

下载完成后放在【C:\Users\Administrator\AppData\Local\electron\Cache】目录下

1.2、下载winCodeSign-2.6.0

下载路径：winCodeSign-2.6.0

下载完解压到【C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign】目录下

1.3、下载nsis-3.0.4.1

下载路径：nsis-3.0.4.1

下载完解压到【C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis】目录下

1.4、下载nsis-resources-3.4.1

下载路径：nsis-resources-3.4.1

下载完解压到【C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis】目录下

2、安装electron-builder

shell 复制代码

cnpm install electron-builder --save-dev

3、在package.json中添加打包脚本

json 复制代码

"build": {
  "appId": "your.id",
  "productName": "electronApp"
},

在scripts中添加以下内容：

json 复制代码

"pack": " electron-builder --dir ",
"dist": " electron-builder --win --x64",
"postinstall": "electron-builder install-app-deps"

更改后的package.json文件

json 复制代码

{
  "name": "electronapp",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "./src/main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./src/main.js",
	"pack": " electron-builder --dir ",
    "dist": " electron-builder --win --x64",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "appId": "your.id",
    "productName": "electronApp"
  },
  "keywords": [],
  "author": "zhangyb",
  "license": "ISC",
  "devDependencies": {
    "electron": "^38.3.0",
    "electron-builder": "^26.0.12"
  }
}

4、编译

shell 复制代码

npm run postinstall

5、打包

shell 复制代码

npm run dist