您的位置：首页 > Web前端 > JavaScript

Electron-快速上手

2016-08-06 08:11 309 查看

Electron 学习文档

文档/引导/快速上手

[官方文档-快速上手]

快速上手

Electron可以提供丰富的操作系统接口，使用户利用纯JavaScript来创建桌面应用。Electron可以看做是Node.js的一种桌面应用的运行，而非网页服务。

Electron并不是捆绑了图形用户界面(GUI)的JavaScript程序。相反，Electron利用网页作为GUI，可以看做是由JavaScript控制的精简Chromium浏览器。

主进程

在Electron中，运行
package.json
中
main
的脚本的程序叫做主进程。主进程运行的脚本可通过创建网页展示GUI。

渲染进程

Electron使用Chromium展示网页，同时Chromium的多进程架构也被使用。每个运行在Electron的网页都有独立的进程，即渲染进程。

在主流浏览器中，网页通常运行在沙箱(sandbox)环境中，不允许连接原生资源。然而，Electron使用者可以在网页内利用Node.js的接口允许低水平的操作系统交互。

主进程与渲染进程的区别

主进程通过创建
BrowserWindow
实例来创建网页。每个
BrowserWindow
实例都在自己的渲染进程中运行网页。当一个
BrowserWindow
实例被破坏，对应的的渲染进程也会中断。

主进程管理所有的网页和网页对应的渲染进程。每个渲染进程都是独立工作的，只关心运行在其中的网页，与其他渲染进程毫无关联。

由于在网页中管理原生GUI资源很危险，并且会造成资源泄露，所以不允许调用原生GUI相关的接口。如果想要在一个网页内执行GUI操作，必须以利用网页的渲染进程连接主进程，请求让主进程执行GUI操作的方式执行。

Electron有几种方式实现渲染进程与主进程的连接。例如
ipcRenderer
和[
ipcMain
][4]用来发送消息，remote模块可以实现RPC通信。还有一个常见问题：[如何实现网页间的数据共享][6]。

创建你的第一个Electron应用

通常，一个Electron应用的结构如下：

your-app/
├── package.json
├── main.js
└── index.html


实际上
package.json
的格式与Node的模块相同，
main
指定的是应用的启动脚本，即主进程。一个
package.json
例子如下：

{
"name"    : "your-app",
"version" : "0.1.0",
"main"    : "main.js"
}


注意：如果
package.json
中
main
没有指定脚本，Electron则会尝试加载
index.js
文件。

main.js
用来创建窗口和处理事件，例如：

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

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`)

// Open the DevTools.
win.webContents.openDevTools()

// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})

app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.


index.html
是被展示的网页：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <s
4000
cript>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>


运行程序

创建好初始化文件
package.json
、
main.js
和
index.html
就可以启动程序了。

electron-prebuilt

electron-prebuilt
是一个包含了Electron预编译版本的npm模块。

国内可使用淘宝镜像全局安装，
-g
为全局选项：

sudo ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install -g electron-prebuilt


若失败可去掉全局选项
-g
运行，运行后再执行全局安装命令即可成功：

sudo ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm install electron-prebuilt
sudo ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm -g install electron-prebuilt


全局安装后即可在项目目录下启动程序：

electron .


局域安装用以下命令启动:

./node_modules/.bin/electron .


通常
npm
安装目录为
/usr/local/bin
，则上述命令为：

/usr/local/bin/electron .


手动下载Electron版本文件

可以用下载的Electron版本文件执行程序。

Windows

\electron\electron.exe your-app\


Linux

./electron/electron your-app/


macOS

./Electron.app/Contents/MacOS/Electron your-app/


Electron.app
即为Electron版本文件，点击下载。

可通过淘宝npm镜像下载。

作为发布版本运行

完成应用后，可按照[url=>http://electron.atom.io/docs/tutorial/application-distribution“>发布应用创建发布版本，并执行打包的应用。

实例

克隆并运行[electron/electron-quick-start][11]版本库。

注意：需要系统装有
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Electron 桌面应用 javascript 文档
相关文章推荐
新的分享
章节导航