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. 201621123023《Java程序设计》第4周学习总结

    一.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 继承.多态.覆盖.重载 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. 二.书面作业 1. 面 ...

  2. bzoj1800飞行棋

    题目链接 简单模拟 真的不敢相信ahoi09年的题竟然是这个难度 首先,一个必须要知道的定理是:圆上只有直径所对的圆周角是直角. 然后就很显然了, 只有两条不重合的直径上的四个点才能组成一个矩形, 所 ...

  3. PHP删除一个目录下的所有文件，不删除文件夹

    /*删除指定目录下的文件,不删除目录文件夹*/ function delFile($dirName){ if(file_exists($dirName) && $handle=open ...

  4. CentOS 下设置 SELinux 安全上下文

    作用: chcon 命令用来改变 SELinux 文件属性即修改文件的安全上下文 用法: chcon [ 选项 ] CONTEXT 文件 选项: -R:递归改变文件和目录的上下文. --referen ...

  5. python爬虫学习心得

    作为一名python的忠实爱好者,我开始接触爬虫是在2017年4月份,最开始接触它的时候遇到两个梗,一个是对python还不算太了解(当然现在也仍然在努力学习它的有关内容),二是对爬虫心怀一份敬畏之心 ...

  6. todocmvc的安装

    安装依赖 官网 安装依赖的css,js $npm install 引入vue <script src="js/vue.js"></script> 定义初始化 ...

  7. 主流服务器虚拟化技术简单使用——Hyper-V（一）

    Tips:因为博客园排版的原因,图片显示不清晰,可以放大网页查看清晰图片. 如果系统使用物理机,需要在BIOS里面开启Intel VT-x(或AMD-V),如果是VMware workstation, ...

  8. 51nod 1812 树的双直径 题解【树形DP】【贪心】

    老了-稍微麻烦一点的树形DP都想不到了. 题目描述 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点),使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有 ...

  9. 在 Linux 服务器上部署 nginx 之后不能访问

    原文地址:https://blog.csdn.net/lipeigang1109/article/details/73295373 解决办法:https://jingyan.baidu.com/art ...

  10. JDK,JRE,JVM的基础理解

    1.JVM -- java virtual machine JVM就是我们常说的java虚拟机,它是整个java实现跨平台的 最核心的部分,所有的java程序会首先被编译为.class的类文件,这种类 ...