Electron教程实例：采用electron开发桌面应用

什么是electron,能做什么？

1.electron是搭载谷歌v8内核的高性能的node环境 ，所有node能用的东西.这里都能用。

2.前端做桌面应用.

前端做桌面应用（electron, nw）

1. electron link.

官网地址： https://electronjs.org/ 

2. nw link.

https://github.com/search?q=nw&ref=opensearch

electron开发桌面端应用有哪些优点

1.Web 技术——Electron 基于 Chromium 和 Node.js, 让你可以使用 HTML, CSS 和 JavaScript 构建应用。

2.开源——Electron 是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目。

3.跨平台——Electron 兼容 Mac, Windows 和 Linux， 它构建的应用可在这三个操作系统上面运行。

electron开发比较成功的产品

atom,vscode,skype,github Desktop

electron项目和web项目的区别?

1.electron核心分两部分，主进程和渲染进程。

2.主进程连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。

3.简单理解：给web项目套上一个node环境的壳。相比web项目，桌面项目多了一个进程。process.env.IS_WEB

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。 你可以把它看作一个专注于桌面应用的 Node. js 的变体，而不是 Web 服务器。

Electron 使用 web 页面作为它的GUI，所以可以把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

electron 主进程和渲染器进程

主进程: 运行main.js脚本的进程。

渲染进程：每个Electron中的web页面运行自己的渲染进程

note: 在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

主进程和渲染进程区别

1.主进程使用 BrowserWindow 实例创建页面。

2.每个 BrowserWindow 实例都在自己的渲染进程里运行页面。

3.当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

4.主进程管理所有的web页面和它们对应的渲染进程。

5.每个渲染进程都是独立的，它只关心它所运行的 web 页面。

6.web页面中想调用原生GUI相关API,是非常危险的很容易造成资源泄露。

一般操作是 渲染进程与主进程通讯，让主进程进行相关的GUI操作。

notice:

(1).进程间通讯

main process and render processes 通讯实现方式有很多种。

如 ipcRender 和 ipcMain 模块发消息，使用remote模块进行RPC方式通讯。关于RPC https://www.zhihu.com/question/25536695?sort=created

(2).如何在两个网页间共享数据？

1.在两个网页（渲染进程）间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。 其中比较好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB。

2.你还可以用 Electron 内的 IPC 机制实现。将数据存在主进程的某个全局变量中，然后在多个渲染进程中使用 remote 模块来访问它。

// 在主进程中
global.sharedObject = {
someProperty: ‘default value’
}
// 在第一个页面中
require(‘electron’).remote.getGlobal(‘sharedObject’).someProperty = ‘new value’
// 在第二个页面中
console.log(require(‘electron’).remote.getGlobal(‘sharedObject’).someProperty)

(3)我在 Electron 中无法使用 jQuery、RequireJS、Meteor、AngularJS。

因为 Electron 在运行环境中引入了 Node.js，所以在 DOM 中有一些额外的变量，比如 module、exports 和require。 这导致 了许多库不能正常运行，因为它们也需要将同名的变量加入运行环境中。

我们可以通过禁用 Node.js 来解决这个问题，在Electron里用如下的方式：

// 在主进程中
const { BrowserWindow } = require(‘electron’)
let win = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
})
win.show()

假如你依然需要使用 Node.js 和 Electron 提供的 API，你需要在引入那些库之前将这些变量重命名，比如：

(4)为什么应用的窗口、托盘在一段时间后不见了？

这通常是因为用来存放窗口、托盘的变量被垃圾回收了。(内存管理 变量作用域)

//1.打包工具
electron-packager 其中的一种
npm install electron-packager -g
electron-packager ./electron-quick-start test --platform=win32
//2.使用自定义驱动程序进行自动化测试
electron 版本管理
npm install --save-dev electron //安装 Electron 最新稳定的版本
npm install --save-dev electron@latest //现有项目更新到最新的稳定版本
npm install --platform=win32 electron //在指定平台开发

第一个electron桌面应用

克隆这仓库

$ git clone https://github.com/electron/electron-quick-start

进入仓库

$ cd electron-quick-start

安装依赖库

$ npm install

运行应用

$ npm start

前端做桌面应用（electron, nw）

什么是electron,能做什么？ electron是搭载谷歌v8内核的高性能的node环境 ，所有node能用的东西.

https://electronjs.org/ 很多图标skype gitHub Desktop

官方文档 https://electronjs.org/docs

electron 安装？

看官方demo (electron-quick-start)

electron项目和web项目的区别?

electron核心分两部分，主进程和渲染进程。

主进程连接着操作系统和渲染进程，可以把她看做页面和计算机沟通的桥梁。渲染进程就是我们所熟悉前端环境了。只是载体改变了，从浏览器变成了window。传统的web环境我们是不能对用户的系统就行操作的。而electron相当于node环境，我们可以在项目里使用所有的node api 。

简单理解：给web项目套上一个node环境的壳。相比web项目，桌面项目多了一个进程.

process.env.IS_WEB

--------------------- 

作者：futuretodaylonggong