使用Electron开发桌面应用
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开发桌面应用的更多相关文章
- 用Electron开发桌面应用app的相关文献集锦
1. 超棒的发声器(项目实战) 原文点此链接 2. Electron中文文档 原文点此链接
- Electron开发跨平台桌面程序入门教程
最近一直在学习 Electron 开发桌面应用程序,在尝试了 java swing 和 FXjava 后,感叹还是 Electron 开发桌面应用上手最快.我会在这一篇文章中实现一个HelloWord ...
- web技术开发桌面应用
三款前端工程师桌面应用开发神器! http://mini.eastday.com/a/160630023107669-2.html 如果我告诉你,以后你们可以用前端语言(html5+css3+js)开 ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- 桌面应用之electron开发与转换
桌面应用之electron开发与转换 一,介绍与需求 1.1,介绍 1. Electron简介 Electron是用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Ele ...
- 使用nwjs开发桌面应用之Hello,World!
今天发现原来JavaScript也可以用来开发桌面应用程序,顿时有一种很牛逼的感觉,于是马上就开始了Hello,World!,感受一下JavaScript的强大. 可以用来开发桌面应用的js框架有三种 ...
- 使用 AngularJS 和 Electron 构建桌面应用
GitHub 的 Electron 框架(以前叫做 Atom Shell)允许你使用 HTML, CSS 和 JavaScript 编写跨平台的桌面应用.它是io.js 运行时的衍生,专注于桌面应用而 ...
- 【Electron】Electron开发入门
Electron简介: Electron提供了丰富的本地(操作系统)的API,使你能够使用纯JavaScript来创建桌面应用程序,并且跨平台(win,mac,linux等各种PC端平台).与其它各种 ...
- 使用Nwjs开发桌面应用体验
之前一直用.net开发桌面应用,最近由于公司需要转为nodejs,但也是一直用nodejs开发后台应用,网站,接口等.近期,需要开发一个客户端,想着既然nodejs号称全栈,就试一下开发桌面应用到底行 ...
随机推荐
- 牛客网提高组模拟赛第五场 T1同余方程（异或）（位运算）
区间不好做,但是我们可以转化成前缀来做.转化为前缀之后之后就是二维前缀和. 但是我还是不怎么会做.所以只能去看吉老师的题解 (确定写的那么简单真的是题解???). 我们要求模一个数余0,就等于找它的倍 ...
- Echart自定义y轴刻度信息2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- “全栈2019”Java第八章：IntelliJ IDEA设置注释不显示在行首
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- scrapy下载中间件,UA池和代理池
一.下载中间件 框架图: 下载中间件(Downloader Middlewares) 位于scrapy引擎和下载器之间的一层组件. - 作用: (1)引擎将请求传递给下载器过程中, 下载中间件可以对请 ...
- jquery源码解析：expando，holdReady，ready详解
jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的. jQuery.extend({ //当只有一个对象时,就把这个对象 ...
- 【maven】maven 子项目如何使用父项目的jar包
如果父pom中使用的是 <dependencies>....</dependencies> 方式, 则子pom会自动使用pom中的jar包 如果父pom使用 <depen ...
- MD5算法分析
1. MD5是什么? MD5即Message-Digest Algorithm 5(消息摘要算法第五版)的简称,是当前计算机领域用于确保信息传输完整一致而广泛使用的散列算法之一(又译哈希算法.摘要算法 ...
- Python实现——二层BP神经网络
2019/4/23更新 下文中的正确率极高是建立在仅有50组训练数据的基础上的,十分不可靠.建议使用提供的另一个生成训练集的generate_all函数,能产生所有可能结果,更加可靠. 2019/4/ ...
- 使用cookie下次自动登录
登录时勾选了自动登录处理: 1.加密账号和IP,保存在cookie中,cookie('auto', $value, $time) 2.解密cookie,取出账号和上次IP,判断上次IP==当前IP.账 ...
- java 上传文件大小转换为 GB/MB/KB/B
1.工具类 package cn.cmodes.common.utils; import java.io.File; import java.io.FileInputStream; import ja ...