Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

又简单得尝试了 Electron #62

Open
YIXUNFE opened this issue Mar 10, 2016 · 9 comments
Open

又简单得尝试了 Electron #62

YIXUNFE opened this issue Mar 10, 2016 · 9 comments
Labels
围观 开胃菜 涨姿势

Comments

@YIXUNFE
Copy link
Owner

YIXUNFE commented Mar 10, 2016

又简单得尝试了 Electron

这篇文章接上一篇，这里主要讲讲学习 Electron 的一些心得。


## 关于 Electron

Electron 和 node-webkit 属于同类型产品，都致力于使用 Web 技术开发不同操作系统上的本地应用。而且他们都是由 Node.js 和 Chromium 结合而成。

另外与 node-webkit 类似的是，Electron 也有过其他名字——Atom Shell，不同的是 node-webkit 这个名字已经是过去时，现在叫 NW。

关于 Electron 与 node-webkit 的不同之处，官方有一篇文章做出了回答，戳这里

  • 应用程序实例。Electron 中以 JS 文件作为一个实例，通过 API 打开窗口并加载 HTML 文件；
  • 构建系统，Electron 使用 libchromiumcontent 打包；
  • Node 整合，Electron 整合 libuv 循环与平台的消息循环，避免修改 Chromium；
  • 多重上下文，Electron 使用 node 的 multi-context 功能实现多重上下文。

## 运行

继续以 hello world 为例。

在下载完 Electron 后，编写 3 个文件，嗯，这比 node-webkit 多一份文件嘛！

配置文件 package.json

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

用于运行应用的 main.js

'use strict';

const electron = require('electron');
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.

// 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.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function() {
  // On OS X 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();
  }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // 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.
    mainWindow = null;
  });
});

迷之心声：好长啊，幸好我是复制黏贴的。这里面的代码有点类似 Phonegap 启动页呢。

用于绘制界面的 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>

命令行执行

electron .

由于下载的是 Windows 下的 exe 文件，所以就通过设置环境变量直接调用了 electron 命令。

效果如图：

000


## 打包

Electron 的打包方式可以使用 electron-packager 完成。

npm install electron-packager -g

然后执行 electron-packager 命令。

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<Electron version> [optional flags...]

打包完成的 app 会放在 <out>/<appname>-<platform>-<arch> 目录下，这个路径可以通过 optional flags 修改。

optional flags 配置说明


## Thanks
@jincdream
Copy link

.. 干货呢？。 electron 唯一不爽的是编译包下载太慢饿了。。

@YIXUNFE
Copy link
Owner Author

YIXUNFE commented Mar 10, 2016

上面的同学你实在是太快了，现在只是暂时先开个issue，准备等周末了再补文章的。 😂

This was referenced Mar 14, 2016
Open
Open
@q545244819
Copy link

坐等更新啊！

@tinyoculus
Copy link

已开胃，期干货。

@YIXUNFE
Copy link
Owner Author

YIXUNFE commented Mar 16, 2016

快来投简历~ 周五分享会有现场演示哦 😂

@jincdream
Copy link


易迅现在算是tx 还是 jd？

@YIXUNFE
Copy link
Owner Author

YIXUNFE commented Mar 17, 2016

算JD的了

@YIXUNFE YIXUNFE mentioned this issue Mar 20, 2016
Open
@CommanderXL
Copy link

现在还收人不？

@YIXUNFE
Copy link
Owner Author

YIXUNFE commented Apr 6, 2016

名额已满了 😄 业务拓展后会有更多名额放出。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
围观 开胃菜 涨姿势
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@jincdream @q545244819 @CommanderXL @tinyoculus @YIXUNFE