您的位置:起点软件下载编程开发编程工具electron Windows版 v2.0.2 官方版

electron Windows版 v2.0.2 官方版electron Windows版 v2.0.2 官方版

软件大小:61.6M

软件官网:HomePage

用户评分:

软件类型:绿色软件

运行环境:Win All

软件语言:简体中文

软件分类:编程工具

更新时间:2019/1/12

授权方式:免费软件

插件情况:无 插 件

平台检测 无插件 360通过 腾讯通过 金山通过 瑞星通过
编程工具
electron是GitHub最新发布的一款功能强大的桌面应用开发工具。electron官方版小巧实用,具有极强的可持续性开发性,它主要为用户提供了一个完整的框架,你可以通过将Chromium和Node.js合并到同一个运行时环境,并利用JavaScript, HTML和CSS来构建能够运行于Windows、macOS、Linux系统之上桌面应用,2.0以上版本遵循semver标准,使得软件开发更加高效灵活。

electron

【基本介绍】

Electron是一个开源的跨平台开发框架,整合了Node.js、Chromium和V8,让开发者可以使用HTML、CSS和JavaScript编写跨平台桌面应用,使用Electron开发的应用不仅可以在Windows、Linux以及Mac平台下运行,还拥有自动更新、崩溃报告、调试分析等功能,目前微软、Facebook、Stack和Docker等多家公司都在使用Electron。

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器。

【软件特点】

Web 技术
Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。
开源
Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。
跨平台
Electron 兼容 Mac, Windows 和 Linux, 它构建的应用可在这三个操作系统上面运行。

【软件功能】

自动更新
原生的菜单和通知
崩溃报告
调试和性能分析
Windows 安装程序

【软件亮点】

一、优点
1、它依赖于每一个Web开发者都已经熟知的Web标准,让你可以用它编写桌面软件。
2、它允许开发者专注于核心功能,electron免费版去负责软件开发中复杂的部分
3、它为桌面应用提供了多种核心功能,例如自动更新、崩溃报告、安装器创建工具和一些具体的系统功能
二、缺点
没有内置的MVC,electron免费版无法完全支持Chrome平台。

【软件进程】

主进程
在 Electron 里,运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。
渲染进程
由于 Electron 使用 Chromium 来展示页面,所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程,这样的进程我们称之为渲染进程。
在一般浏览器中,网页通常会在沙盒环境下运行,并且不允许访问原生资源。然而,Electron 用户拥有在网页中调用 io.js 的 APIs 的能力,可以与底层操作系统直接交互。
主进程与渲染进程的区别
主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的,并且只关心他们自己的网页。
由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露,所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。
在 Electron,我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

【安装教程】

方式一:通过npm进行安装
通过那npm进行安装比较简单,但是要注意的是,npm是安装node时附带的包管理器,所以你需要先安装node

将下载的zip包解压打开,可以看到其目录结构,如下图所示,里面是node的相关文件,其中有几个文件需要了解下:node.exe,npm,README】,
node.exe是执行程序,双击就可以运行
npm是包管理器,通过他我们可以下载各种我们需要的包,需要你的模块
README是对于node的说明,由于是英文,看不懂的话,可以翻阅中文文档

双击目录中的nsa个绿色的node.exe文件 ,他就是nodejs的可执行文件,开始运行node,然后会弹出一个doc框出来,我在里面随便输入了些javascript代码,运行结果如下。


安装完node,就可以执行命令来安装electron了,如下:
npm install electron -g
提醒:
如果通过npm来安装在国内可能比较慢,推荐安装cnpm,使用淘宝镜像来安装我们的electron.安装cnpm的命令如下:
npm install -g cnpm –registry=https://registry.npm.taobao.org
安装完成后可以输入cnpm -v 来查看是否安装成功,显示了版本号就代表成功了。
用cnpm来安装electron和用npm来安装electron几乎没什么区别,就是把npm改为cnpm即可
命令:cnpm install -g cnpm –registry=https://registry.npm.taobao.org
当然,安装cnpm不是必须的,你也可以不安装cnpm,直接用npm来安装electon也行


方式二:通过下载electron压缩包来使用electron
下载electron的zip压缩包,在本地解压

复制解压文件的electero.exe文件所在路径(electron.exe不要复制进来了)

将这个路径配置到环境变量中

【环境配置】

Windows 开发环境配置
首先,安装最新版本的Node.js 。 我们推荐您安装最新的 长期支持版本 或者 当前发行版本 。 访问Node.js下载页面,选择Windows Installer。 下载完成后, 执行安装程序,根据引导完成安装即可。
在安装过程中的配置界面, 请勾选Node.js runtime、npm package manager和Add to PATH这三个选项。
安装完成后,我们需要来确认Node.js是不是可以正常工作。 点击 开始 按钮,输入PowerShell,找到Windows PowerShell。 打开PowerShell或其他你喜欢的命令行客户端后,通过以下命令来确认 node 和 npm已经安装成功:

# 下面这行的命令会打印出Node.js的版本信息
node -v
# 下面这行的命令会打印出npm的版本信息
npm -v
Copy

如果上述命令均打印出一个版本号,就说明Node.js已经安装好了! 然后,你只需要安装一个适合JavaScript开发的代码编辑器就可以开始开发工作了。

【使用教程】

Electron 应用的目录结构
大体上,一个 Electron 应用的目录结构如下:
electron-app/
├── package.json
├── main.js
└── index.html
即主要需要三个文件,下面来分别接收每个文件的作用:
package.json //主要用来描述我们的electron项目的一些信息
index.html //也就是我们的网页文件,也就是要用来打包为桌面应用的文件。
main.js  //用于创建窗口,把网页ui放到窗口里面来去,同时处理系统时间,

