使用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号称全栈,就试一下开发桌面应用到底行 ...
随机推荐
- Centos6.9下PXE安装centos 7
一.简介 这篇文章是无kickstart下安装centos7的,本篇大部分内容同我另外一篇文章相似,只是Centos7 中的isolinux.cfg有一些不太一样需要说明一下. https://www ...
- 二. linux基础命令
linux的基本命令一般有100多个,多练就可以了: 如果登陆用户是root,那么是#:如果是其他用户,则显示的是$ 练习:基本命令 1.创建一个目录/data mkdir /data ...
- vue.js 一些知识点
vue.js 也是试图层的运用方法,跟react的方法类似,不过也有许多的不同地方: 1.vue.js 对于数据也是用{{ }} 进行数据更新: 2.vue.js 使用 v-html 指令用于输出 h ...
- bzoj1801中国象棋
题目链接 很裸的$dp+$组合计数 注意 注意 注意 $BZOJ$不要用玄学优化 $CE$不管$qwq$ /********************************************** ...
- nginx高性能WEB服务器系列之五--实战项目线上nginx多站点配置
nginx系列友情链接:nginx高性能WEB服务器系列之一简介及安装https://www.cnblogs.com/maxtgood/p/9597596.htmlnginx高性能WEB服务器系列之二 ...
- CH2601 电路维修（双端队列bfs）建图恶心
CH2601 电路维修 双端队列bfs,其实就是因为只有0和1所以可以直接2维护队列单调性(和优先队列一个道理) 建图的过程需要仔细斟酌(想一想id为什么这么写) 还有,空间要开够(很玄学),我一开始 ...
- 你不可不知的数据库northwind
说起northwind,40左右的大年一定不会陌生,它是著名的northwind示例库,在SQL Server 是标配. 它有8张表,涉及客户.商品.订单. 如果你是有志从事企业级应用开发,或有志从事 ...
- c语言-折半查找的函数
void search(int n,int num[],char name[N][10]) { int top,bottom,middle,location,flag; top=0; bottom=N ...
- 搭建maven环境——nexus
第一步:部署maven环境和jdk环境 jdk直接用openjdk1. :yum -y install java--openjdk maven环境 wget http://mirror.rise.ph ...
- jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容
jQuery怎么获取到富文本ueditor编辑器里面的文字和图片内容 .创建编辑器 UE.getEditor('editor', { initialFrameWidth:"100%" ...