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. asp.net(mvc) 框架

    1.NFine mvc+ef 2.Grove orm架构 3.NHibernate orm 4.NBear 5.petshop 6.Membership 7.Brnshop 网上商城 8.cms快速开 ...

  2. OCP新题库，052新加的考题及答案整理-24题

    24. YOUR DB_RECOVERY_FILE_DEST_SIZE Is 8G. Currently, 5G of the space Is used of which 4G consists o ...

  3. [Java] 编写第一个java程序

    1)先不用myEclipse编写,用txt编写,新建Test.txt:修改扩展名变为Test.java; 2)编辑,手写输入代码,保存(以保存在E盘下为例): public class Test{ p ...

  4. jquery源码解析：jQuery静态属性对象support详解

    jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...

  5. 使用beautifulsoup和pyquery爬小说

    # -*- coding:UTF-8 -*- from bs4 import BeautifulSoup #BeautifulSoup就是处理字符串的工具 import requests, sys & ...

  6. HDU4622 （查询一段字符串的不同子串个数，后缀自动机）

    http://acm.hdu.edu.cn/showproblem.php?pid=4622 题意:给出一个字符串和q次询问,每次询问[l,r]区间内不同子串的个数 分析: N<=2000. 我 ...

  7. 关于 IsLocalUrl 方法的注意事项

    用于判断是否为本地url的方法 Url.IsLocalUrl() 的注意事项: 此方法是以判断传入的url字符串的开头是否为 "/" 为依据来判断是否为本地url,所以如果传入的u ...

  8. D-Link DIR-645 信息泄露漏洞

    D-Link DIR-645 getcfg.php 文件由于过滤不严格导致信息泄露漏洞. $SERVICE_COUNT = cut_count($_POST["SERVICES"] ...

  9. Python Requests IP直连

    import re import requests from urllib3.util import connection _orig_create_connection = connection.c ...

  10. gVim安装vim-template插件后提示Undefined variable vim_template_subtype/Press ENTER or type command to continue

    Win7 64位 gVim:version 8.1.1234 vim-template:github链接 安装方式: 直接下载master的zip压缩包,解压后放入本地gVim安装目录的plugin, ...