文档章节

使用Electron开发桌面应用

c
 caiyezi
发布于 2016/11/08 20:23
字数 334
阅读 95
收藏 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
使用Electron构建跨平台的抓取桌面程序

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

ybak
2016/09/17
1K
2
Vue开发跨端应用之环境搭建教程

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

侞婼冇罪
2017/12/14
0
0
统治 Web 的 JavaScript 准备要接管桌面了

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

oschina
2016/05/15
10.8K
48
一口气完成electron的入门学习

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

chenhao_ch
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker Java API 选型

因为工作原因需要使用Java调用装有docker环境的机器完成打镜像 上传镜像库的操作,进过调查,发现了两个比较常用的Java API工具,分别是 docker-java 和 spotify-docker-client,Github地址分...

MrPei
12分钟前
1
0
关ASCII码中的特殊字符10和13

10 : 是 LF 即 "\n" 13:是CR 即 "\r" 在不同的操作系统中,表示的方式是不一样的。在UNIX系统中,换行符使用"\n" , 在 windows 系统中换行使用 "\r\n"; 在旧版macOS中换行使用回车符"/r",...

Canaan_
14分钟前
1
0
MaxCompute 表(Table)设计规范

表的限制项 表(Table)设计规范 表设计主要目标 表设计的影响 表设计步骤 表数据存储规范 按数据分层规范数据生命周期 按数据的变更和历史规范数据的保存 数据导入通道与表设计 分区设计与逻辑...

阿里云官方博客
21分钟前
1
0
border实现等高布局

效果图 实现上图效果的全部html+css代码 <div class="box"> <nav> <h3 class="nav">导航1</h3> <h3 class="nav">导航2</h3> </nav> <section> <div cla......

呵呵闯
31分钟前
1
0
MaxCompute 表(Table)设计规范

表的限制项 表(Table)设计规范 表设计主要目标 表设计的影响 表设计步骤 表数据存储规范 按数据分层规范数据生命周期 按数据的变更和历史规范数据的保存 数据导入通道与表设计 分区设计与逻辑...

阿里云云栖社区
38分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部