1,electron搭建

electron可以用js来创建丰富的桌面应用

一个electron应用的目录结构

your-app/

├── package.json

├── main.js

└── index.html

1，安装electron：全局安装

 npm install electron -g

2，package.json内容

{

  "name"    : "your-app",

  "version" : "0.1.0",

  "main"    : "main.js"

}

3，如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js

创建main.js文件

const electron = require('electron');
const app = electron.app;                     // 控制应用生命周期的模块。
const BrowserWindow = electron.BrowserWindow; //创建原生浏览器窗口的模块

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

//当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

//当 Electron 完成了初始化并且准备创建浏览器窗口的时候
//这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

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

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭，这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});

4，创建展示的index.html文件

<!DOCTYPE html>

<html>

  <head>

    <title>Hello World!</title>

  </head>

  <body>

    <h1>Hello World!</h1>

    We are using io.js <script>document.write(process.version)</script>

    and Electron <script>document.write(process.versions['electron'])</script>.

  </body>

</html>

5，运行应用

electron .

巴特西

1,electron搭建

最新文章

热门文章