使用Electron开发桌面应用

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>

最终效果: 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏后端云

Collectd 和 InfluxDB 的部署和使用

$ sudo apt-get update $ sudo apt-get upgrade $ sudo reboot

1235
来自专栏晓晨的专栏

IdentityServer(15)- 第三方快速入门和示例

1366
来自专栏JadePeng的技术博客

jenkins X实践系列(2) —— 基于jx的DevOps实践

jx是云原生CICD,devops的一个最佳实践之一,目前在快速的发展成熟中。最近调研了JX,这里为第2篇,使用已经安装好的jx来实践CICD,旨在让大家了解基...

852
来自专栏有困难要上,没有困难创造困难也要上!

在VirtualBox上使用Bosh部署Cloud Foundry

2997
来自专栏散尽浮华

完整部署CentOS7.2+OpenStack+kvm 云平台环境(2)--云硬盘等后续配置

继上一篇博客介绍了完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建,本篇继续讲述后续部分的内容  1 虚拟机相关 1.1...

2949
来自专栏c#开发者

BizTalk开发小技巧-.Net 调用BizTalk Business Rule Engine

BizTalk开发小技巧-.Net 调用BizTalk Business Rule Engine BizTalk Business Rule Engine:B...

2689
来自专栏恰同学骚年

.NET Core微服务之基于IdentityServer建立授权与验证服务(续)

上一篇我们基于IdentityServer4建立了一个AuthorizationServer,并且继承了QuickStartUI,能够成功获取Token了。这一...

1545
来自专栏恰同学骚年

.NET Core微服务之基于Ocelot+IdentityServer实现统一验证与授权

  这里,假设我们有两个客户端(一个Web网站,一个移动App),他们要使用系统,需要通过API网关(这里API网关始终作为客户端的统一入口)先向Identit...

1894
来自专栏晓晨的专栏

IdentityServer(14)- 使用EntityFramework Core配置和操作数据

2013
来自专栏c#开发者

Biztalk 调用带Soap Head WebService的方法

    前天有位网友正好也提到了类似的问题,正好以前我也作过这方面的项目;在Biztalk Orchestration中调用对方发布的WebService;但必...

3276

扫码关注云+社区