关闭

Lesson 1: Electron应用的代码结构

标签: javascriptelectron
176人阅读 评论(0) 收藏 举报
分类:
  1. Electron 简介
    Electron 是由 GitHub 维护的,基于io.js 和 Chromium的开源项目 。使用 JavaScript,HTML 和 CSS 构建运行在 Mac,Windows 和 Linux跨平台的桌面应用程序。

  2. Electron的基本文件结构
    Electron最简单的一个程序有三个文件,package.json, main.js和index.html。
    app/
    ├── package.json
    ├── main.js
    └── index.html

2.1) package.json的格式和node.js模式的格式完全相同,且该脚本里指定main.js作为整个App的启动脚本,其结构如下:

    {
         "name"    : "your-app",
         "version" : "0.1.0",
         "main"    : "main.js"
    }
    /*!!!注意!!! 如果在package.json中没有定义main.js,Electron则会尝试加载index.js文件.*/

2.2) main.js用于创建窗口和处理系统事件,一个典型的
的例子:

const electron = require('electron');
/* 用于控制App生命周期的模块*/
const {app} = electron;
/*用于创建native浏览器窗口的模块*/
const {BrowserWindow} = electron;

/*使用let关键字将win保存为全局窗口对象,以避免JavaScript在进行对象垃圾回收的时候将窗口自动关闭了*/
let win;
function createWindow() {
  /*创建native浏览器窗口.*/
  win = new BrowserWindow({width: 800, height: 600});

  /*加载app中的index.html.*/
  win.loadURL(`file://${__dirname}/index.html`);

  /* 打开开发工具 DevTools.*/
  win.webContents.openDevTools();

  /* 浏览器窗口关闭后发出关闭消息.通常用于监听关闭事件*/
  win.on('closed', () => {
    /* 间接引用窗口对象,通常情况下应该将该窗口保存起来,以作它用*/ 
    /*如果你的App支持多个窗口,则此时你应该移除与窗口对应的每一个element*/
    win = null;
  });
}

/*该函数将会在Electron初始化完成,并且即将准备创建浏览器窗口的时候调用.*/
 /* 部分API只能在该事件生效后才能被调用*/
app.on('ready', createWindow);

 /* 当所有窗口被关闭后,退出程序.*/
app.on('window-all-closed', () => {
 /* 在OS X下,除非用户明确的使用Cmd + Q键退出App,否则应用将仍然会保留按钮栏,这是所有程序的共性*/
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  /* 在OS X下, 当DOCK上的图标显示为被点击状态下,重新创建一个窗口时,将不会有新的窗口被打开,这是所有程序的共性*/
  if (win === null) {
    createWindow();
  }
});
/*在该文件下,你可以包含你App中定义的其他主要程序代码。当然 ,你也可以考虑把他们分离到一个新的.js文件下,并在main.js里面通过require 的形式加载进来*/

2.3) index.html 用于描述你想在网页中看到的内容:

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>
0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:191次
    • 积分:12
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档