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开发后台管理系统项目.今天要分享的是最 ...
随机推荐
- Js 之cookie插件（jquery.cookie.js）
一.代码 (function (factory) { if (typeof define === 'function' && define.amd) { // AMD define([ ...
- jmeter 常用插件
一.下载安装及使用 下载地址:https://jmeter-plugins.org/install/Install/ 安装:下载后文件为plugins-manager.jar格式,将其放入jmeter ...
- [RK3399] Jack server installation not found
CPU:RK3399 系统:Android 7.1 服务器上第一次编译 Android 7.1 的代码,提示 Jack server 没有安装. Jack server installation no ...
- Alpha冲刺（4/4）
队名:福大帮 组长博客链接:https://www.cnblogs.com/mhq-mhq/p/11913386.html 作业博客 :https://edu.cnblogs.com/campus/f ...
- [IMX6DL] CPU频率调节模式以及降频方法
本文转自http://blog.csdn.net/kris_fei/article/details/51822435 Kernel branch: 3.0.35 CPU的频率调节模式:1. Perfo ...
- Android 定义和使用样式
如图,在stryle.xml中定义样式 然后可以在布局文件中使用样式
- Docs-.NET-C#-指南-语言参考-预处理器指令：#endif（C# 参考）
ylbtech-Docs-.NET-C#-指南-语言参考-预处理器指令:#endif(C# 参考) 1.返回顶部 1. #endif(C# 参考) 2015/07/20 #endif 指定条件指令的末 ...
- java类什么时候加载？，加载类的原理机制是怎么样的？
java类什么时候加载?,加载原理机制是怎么样的? 答: 很多人都不是很清楚java的class类什么时候加载在运行内存中,其实类加载的时间是发生在一下几种情况: 1.实例化对象时,就像sprin ...
- Java使用Apache Commons Net的FtpClient进行下载时会宕掉的一种优化方法
在使用FtpClient进行下载测试的时候,会发现一个问题,就是我如果一直重复下载一批文件,那么经常会宕掉. 也就是说程序一直停在那里一动不动了. 每个人的情况都不一样,我的情况是因为我在本地之前就有 ...
- 跟我学Shiro目录贴
转发地址:https://www.iteye.com/blog/jinnianshilongnian-2018398 扫一扫,关注我的公众号 购买地址 历经三个月左右时间,<跟我学Shiro&g ...