使用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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

使用Gemini构建自己的IDE

你的项目中的领域特定语言是否需要自己的IDE?Visual Studio Shell是选择之一,但是过于庞大不易部署,而且很难使用。Tim Jones的Gemi...

1886
来自专栏数据之美

Web 自动化测试与智能爬虫利器:PhantomJS 简介与实战

估计部分同学没听过这个工具,那先简单介绍下它的背景与作用。 1、PhantomJS 是什么? PhantomJS是一个基于WebKit的服务器端JavaScri...

3179
来自专栏前端人人

React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包...

4707
来自专栏转载gongluck的CSDN博客

第2章 Posix IPC

Posix IPC:(用路径名标识) ·Posix消息队列 ·Posix信号量 ·Posix共享内存 ? ? ? O_CREAT:没有指定的文件会新建一个, 如...

2674
来自专栏程序员宝库

Vue 项目 SSR 改造实战

前言 我们先看“疗效”,你可以打开我的博客 (www.u3xyz.com),通过查看源代码来看SSR直出效果。我的博客已经快上线一年了,但不吹不黑,访问量非常地...

6106
来自专栏coding...

Atom插件开发-使用自己的Chevereto图床API项目简介功能分析代码实现项目地址

最近一直在用 Atom 写写markdown,但无奈上传图片真实太麻烦了。找了好几个插件都是要用到 七牛 的账号,由于之前被七牛坑过一次,就没再想用他的打算了。...

672
来自专栏Winter漫聊技术

NowView——站酷、MONO、知乎等图文精选AppNowView 4.1

一款Android图文精选app,通过抓取网页获得图文列表。目前包含站酷(Zcool)精选、国家地理(National Geographic)每日一图、MONO...

711
来自专栏蜉蝣禅修之道

Chrome插件开发之制作豆瓣电台歌词

1483
来自专栏Android干货

安卓开发中strings.xml的使用

1885
来自专栏数据结构与算法

My Vim

noip考完啦 不管成绩怎么样,以后不用Dev啦。 尝试一下传说中的Vim 我的Vim配置 Vim8.0 https://files.cnblogs.com/f...

4127

扫码关注云+社区