Lesson 1: Electron应用的代码结构

原创 2016年06月02日 11:49:40
  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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Angular+Electron+VSCode的桌面应用开发入门笔记(1)

第一部分 Electron开发入门笔记 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用。它...

数据结构—中缀表达式转后缀表达式算法及实现—栈的应用—计算表达式(C++代码实现)(1)

理论: (这部分很重要,看明白了,可以写出实现算法) 表达式的表示形式有中缀、前缀和后缀3中形式。中缀表达式按操作符的优先级进行计算(后面代码实现只包括+、-、*、\,小括号),即数学运算。 后缀表...

第3篇TinyOS/NesC程序的基本结构和入手写法(教程lesson 1 blink)

和大家一样,我是按照 ../tinyos/cygwin/opt/tinyos-1.x/doc/tutorial 中的8个lesson进行操作和学习的。虽然很痛苦,可是还真没有什么别的更好的方法来学习...

gdb学习step by step lesson 1 : 显示代码内容

先贴一下我用来示范的程序,我们主要通过这段代码来step by step地学习gdb的使用.如果你想花15分钟学习,这不是你应该用的;如果你只是想对gdb有个简单的了解,这也不是你想要的; 如果你想对...

lesson1: 二次学习C——解读C语言的基本结构

重新学习C语言——解读C语言的基本结构

IOS 视频直播/智能家居(一行行敲代码,从零开始)lesson:1整体架构

前段时间由于工作需要做了一个视频直播/智能家居类的应用。算是对IOS音视频专栏中流媒体处理做了一次小结。这里想把整个开发流程纪录下来,一方面是和大家共同探讨学习,另一方面也可以方便自己以后查漏补缺。 ...

Tensorflow lesson 1---第一个机器学习的代码

神经网络,机器学习,可以说是现在最流行的计算机技术,TensorFlow是谷歌开源的机器学习框架,听起来就很高大上,很难学习,不幸的是国内的一些教程都是原文翻译谷歌官方教程,非常难以学习,所以本系列教...

Java程序设计—孙鑫java无难事教程Lesson1《java技术与应用》

Java程序设计—孙鑫java无难事教程Lesson1《java技术与应用》 1.Java语言特性 简单的、面向对象的、健壮的、安全的、解释的、与平台无关的、多线程的、动态语言的。 2.Ja...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)