我的electron教程系列

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

electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

electron教程(二): http服务器, ws服务器, 子进程管理

electron教程(三): 使用ffi-napi引入C++的dll

electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)

 

一. 安装

1.安装node.js

从node.js官网下载

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

 

2.安装yarn

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

npm install yarn -g

根据官网介绍, Yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码， 或者分享自己的代码。Yarn 做这些快捷、安全、可靠，所以你不用担心什么。

在这里, 我们使用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, 来给程序的主界面添加一些新元素了.

electron教程(一): electron的安装和项目的创建的更多相关文章

  1. electron教程(四): 使用electron-builder或electron-packager将项目打包为可执行桌面程序(.exe)

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 子进程管理 electron教程(三): ...

  2. electron教程(三): 使用ffi-napi引入C++的dll

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

  3. electron教程(二): http服务器, ws服务器, 进程管理

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(二): http服务器, ws服务器, 进程管理 electron教程(三): 使 ...

  4. electron教程(番外篇二): 使用TypeScript版本的electron, VSCode调试TypeScript, TS版本的ESLint

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  5. electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google JavaScript Style Guide代码规范

    我的electron教程系列 electron教程(一): electron的安装和项目的创建 electron教程(番外篇一): 开发环境及插件, VSCode调试, ESLint + Google ...

  6. Electron – 基础学习(1): 环境安装、创建项目及入门

    这几天到年底了,公司也没啥事,闲着就到处瞅瞅.记得上一家公司的时候用 Electron+ng1 写过项目,只是那个时候项目框架都是别人搭的,自己只负责写功能,对Electron没啥认识. 这几天想着反 ...

  7. 【Electron】Electron开发入门（五）：项目打包

    一.安装 electron-packager PS:安装之前,先复制一份package.json文件到./app目录下,然后改下./app目录下package.json里 "main&quo ...

  8. 第二章 你第首个Electron应用　| Electron in Action(中译)

    本章主要内容 构建并启动Electron应用 生成package.json,配置成Electron应用 在你的项目中包含预先构建Electron版本 配置package.json以启动主进程 从主进程 ...

  9. Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用

    基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3laye ...

随机推荐

  1. Codeforces 1008D/1007B

    题意略. 思路: 由于这个长方体是可以翻转的,所以我们不必考虑小长方体3个维度的出处,反正3条边一定有长有短能分出大小. 现在我们来考虑A,B,C三个数字,如果它们3个产生的因子互不相同,分别产生了a ...

  2. JDBC之批量处理

    JDBC之批量处理 一.批量处理JDBC语句提高处理速度 当需要成批插入或者更新记录时.可以采用Java的批量更新机制,这一机制允许多条语句一次性提交给数据库批量处理.通常情况下比单独提交处理更有效率 ...

  3. Fire Balls 05——坦克和子弹的制作以及炮台发射子弹

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com/raymondking123 优梦创客的官方博客:https://91make.top ...

  4. 快速掌握SPSS数据分析

      SPSS难吗?无非就是数据类型的区别后,就能理解应该用什么样的分析方法,对应着分析方法无非是找一些参考资料进行即可.甚至在线网页SPSS软件直接可以将数据分析结果指标人工智能地分析出来,这有多难呢 ...

  5. Badboy - 导出脚本，用于JMeter性能测试

    参考: http://leafwf.blog.51cto.com/872759/1131119 http://www.51testing.com/html/00/130600-1367743.html ...

  6. 2019 HZNU Winter Training Day 13 Comprehensive Training

    A.Jongmah   CodeForces-1110D 题意:你在玩一个数字游戏,有一堆写在瓦片上的数字,希望你能组成最多的三元组(三个数字相同,或顺子). 这题用到的方法是动态规划.f[i][j] ...

  7. C++数据类型（data type）介绍

    在编写程序时,数据类型(data type)定义了使用存储空间的(内存)的方式. 程序员通过定义数据类型(data type),告诉特定存储空间这里要存储的数据类型是什么,以及你即将操作他的方式.(注 ...

  8. tomcat，nginx日志定时清理

    1. Crontab定时任务 Crontab 基本语法 t1 t2 t3 t4 t5 program 其中 t1 是表示分钟,t2 表示小时,t3 表示一个月份中的第几日,t4 表示月份,t5 表示一 ...

  9. 基于SpringBoot从零构建博客网站 - 开发文章详情页面

    文章详情页面是博客系统中最为重要的页面,登录用户与游客都可以浏览文章详情页面,只不过只有登录用户才能进行其它的一些操作,比如评论.点赞和收藏等等. 本次的开发任务只是将文章详情页面展示出来,至于一些收 ...

  10. 用户上传gif动图分解成多张帧图片，并合并生成新gif图片

    背景 为什么要制作这么一款工具 首先公司最近在做一款表情包的产品,需要将文字生成到gif图片中,并可以控制文字显示的位置,并将不同的文字显示在不同的图片上 制作成网页端工具,随时随地,方便使用 探索 ...