使用JS开发桌面应用

Javascript在web开发中已经稳稳的占据了重要位置,现在已经开始渗透到桌面开发了

Electron 便是用来创建桌面应用的框架

使用 JavaScript + HTML + CSS 就可以开发跨平台的桌面应用

支持 Windows Linux Mac,在这3个系统中,Electron可以轻松的编译和运行

Electron 是开源的,由 GitHub 亲自维护,还有活跃的贡献者社区

Electron 源于 GitHub 开发的一款文本编辑器 Atom,刚开始,Electron 是为 Atom 而创建,后来被开源了出来

目前是 1.1 版本,还很年轻,他的功能如何呢?是否满足桌面应用开发的需求呢?

看下这些知名应用就知道了

GitHub 的文本编辑器 Atom

聊天群组应用独角兽公司 Slack 使用 Electron 搭建了桌面客户端

微软发布的代码编辑器 Visual Studio Code,使用 Electron 构建

JavaScript 语言发明人 Brendan Eich 的公司使用 Electron 开发了一套全新的网页浏览器 Brave Browser

上手尝试

下面写一个hello world,实际体验一下Electron

最终运行效果

右边的界面是不是很熟悉,因为Electron就是基于Chromium的

代码结构

electron_test
├── package.json
├── main.js
└── index.html
package.json
{
  "name": "deskjs",
  "version": "0.1.0",
  "main": "main.js"
}

格式和 Node 的完全一致,main 字段是应用的启动脚本

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Hello World</h1>
    <h1>第一个 JS 桌面应用</h1>
  </body>
</html>
main.js
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
var mainWindow = null;
app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});
app.on('ready', function() {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL('file://' + __dirname + '/index.html');
  mainWindow.openDevTools();
  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

运行

需要你已经安装好了Node.js

安装全局的electron编译包

npm install -g electron-prebuilt

然后在命令行直接执行 electron 这个命令,会自动打开他的控制台

可以直接把electron_test这个文件夹拖到控制台中,便会启动运行这个应用

还可以根据控制台中的提示,在命令行启动应用

electron的项目地址

https://github.com/electron/electron

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2016-05-19

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏生信宝典

本地安装UCSC基因组浏览器

UCSC基因组浏览器在大规模高通量数据的可视化和比较分析研究中发挥着重要的作用。拥有了本地浏览器,就可以对自己的测序数据进行更深入的分析和共享使用。本文详细介绍...

2805
来自专栏程序员的SOD蜜

使用ASP.NET MVC2+PDF.NET 构建一个简单的新闻管理程序 示例过程

     最近开始学习ASP.NET MVC技术,感觉跟原来的ASP.NET WebForm差异实在是太大了,看了2天的理论知识,才敢动手写一个实例程序。尽管是...

2708
来自专栏Core Net

ASP.NET Core 2.1 : 十三.httpClient.GetAsync 报SSL错误的问题

不知什么时候 ,出现了这样的一个奇怪问题,简单的httpClient.GetAsync("xxxx")居然报错了。

1052
来自专栏FreeBuf

开源版ZoomEye:基于Python的网络侦查框架 – IVRE

IVRE(又名DRUNK)是一款网络侦查框架,包括两个基于p0f和Bro的被动侦查模块和一个基于Nmap&Zmap的主动侦查模块,其功能类似于国内知道创宇公司推...

3867
来自专栏岑志军的专栏

WKWebView 白屏问题

5912
来自专栏NetCore

Catalog Service - 解析微软微服务架构eShopOnContainers(三)

上一篇我们说了Identity Service,因为其基于IdentityServer4开发的,所以知识点不是很多,今天我们来看下Catalog Service...

3108
来自专栏MelonTeam专栏

RunLoop解读

RunLoop 是ios/osx 应用程序运行的基础,它使我们的程序能够不断处在一个循环中,有效地接受事件并处理事件,可以说,它为整个程序的运行搭建了一个框架...

2467
来自专栏jessetalks

MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN

在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章。本文会涉及到Claims...

5695
来自专栏电光石火

ajax跨域请求时,sessionId不一样

2465
来自专栏程序员与猫

常见的Web实时消息交互方式和SignalR

标签: WebSocket SignalR 前言 最近因为项目中涉及到了实时数据的传输,特地去了解了一下当前Web应用中常见的实时交互手段,当然一开始也不仅限于...

5655

扫码关注云+社区

领取腾讯云代金券