个人electron教程系列

一. 安装

1.安装node.js

推荐下载LTS版本(当前为10.16.3), 默认安装便可.json

2.安装yarn

以管理员模式启动cmd, 执行指令:windows

npm install yarn -g

根据官网介绍, Yarn 对你的代码来讲是一个包管理器，你能够经过它使用全世界开发者的代码，或者分享本身的代码。Yarn 作这些快捷、安全、可靠，因此你不用担忧什么。python3.x

在这里, 咱们使用yarn来代替默认的npm包管理器

注: 从这一步开始, 任何一步指令执行完成后, 都须要仔细查看cmd窗口中打印的日志.

日志中会有一些关键的提示, 好比在你执行yarn add xxx 或npm install xxx以后, 打印了以下日志

    added 253 packages from 162 contributors and audited 1117 packages in 42.157s
    found 5 vulnerabilities (1 low, 4 high)
    run `npm audit fix` to fix them, or `npm audit` for details html

就是要求用户执行npm audit fix指令, 用于检测项目依赖中的漏洞并自动安装须要更新的有漏洞的依赖，而没必要再本身进行跟踪和修复。

在接下来的教程中, 读者须要仔细观察每个步骤的日志, 及时进行修复, 本文将再也不反复提醒.

3.安装编译环境

在cmd中, 执行指令:

npm install -g windows-build-tools

这个步骤将安装python2.7和msbuild等内容.

4.设置环境变量

在cmd中, 执行指令:

npm config set python python2.7
npm config set msvs_version 2017

第一句指令, 指定了使用python2.7做为编译环境(在上一步中已经安装), electron并不支持python3.x.

在指定了环境变量以后, 用户不须要将本机中其余python卸载.

第二句指令, 指定了使用项目使用的msvs版本.

若是你的电脑中安装了VS, 须要把VS的MSBuild.exe添加到环境变量中, 具体步骤为:

右键个人电脑->属性->高级系统设置->环境变量->系统变量->编辑->新建->添加vs的MSBuild.exe目录:

"你的vs安装目录"\Microsoft Visual Studio\2017\Community\MSBuild\15.0\Bin

5.建立项目目录

新建一个文件夹, 做为你的项目根目录. 目录和路径务必不要使用任何中文, 也尽可能不要出现空格.

在cmd窗口中, 使用cd命令, 将当前目录更改成项目根目录.

6.建立项目

执行指令:

npm init -y

这一步咱们使用npm初始化了项目, 并自动在项目根目录创建了一个package.json文件, 这里咱们暂时无论这个文件, 稍后再对它进行配置.

7.安装electron

执行指令:

yarn add electron@latest --save-dev

这个指令将在你的项目中,安装electron的最新版.

若是你想要安装其余版本的electron, 就把latest修改成对应的版本号,如electron@5.0.6或electron@beta

8.修改package.json

推荐使用vscode进行编辑.

内容以下:

{
  "name": "blogs",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ./src/main.js"
  },
  "keywords": [],
  "author": "Silenzio",
  "license": "ISC",
  "devDependencies": {
    "electron": "^6.0.10"
  }
}

我已经在package.json中添加了一些内容:

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

指定了一个启动脚本, 以后能够经过这个脚原本启动你的程序, 它将用electron来启动src目录下的main.js.

还能够看到"devDependencies"中有一项"electron": ^6.0.10

这里罗列出了你安装的模块, 以及对应的版本. 当你使用yarn add或npm install安装模块后, 这里将自动更新.

9.添加main.js

在上一步中, 咱们在package.js中指定了项目启动入口: ./src/main.js.

下面咱们建立这个文件, 并添加内容:

在项目根目录下, 新建一个src目录,用于存放源码, 在src目录下, 建立main.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 导入。
// ////////////////////////////////////////////////////////

10.添加index.html

在上一步的main.js中, 咱们指定加载了一个html文件, 这个html文件, 就是程序的主页面.

在项目根目录下, 新建一个html目录,用于存放与前端有关的内容, 在html目录下, 建立index.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>

11.启动!

在前面几步中,咱们依次完成了项目的建立、初始化、electron安装、添加三个必要文件(即package.json、main.js和index.html).

如今, 咱们终于能够启动咱们的electron程序了!

确保你的工做目录为项目根目录, 并执行指令:

npm start

程序已启动!

桌面上启动了一个独立的程序, 界面的左边显示的是渲染后的index.html, 而界面的右面实际上是Chrome/Chromium浏览器的开发者选项(F12).

若是不须要开发者选项来进行调试的话, 只须要将main.js中的win.webContents.openDevTools()注释掉,再次经过npm start来启动咱们的程序.

如今, 你能够经过修改index.html, 来给程序的主界面添加一些新元素了.

原文出处：https://www.cnblogs.com/silenzio/p/11580104.html

electron教程(一): electron的安装和项目的建立