文档章节

使用Electron开发桌面应用

c
 caiyezi
发布于 2016/11/08 20:23
字数 334
阅读 91
收藏 0

Electron 框架的前身是 Atom Shell,可以让你写使用 JavaScriptHTML 和 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: 800, height: 600});
     //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>

最终效果: 

本文转载自:http://www.cnblogs.com/vipzhou/p/5552025.html

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
用Electron创建跨平台应用(第一弹)

用Electron创建跨平台应用连载目录: 用Electron创建跨平台应用(第一弹) 用Electron创建跨平台应用(第二弹)开启多窗口 用Electron创建跨平台应用(第三弹)开启系统通知 Electron是GitHub开发的...

木子昭
08/27
0
0
统治 Web 的 JavaScript 准备要接管桌面了

编者按:曾几何时,通信网络曾经活跃过许多协议,那些协议在不同的场景下都有各自的优势。但是后来 TCP/IP随着互联网的崛起而异军突起,最终形成一统天下的格局。而原本被视为不入流的 Web ...

oschina
2016/05/15
10.7K
48
使用Electron构建跨平台的抓取桌面程序

使用Electron构建跨平台的抓取桌面程序 谈起桌面应用开发技术, 我们会想到.Net下的WinForm, Java下的JavaFX以及Linux下的QT. 这些技术对于Web应用程序员来说一般比较陌生, 因为大多Web应用程...

ybak
2016/09/17
1K
2
一口气完成electron的入门学习

介绍 目前,使用前端技术开发桌面应用已经越来越成熟,这使得前端同学也可以参与桌面应用的开发。目前类似的工具有electron,NW.js等。这里我们着重介绍下electron。 electron开发 electron...

chenhao_ch
2017/11/29
0
0
Vue开发跨端应用之环境搭建教程

前言: 基于vue开发一款跨三端的简单环境,使用electron开发桌面程序,使用cordova开发移动应用 环境安装: electron-vue:基于vue的electron版本(用于开发桌面应用程序) cordova:打包app...

侞婼冇罪
2017/12/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
8
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
4
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部