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 编写跨平台的桌面应用。它...
  • yr7942793
  • yr7942793
  • 2016年03月26日 14:22
  • 12435

electron开发记录(三):应用基本框架解析

这篇文章主要讲了electron应用的基本架构,并对之前下载的应用进行分析electron应用的基本架构在electron中,主要有两类进程。一类是主进程main,还有一类是渲染器进程renderer...
  • u014595019
  • u014595019
  • 2016年12月02日 16:44
  • 3624

使用 AngularJS 和 Electron 构建桌面应用

使用 AngularJS 和 Electron 构建桌面应用 GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS...
  • starzhou
  • starzhou
  • 2015年12月28日 20:56
  • 3673

(四)Electron 把boostrap控件当做桌面控件用

在入口main.js文件中,通过electron.BrowserWindow创建一个窗口,然后加载一个html文件。 mainWindow = new BrowserWindow({ fra...
  • ch15196637370
  • ch15196637370
  • 2016年04月04日 23:23
  • 1727

[转载]使用electron构建跨平台Node.js桌面应用经验分享

[转载]使用electron构建跨平台Node.js桌面应用经验分享 本文原文地址:http://www.zhangxinxu.com/wordpress/2017/05/electron-nod...
  • FungLeo
  • FungLeo
  • 2017年05月16日 11:04
  • 1229

使用Grunt 插件打包Electron Windows应用

最近利用Electron来创建跨桌面应用的趋势似乎很火。看了几个用Electron开发的应用,这些应用在windows下面的安装方式,都是类似一个绿色软件的安装方法,下载.zip->解压到相应目录->...
  • w342916053
  • w342916053
  • 2016年06月17日 17:48
  • 5452

Electron结合React开发桌面应用

# Electron结合React开发桌面应用 ## 环境搭建 前提是安装好npm和nodejs,安装以下开发环境,若安装失败则尝试翻墙或者使用淘宝镜像cnmp electron环境安装npm ins...
  • yaodong379
  • yaodong379
  • 2017年10月30日 20:25
  • 317

Electron 调用本地模块

Electron 结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口、通知、图标等,基于 Electron 的开发,就好像开发一个网页一样,而且能够无缝地使...
  • u011256637
  • u011256637
  • 2017年04月05日 21:59
  • 682

electron 的混合桌面之路 入门安装

不会C/C++的同学不要方,用JS也能写桌面程序了,虽然JS没有C++那样的性能,但是JS没有指针,没有指针,没有指针,在现在这个时代,我相信软件体积不是大问题,一百多的大小根本不是阻止electro...
  • Syudf
  • Syudf
  • 2016年09月27日 11:38
  • 4538

electron 打包web应用

时下流行的web app打包工具主要有两个,一个是国内开发者主导的nw.js,另一个是国外大厂支撑的electron。对比了nw.js以及electron之后还是选择了electron,原因主要有以下...
  • lc598470345
  • lc598470345
  • 2016年04月09日 23:05
  • 6531
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Lesson 1: Electron应用的代码结构
举报原因:
原因补充:

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