Electron-快速上手

来源：互联网发布：通讯录软件哪个好编辑：程序博客网时间：2024/05/24 07:13

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 winfunction 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 <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>

运行程序

创建好初始化文件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-prebuiltsudo 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镜像下载。

作为发布版本运行

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

实例

克隆并运行[electron/electron-quick-start][11]版本库。
注意：需要系统装有Git和Node.js (内置npm)。

# Clone the repository$ git clone https://github.com/electron/electron-quick-start# Go into the repository$ cd electron-quick-start# Install dependencies and run the app$ npm install && npm start

获取更多实例，可查看由牛逼的Electron社区创建的样本列表。

本文为原创文章，转载请写明出处，谢谢。

0 0