文档章节

使用Electron开发桌面应用

c
 caiyezi
发布于 2016/11/08 20:23
字数 334
阅读 88
收藏 0
点赞 0
评论 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构建跨平台的抓取桌面程序 谈起桌面应用开发技术, 我们会想到.Net下的WinForm, Java下的JavaFX以及Linux下的QT. 这些技术对于Web应用程序员来说一般比较陌生, 因为大多Web应用程...

ybak ⋅ 2016/09/17 ⋅ 2

统治 Web 的 JavaScript 准备要接管桌面了

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

oschina ⋅ 2016/05/15 ⋅ 48

一口气完成electron的入门学习

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

chenhao_ch ⋅ 2017/11/29 ⋅ 0

Vue开发跨端应用之环境搭建教程

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

侞婼冇罪 ⋅ 2017/12/14 ⋅ 0

【前端】网页多平台桌面打包工具 electron 和 electron-packager 的使用

前言 现在很多平台上的桌面应用,都是直接通过js项目打包的。我在一个项目桌面项目的源码中,找到了一个打包工具,叫做。 下面通过实际部署,学习下这个工具的使用。 教程 electron是什么 El...

diandianxiyu ⋅ 04/30 ⋅ 0

electron 学习总结

1.Electron指南 - 快速入门(http://www.tuicool.com/articles/jYfuQfI) 2.使用 Electron 构建桌面应用(https://zhuanlan.zhihu.com/p/20225295?columnSlug=FrontendMagazine) 3.使用 Angula......

IT追寻者 ⋅ 2016/10/25 ⋅ 0

Webpack实战-构建 Electron 应用

认识 Electron Electron 可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的。 Electron 是 Node.js ...

⋅ 2017/12/24 ⋅ 0

Electron流行开源框架存漏洞 github受影响

  【IT168 资讯】Electron 是一个由node.js,V8和Chromium构成的开源框架,该框架已被广泛用于流程的桌面应用程序,包括Github桌面,WordPress等;研究员发现通过错误配置,将允许恶意应用程...

安全加 ⋅ 05/17 ⋅ 0

mac 安装nodejs & electron 环境开发桌面应用

01下载node安装包 https://github.com/electron/electron Electron 是 Github 发布跨平台桌面应用开发工具,支持 Web 技术开发桌面应用开发,其本身是基于 C++ 开发的,GUI 核心来自于 Chro...

极客脑司机 ⋅ 2017/07/13 ⋅ 1

Dive Into Code: VSCode 源码阅读(一)

作者简介 zqlu 蚂蚁金服·数据体验技术团队 VS Code 是一款新的工具,它将代码编辑器的简洁和程序开发人员在开发-构建-调试流程中所需要的工具结合在一起。Code 提供了全面的编辑和调试功能支...

蚂蚁金服数据体验技术 ⋅ 04/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

NFS介绍 NFS服务端安装配置 NFS配置选项

NFS介绍 NFS是Network File System的缩写;这个文件系统是基于网路层面,通过网络层面实现数据同步 NFS最早由Sun公司开发,分2,3,4三个版本,2和3由Sun起草开发,4.0开始Netapp公司参与并主导...

lyy549745 ⋅ 32分钟前 ⋅ 0

Spring AOP 源码分析 - 筛选合适的通知器

1.简介 从本篇文章开始,我将会对 Spring AOP 部分的源码进行分析。本文是 Spring AOP 源码分析系列文章的第二篇,本文主要分析 Spring AOP 是如何为目标 bean 筛选出合适的通知器(Advisor...

java高级架构牛人 ⋅ 55分钟前 ⋅ 0

HTML-标签手册

标签 描述 <!--...--> 定义注释。 <!DOCTYPE> 定义文档类型。 <a> 定义锚。超链接 <abbr> 定义缩写。 <acronym> 定义只取首字母的缩写。 <address> 定义文档作者或拥有者的联系信息。 <apple......

ZHAO_JH ⋅ 56分钟前 ⋅ 0

SylixOS在t_main中使用硬浮点方法

问题描述 在某些使用场景中,应用程序不使用动态加载的方式执行,而是跟随BSP在 t_main 线程中启动,此时应用代码是跟随 BSP 进行编译的。由于 BSP 默认使用软浮点,所以会导致应用代码中的浮...

zhywxyy ⋅ 今天 ⋅ 0

JsBridge原理分析

看了这个Github代码 https://github.com/lzyzsd/JsBridge,想起N年前比较火的Hybrid方案,想看看现在跨平台调用实现有什么新的实现方式。代码看下来之后发现确实有点独特之处,这里先把核心的...

Kingguary ⋅ 今天 ⋅ 0

Intellij IDEA神器常用技巧五-真正常用快捷键(收藏级)

如果你觉得前面几篇博文太啰嗦,下面是博主多年使用Intellij IDEA真正常用快捷键,建议收藏!!! sout,System.out.println()快捷键 fori,for循环快捷键 psvm,main方法快捷键 Alt+Home,导...

Mkeeper ⋅ 今天 ⋅ 0

Java 静态代码分析工具简要分析与使用

本文首先介绍了静态代码分析的基本概念及主要技术,随后分别介绍了现有 4 种主流 Java 静态代码分析工具 (Checkstyle,FindBugs,PMD,Jtest),最后从功能、特性等方面对它们进行分析和比较,...

Oo若离oO ⋅ 今天 ⋅ 0

SpringBoot自动配置小记

spring-boot项目的特色就在于它的自动配置,自动配置就是开箱即用的本源。 不过支持一个子项目的自动配置,往往比较复杂,无论是sping自己的项目,还是第三方的,都是如此。刚接触会有点乱乱...

大_于 ⋅ 今天 ⋅ 0

React jsx 中写更优雅、直观的条件运算符

在这篇文字中我学到了很多知识,同时结合工作中的一些经验也在思考一些东西。比如条件运算符 Conditional Operator condition ? expr_if_true : expr_if_false 在jsx中书写条件语句我们经常都...

开源中国最帅没有之一 ⋅ 今天 ⋅ 0

vim编辑模式与命令模式

5.5 进入编辑模式 从编辑模式返回一般模式“Esc” 5.6 vim命令模式 命令 :“nohl”=no high light 无高亮,取消内容中高亮标记 "x":保存退出,和wq的区别是,当进入一个文件未进行编辑时,使...

弓正 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部