Electron 框架的前身是 Atom Shell，可以让你写使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。它是基于io.js 和 Chromium 开源项目，并用于在 Atom 编辑器中。Electron 是开源的，由 GitHub 维护，有一个活跃的社区。最重要的是，Electron 应用服务构建和运行在 Mac，Windows 和 Linux。

安装Electron

npm install electron-prebuilt -g  //cnpm install electron-prebuilt -g

安装完毕后运行

electron -v    //查看electron版本
# Clone this repository
git clone https://github.com/electron/electron-quick-start

# Go into the repository

cd electron-quick-start

# Install dependencies and run the app

npm install && npm start

Electron应用包含三部分：

1、package.json依赖文件

2、index.html应用页面

3、main.js or renderer.js主进程or渲染进程

Electron应用由主进程和渲染进程组成，主进程即main进程，主要负责和系统gui交互，渲染进程即renderer用于页面渲染，主进程和渲染进程通过ipc模块进行通信。

main.js代码：

'use strict';

const electron = require('electron');

const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

let mainWindow;

function createWindow() {

    mainWindow = new BrowserWindow({width: , height: });

     //mainWindow.loadURL(`http://www.baidu.com/`);

    mainWindow.loadURL(`file://${__dirname}/index.html`);

    //mainWindow.webContents.openDevTools();

    mainWindow.on('closed', function () {

        mainWindow = null;

    });

}

app.on('ready', createWindow);

app.on('window-all-closed', ()=> {

    if (process.platform !== 'darwin') {

        app.quit();

    }

});

app.on('activate', ()=> {

    if (mainWindow === null) {

        createWindow();

    }

});

index.html：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>我的应用</title>

</head>

<body>

we are using nodejs

<script>document.write(process.version)</script>

and Electron

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

require('./renderer.js')

</script>

</body>

</html>

最终效果：

使用Electron开发桌面应用的更多相关文章

  1. 用Electron开发桌面应用app的相关文献集锦

    1. 超棒的发声器(项目实战) 原文点此链接 2. Electron中文文档 原文点此链接

  2. Electron开发跨平台桌面程序入门教程

    最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快.我会在这一篇文章中实现一个HelloWord ...

  3. web技术开发桌面应用

    三款前端工程师桌面应用开发神器! http://mini.eastday.com/a/160630023107669-2.html 如果我告诉你,以后你们可以用前端语言(html5+css3+js)开 ...

  4. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  5. 桌面应用之electron开发与转换

    桌面应用之electron开发与转换 一,介绍与需求 1.1,介绍 1. Electron简介 Electron是用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Ele ...

  6. 使用nwjs开发桌面应用之Hello,World!

    今天发现原来JavaScript也可以用来开发桌面应用程序,顿时有一种很牛逼的感觉,于是马上就开始了Hello,World!,感受一下JavaScript的强大. 可以用来开发桌面应用的js框架有三种 ...

  7. 使用 AngularJS 和 Electron 构建桌面应用

    GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而 ...

  8. 【Electron】Electron开发入门

    Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...

  9. 使用Nwjs开发桌面应用体验

    之前一直用.net开发桌面应用,最近由于公司需要转为nodejs,但也是一直用nodejs开发后台应用,网站,接口等.近期,需要开发一个客户端,想着既然nodejs号称全栈,就试一下开发桌面应用到底行 ...

随机推荐

  1. DAY31、socket套接字

    一.复习1.网络编程 软件开发架构 b/s架构 c/s架构 本质都是c/s架构2.互联网协议 OSI七层协议 应用层 表示层 会话层 传输层 网络层 数据链路层 物理连接层3. 物理连接层:建立物理连 ...

  2. 最大子段和问题（dp）

    最大子段和问题 给出一个整数数组a(正负数都有),如何找出一个连续子数组(可以一个都不取,那么结果为0),使得其中的和最大?   例如:-2,11,-4,13,-5,-2,和最大的子段为:11,-4, ...

  3. “全栈2019”Java第七十三章：外部类里多个静态非静态内部类详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. php-fpm 操作命令

    以下内容转自 https://www.cnblogs.com/alibai/p/4070076.html 和 https://blog.csdn.net/wzx19840423/article/det ...

  5. css中的左右垂直居中的问题，可兼容各种版本浏览器的写法

    如题分为垂直居中,左右居中,先挑简单的记录. 一.左右居中 1.我刚开始写代码的时候,老师就直接告诉我一个简单的方法,那就是: width:500px; height:200px; margin:0 ...

  6. [Swift实际操作]八、实用进阶-(5)通过间接代理进行对象间的消息传递

    本文将为你演示,如何通过简介代理的方式,进行对象间的消息传递在左侧的项目导航区,打开自定义视图的代码文件(CustomView.swift). import UIKit class CustomVie ...

  7. 什么是cluster（群集）

    一.群集的概念 在互联网应用中,随着站点对硬件性能.相应速度.服务稳定性.数据可靠性等要求越来越高,单台服务器力不从心,使用小型机或大型机价格还太昂贵,因此我们使用普通服务器来构建服务群集显然最划算. ...

  8. jmeter简单的接口请求

    骤是:在测试计划下面新建一个线程组,线程组下面添加请求,再线程下加入HTTP信息头管理器(如果要求传此参数的话)请求中添加结果和断言 1.打开页面添加一个线程组: 2.线程组中设置参数: 很重要的几个 ...

  9. eclipse svn 报错 文件夹已经不存在

    最近做项目用eclipse 遇到个很奇怪的问题,前几天svn还是可以用的,突然一下子不能用了,于是网上各种找解决方法啊,终于问题解决了,总结一下. 查看svn报错信息: svn number is l ...

  10. Linux下Python3.5使用pyqt5.11报错 ImportError: /usr/local/lib/python3.5/dist-packages/PyQt5/QtCore.so: undefined symbol: PySlice_AdjustIndices 解决方法

    我用的Linux自带的是Python3.5版本,运行pip3 install PyQt5, 下载的是PyQt5.11,运行PyQt5程序会报错: ImportError: /usr/local/lib ...