Electron初步【02】--第一个Electron App

时间 2020-01-05

标签 electron 初步第一个 app 繁體版

原文原文链接

目录结构与文件

Electron App的目录结构以下：html

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

其中的package.json和Node Modules里表现的同样，而main.js则是启动你App的脚本，它将会开启主进程。package.json的一个例子：node

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

注：当package.json里不存在main时，Electron将会默认使用index.jsgit

main.js应当建立一个窗口并处理系统事件。一个典型的例子以下：github

'use strict';

const electron = require('electron');
const app = electron.app;  // 控制App生命周期的模块
const BrowserWindow = electron.BrowserWindow;  // 建立原生窗口的模块

// 保持对窗口对象的全局引用。若是不这么作的话，JavaScript垃圾回收的时候窗口会自动关闭
var mainWindow = null;

// 当全部的窗口关闭的时候退出应用
app.on('window-all-closed', function() {
  // 在 OS X 系统里，除非用户按下Cmd + Q，不然应用和它们的menu bar会保持运行
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当应用初始化结束后调用这个方法，并渲染浏览器窗口
app.on('ready', function() {
  // 建立一个窗口
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载index.js
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开 DevTools
  mainWindow.webContents.openDevTools();

  // 窗口关闭时触发
  mainWindow.on('closed', function() {
    // 若是你的应用容许多个屏幕，那么能够把它存在Array里。
    // 所以删除的时候能够在这里删掉相应的元素
    mainWindow = null;
  });
});

最后，index.html是你最终要展现的页面web

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

运行&生成应用

经过`electron-prebuilt`运行

若是你经过npm全局安装了electron-prebuilt，那么在App文件目录下跑这句就能够运行它：chrome

electron .

若是只是在当前项目下安装了，则要跑：npm

./node_modules/.bin/electron .

经过Electron Binary运行

在这儿下载Electron二进制文件json

打开包内的App按照提示操做，或者在该文件夹下运行：浏览器

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

就能够经过这个包来运行本身的应用了。bash

生成应用

应用写完之后，能够参照Application Distribution里的指导进行打包：

项目文件名应该命名为app
下载Electron资源文件。就是上一步里面的Electron二进制文件
把项目目录放在Electron资源文件夹下

Mac OS X:

electron/Electron.app/Contents/Resources/app/
├── package.json
├── main.js
└── index.html

Windows & Linux:

electron/resources/app
├── package.json
├── main.js
└── index.html

以后运行Electron.app就能启动应用

如今，你的应用名称为默认的Electron.app（或Electron.exe），能够经过以下方式修更名称：

Windows

直接修改Electron.exe的名称

OS X

修改应用Electron.app的名称
修改文件中的CFBundleDisplayName，CFBundleIdentifier，以及CFBundleName字段。它们的所在位置：

Electron.app/Contents/Info.plist
`Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist
`

应用打包

使用asar库来替代你的app文件夹，这样能够避免暴露你的源码。

生成`asar`包

asar能够把多个文件合并成一个相似于tar的归档文件。

install

$ npm install -g asar

打包

切换到含有你项目文件夹的父级文件夹

# dev/your-app
$ cd dev

打包项目

$ asar pack your-app/ app.asar

将生成的app.asar放在：

// OS X
electron/Electron.app/Contents/Resources/
└── app.asar

// Windows & Linux
electron/resources/
└── app.asar

这样你就能够没必要放入app文件夹，并且你的代码都是封装压缩过的。

例子

按照下面步骤来运行官方案例：

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