构建一个真正的electron应用
我们要依次创建package.json,index.html,main.js这三个文件

首先来创建package.json文件,主要描述一些项目信息,基本代码如下:
{
"name"    : "electron-app",
"version" : "0.1.0",
"main"    : "main.js"
}
name表示项目名称,version表示项目版本。
main表示我们应用的启动脚本,它运行在主进程上
(关于进程,文章末尾来讲,现在先不管他)
注意:
1. package.json文件的最后一个键值对的值不要在加逗号,不然会报错。
这里也就是指【"main"    : "main.js"】这个键值对。
2. 注如果 main 字段没有在 package.json 声明,Electron会优先加载 index.js


然后我们开始创建 main.js文件 ,
用于创建窗口,把网页ui放到窗口里面来去,同时处理系统时间,
代码如下:

const electron = require('electron');
const app = electron.app; // 控制应用生命周期的模块。
const BrowserWindow = electron.BrowserWindow;// 创建原生浏览器窗口的模块
// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
// window 会被自动地关闭
var mainWindow = null;
// 当所有窗口被关闭了,退出。
app.on('window-all-closed', function() {
// 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前
// 应用会保持活动状态
if (process.platform != 'darwin') {
app.quit();
}
});
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载应用的 index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打开开发工具
mainWindow.openDevTools();
// 当 window 被关闭,这个事件会被发出
mainWindow.on('closed', function() {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 但这次不是。
mainWindow = null;
});
});


最后我们来创建,index.html文件,即要显示的内容

代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>


ok,所需的必须文件全部创建


开始运行,运行主要又两种方式
方式一:
在你的项目electron-app目录下,打开cmd窗口,执行electron . 这样应该就能跑起来了
如下图所示:

方式一:
打开cmd窗口,输入electron,会弹出electron的窗体来,
如下图所示,然后你复制下框中的electron.exe的路径,然后后面加一个空格在输入你的electron-app目录路径即可运行,
在我的电脑上的命令如下,每个人的电脑上肯定都不一样:
F:\installPackages\node-v9.9.0-win-x64\node_modules\electron\dist\electron.exe D:\webs\electron-app
然后就运行起来了。
注意:
如果你是直接下载electron压缩文件来使用的话,可能弹出的框不太一样,你可以直接拖动main.js进入到electron的弹框里面就能运行。


【使用实例】

如何将elecron应用打包为安装包?
我们可以使用Grunt打包Electron,生成exe的安装包

过程如下:
1. 新建一个package.json
2. 安装grunt-electron-installer
cnpm install grunt-electron-installer --save-dev
3. 安装grunt
cnpm install grunt --save-dev
4. 新建Gruntfile.js文件
5. 执行grunt进行打包

1.新建package.json文件,内容如下
{
"name": "electron-app",
"version": "0.1.0",
}

2. 安装grunt-electron-installer
执行命令:cnpm install grunt-electron-installer --save-dev

3. 安装grunt
执行命令:cnpm install grunt -g && cnpm install grunt -D

4. 新建Gruntfile.js文件
代码如下:
var grunt = require("grunt");
grunt.config.init({
pkg: grunt.file.readJSON('package.json'),
'create-windows-installer': {
x64: {
appDirectory: './appName-win32-x64',
authors: 'zhanglu.',
exe: 'appName.exe',
description:"electron-app",
}
}
})
grunt.loadNpmTasks('grunt-electron-installer');
grunt.registerTask('default', ['create-windows-installer']);
5. 执行grunt进行打包为安装包
准备工作都完成之后,在outName目录下执行grunt就可以了
(执行中,最好退出360,电脑管家,毒霸等软件,可能会造成干扰)
打包完成后会在outName目录下生成installer文件夹,如下图:

【快捷键】

本地快捷键
您可以使用 [Menu] 模块来配置快捷键,只有在 app 处于焦点状态时才可以触发快捷键。 为此,在创建 MenuItem时必须指定一个 [accelerator] 属性。

你还可以在操作系统中配置不同的组合键。


全局快捷键


在浏览器窗口内的快捷方式
如果你想处理 BrowserWindow中的键盘快捷键,你可以监听渲染进程中 window 对象的 keyup 和 keydown 事件。

在调度页面中的keydown和keyup事件之前,会发出before-input-event事件。 它可以用于捕获和处理在菜单中不可见的自定义快捷方式。
如果您不想手动进行快捷键解析,可以使用一些库来进行高级的按键检测。例如 mousetrap.

【相关问题】

Electron新版本多久发布一次?
Electron的版本发布相当频繁。每当Chromium、Node.js有重要的bug修复,新API或是版本更新时Electron会发布新版本。
一般Chromium发行新的稳定版后的一到两周之内,Electron中Chromium的版本会对其进行更新,具体时间根据升级所需的工作量而定。
一般Node.js发行新的稳定版一个月后,Electron中Node.js的版本会对其进行更新,具体时间根据升级所需的工作量而定。

Electron的核心理念是什么?

Electron的核心理念是:保持Electron的体积小 和 可持续性开发。
如:
为了保持Electron的小巧 (文件体积) 和可持续性开发 (以防依赖库和API的泛滥) ,Electron限制了所使用的核心项目的数量。
比如Electron只用了Chromium的渲染库而不是其全部组件。 这使得升级Chromium更加容易,但也意味着Electron缺少了Google Chrome里的一些浏览器相关的特性。
添加到Electron的新功能应该主要是原生 API。 如果可以的话,一个功能应该尽可能的成为一个Node.js模块。

大家都喜欢

  • 电脑软件
  • 手机软件
更多>

用户评论

(您的评论需要经过审核才能显示)0人参与,0条评论
140

最新评论

还没有评论,快来抢沙发吧!

请简要描述您遇到的错误,我们将尽快予以修订

返回顶部