使用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
- Javascript: 世纪机器语言?
- OpenDaylight与Mininet应用实战之基本环境搭建一
- 永恒不变的魅力
- MobileNet教程(2):用TensorFlow搭建安卓手机上的图像分类App
- OpenDaylight与Mininet应用实战之流表操作三
- 天啊,这个围笑代表什么?麻省理工的AI比你更懂 | 论文+Demo
- elixir:灵丹妙药?or 徒有其名?
- OpenDaylight与Mininet应用实战之三层转发机制四
- 程序员效率指南
- 【每日播报】OpenDaylight与Mininet应用实战之复杂网络验证(五)
- Docker hackathon, teamspark 及团队协作软件设计上的思考
- 应用开发中的网络安全
- 力作|phpcms_v9.6.1 任意文件下载漏洞
- 从开发者的角度看:打包和部署
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python数据可视化图实现过程详解
- Python matplotlib 绘制双Y轴曲线图的示例代码
- keras 读取多标签图像数据方式
- python新手学习可变和不可变对象
- COS Android SDK DEMO搭建实践
- 利用COS多版本避免文件误删除
- kube-prometheus添加target
- 深入浅析python 中的self和cls的区别
- php中如何执行linux命令详解
- Linux下 php7安装redis的方法
- 基于Keras中Conv1D和Conv2D的区别说明
- python中有帮助函数吗
- 浅谈Python中的生成器和迭代器
- python支持多继承吗
- 什么是python的函数体