1,electron搭建
electron可以用js来创建丰富的桌面应用
一个electron应用的目录结构
your-app/
├── package.json
├── main.js
└── index.html
1，安装electron：全局安装
npm install electron -g
2，package.json内容
{
"name" : "your-app",
"version" : "0.1.0",
"main" : "main.js"
}
3，如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js
创建main.js文件
const electron = require('electron');
const app = electron.app; // 控制应用生命周期的模块。
const BrowserWindow = electron.BrowserWindow; //创建原生浏览器窗口的模块
// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;
//当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
// 应用会保持活动状态
if (process.platform != 'darwin') {
app.quit();
}
});
//当 Electron 完成了初始化并且准备创建浏览器窗口的时候
//这个方法就被调用
app.on('ready', function() {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({width: 800, height: 600});
// 加载应用的 index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');
// 打开开发工具
mainWindow.openDevTools();
// 当 window 被关闭，这个事件会被发出
mainWindow.on('closed', function() {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 但这次不是。
mainWindow = null;
});
});
4，创建展示的index.html文件
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>
5，运行应用
electron .
1,electron搭建的更多相关文章
- 使用electron搭建桌面app的简便方法
使用electron官方给出的`electron-quick-start`示例项目,将其拷贝下来, 1. git命令: git clone https://github.com/electron/ ...
- 跟我一起使用electron搭建一个文件浏览器应用吧（四）
在软件的世界里面,创建一个新项目很容易,但是坚持将他们开发完成并发布却并非易事.分发软件就是一个分水岭, 分水岭的一边是那些完成的被全世界用户在用的软件,而另外一边则是启动了无数项目却没有一个完成的. ...
- 跟我一起使用electron搭建一个文件浏览器应用吧（三）
第二篇博客中我们可以看到我们构建的桌面应用会显示我们的文件及文件夹. In the second blog, we can see that the desktop application we bu ...
- 跟我一起使用electron搭建一个文件浏览器应用吧（二）
这个文件浏览器应用可以具备以下两种功能噢- This file browser application can have the following two functions. 一:用户浏览文件夹和 ...
- electron搭建开发环境
环境:windons10, nodev14.17.1, vscode md a_star cd a_star npm i -g yarn yarn config set ELECTRON_MIRROR ...
- Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用
基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3laye ...
- Electron-Vue3-Vadmin后台系统|vite2+electron桌面端权限管理系统
基于vite2.x+electron12桌面端后台管理系统Vite2ElectronVAdmin. 继上一次分享vite2整合electron搭建后台框架,这次带来的是最新开发的跨桌面中后台权限管理系 ...
- 2016年度 JavaScript 展望（下）
[编者按]本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能,是<jQuery UI 实践> 一书的作者. 本文系 OneAPM 工程师编译呈 ...
- Electron-Vite2-MacUI桌面管理框架|electron13+vue3.x仿mac桌面UI
基于vue3.0.11+electron13仿制macOS桌面UI管理系统ElectronVue3MacUI. 前段时间有分享一个vue3结合electron12开发后台管理系统项目.今天要分享的是最 ...
随机推荐
- 树莓派4硬件---GPIO篇
树莓派拿到手已经两个多月了,其实从最开始的期待安装好ROS,到前几天完成了ROS的源码编译安装,对linux的调教也时花了些时间的.现在终于想起来,树莓派上还有GPIO,还没有用过了.说干就干,开始. ...
- 图片上传利用request.getInputStream()获取文件流时遇到的问题
图片上传功能是我们web里面经常用到的,获得的方式也有很多种,这里我用的是request.getInputStream()获取文件流的方式.想要获取文件流有两种方式,附上代码 int length = ...
- C#中 Dictionary<>的使用及注意事项
1,如果在主体代码中使用,直接在初始化中生成就行 2如果在其他层,比如逻辑层,要注意在事件内部定义,在外部的话,重复调用就会提示“”“已经定义了相同的KEY”,见例子 (例子是转的) Dictiona ...
- linux内核中IS_ALIGNED是如何定义的?
1. 定义如下: (include/linux/kernel.h) #define IS_ALIGNED(x, a) (((x) & ((typeof(x))(a ...
- Java并发包线程池之ThreadPoolExecutor
参数详解 ExecutorService的最通用的线程池实现,ThreadPoolExecutor是一个支持通过配置一些参数达到满足不同使用场景的线程池实现,通常通过Executors的工厂方法进行配 ...
- confluent kafka connect remote debugging
1. Deep inside of kafka-connect start up To begin with, let's take a look at how kafka connect start ...
- PAT 甲级1057 Stack (30 分)（不会，树状数组+二分）*****
1057 Stack (30 分) Stack is one of the most fundamental data structures, which is based on the prin ...
- LeetCode_108. Convert Sorted Array to Binary Search Tree
108. Convert Sorted Array to Binary Search Tree Easy Given an array where elements are sorted in asc ...
- 根据DELTA自动生成SQL语句
上传客户端的CLIENTDATASET.delta到服务器的clientdataset.data,服务端解析clientdataset的数据生成相应的SQL语句. 相对于直接调用datasetprov ...
- 学习 TTreeView [2] - Items.Item[i]、Items[i]、.Text、SetFocus(设置焦点)、Select(选择)
本例效果图: 源码: unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Co ...